UIパーツにメイリオを指定しないほうがいい理由
はじめに 前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。 フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。 注意事項 メイリオという特殊なフォント まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。 といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。 Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。 記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。 そこでメイリオでは和文を縦方向に95％に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えると
font-familyについて本気で考えてみた - Qiita
今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザーの環境を考えなければならない節目の時です。 そこでいつもコピペで済ましているfont-familyについて1から考え直してみます。 全部読もうとしている人はスクロールバーを見てから考えてください。 結果 コピペユーザーのために先に結果を記載します。 ブログ等に転載する場合はこのページのURLぐらい貼ってください。 @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Original Yu Gothic"; src: local("Y
研究ノート | デジタルフォントと商標登録
はじめに デジタルフォントは、 「プログラム」という観点からすると著作物として保護がある一方で、 「文字」というものには、著作物としての保護がありません。 これがデジタルフォントを使用する上で、ややこしい点なのですが、 メーカー（提供者）が使用許諾範囲を設けることにより、著作権侵害を未然に防ぐという仕組みになっています。 許諾範囲の捉え方 前述しましたが、 （1）デジタルフォントをプログラムとして使用するか。 （2）デザインされた一つの文字として使用するか。 で著作権の有無が変わります。 使用する際は、この要素を最初に確認すると混乱せずに済みます。次に、 （3）ロゴ・映像・電子書籍に使うか。 という部分を確認すると許諾範囲の大筋を理解したことになります。 デジタルフォントの保護 こうした許諾範囲のバラつきの原因に下記の2点が挙げられます。 （1）メーカー特有の人気書体があるため イワタとダ
【日本語フリーフォントまとめ】プロのデザイナーも使っているおすすめのフリーフォントまとめ
マキナス マキナス 4 シリーズをダウンロード 刻ゴシック 刻ゴシックフォントをダウンロード 廻想体ネクストB 廻想体ネクストBをダウンロード コーポレート・ロゴ コーポレート・ロゴをダウンロード やさしさゴシック やさしさゴシックをダウンロード 黒薔薇シンデレラ 黒薔薇シンデレラをダウンロード 棘丸ゴシック 棘丸ゴシックをダウンロード マメロン マメロンをダウンロード 源柔ゴシック 源柔ゴシックをダウンロード 機械彫刻用標準書体 機械彫刻用標準書体をダウンロード 明朝系 まじめで優しいイメージを与える明朝体のフリーフォントです。 刻明朝 刻明朝をダウンロード さつき源代明朝 さつき源代明朝をダウンロード はんなり明朝 はんなり明朝をダウンロード うつくし明朝体 うつくし明朝体をダウンロード ほのかアンティーク丸 ほのかアンティーク丸をダウンロード ほのかアンティーク角 ほのかアンティーク
Webにおいて明朝体はNoto Serif CJKを使うべし -IE11対応版｜TechRacho by BPS株式会社
こんにちは。5月に産休育休から復職したデザイナーのニシです。 最近、健康と体力作りのために筋トレを始めました。毎日昼休みにコヤマさんと一緒に10分ほど筋トレしてます。皆さんもいかがですか。 今回は、レスポンシブサイトをデザイン・コーディングする際に明朝体の指定は何にするのが一番いいのか、試行錯誤した結果得た最適解を書きます。 最初に：結論 先に結論をいうと、 Google FontsのNoto Serif CJK（源ノ明朝）を使う IE11対応のためGoogle Fontsの設定で「Japanese」を必ず選択する です。Japaneseを選択しなかったというだけでかなり、右往左往してしまいました（後述）。 Google Fontsとしては他にも明朝体の選択肢はありますが、癖のない良い感じの明朝体というとやっぱりNoto Serif CJKかなーと思います。しかしいずれ、さわらび明朝も使っ
ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解 - Corredor
拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ？@font-face で游ゴシック Medium を指定してるのにな？」と思い、設定を見直したところ、コレが効かなくなっていた。 当時 Neo's Normalize を作る際、それなりに調査しまくった結果だったのだが、どうも仕様が変わっていたようなので、OS・ブラウザごとに挙動を見直すことにした。今回はその研究結果をまとめる。 游ゴシックフォントに関する基礎知識のおさらい Chrome で効かなくなっていた @font-face font-weight: 500 は効いたが、副作用が避けられない Chrome で游ゴシック Medium を使うのは諦める 別解 : 潔く Regular フォン
半角数字・英語・全角ひらがな・漢字が混在するリリースに最適なフォントは「凸版文久ゴシックR」
今では自分ではプレスリリースを書くことはありませんが、プレゼン資料を作ったりすることはありますので、これは良いことを聞いた。 半角数字・英語・全角ひらがな・漢字が混在するリリースに最適なフォントは「凸版文久ゴシックR」なのだそうです。 こちらのツイートで知りました！ 一緒に仕事してるPRパーソンが「半角数字・英語と全角ひらがな・漢字が混在するリリースに最適なフォントがない」と嘆いていたので、超一流フォントディレクターの紺野慎一さんに、「Macプリインストールのもので何かありますかね？」と聴いたら「凸版文久ゴシックR」をおすすめしてくれた。 — 今井雄紀 (@imai_tsudoi) 2018年12月19日 製品発表会やサービス発表会に行くと印刷されたプレスリリースを手渡されますが、そこでの文字の使い方で受ける印象というのは確かに違います。美しいの越したことはないと思います。 そこで、フォン
良質なデザインを作るため揃えるべき日本語フリーフォント10種類 - ベーコンさんの世界ブログ
フォント大好きデザイナーのベーコン（@dogdog464646）です！ 良質なデザインを作るには、良いフォントが欠かせません。 それでは、「良いデザイン」ってなんでしょう？ ちょっと頭に思い浮かべてみてください 例えば… ・かわいいデザイン？ ・お客さんが使いやすいデザイン？ ・意味が伝わりやすいデザイン？ こんな感じでしょうか？ じゃあ正解の発表です 正解は… 全部です！ というかデザインの正解は、状況によって変わるんですよね なので、状況によって変わる「いいデザイン」に対応するためには「たくさんの種類のフォント」が必要になります たくさんの種類のフォントで、表現の幅を広く持つことで、デザインを正解に導きやすくなります この記事はデザイナーだけではなく ・イラストレーター ・エンジニア ・ブロガー ・プレゼン資料を作っている人 ・学校やサークルでチラシを作る人 このような人たちに役立つ、
2018 モリサワ新書体
モリサワタイプデザインコンペティション2016欧文部門でモリサワ賞金賞・明石賞を同時受賞した、現代的な本文用セリフ書体です。カリグラフィックな骨格に柔らかさと鋭さが混在するユニークなエレメントを採用したオリジナリティ溢れるデザインながら、抑揚をおさえ、丁寧なカウンターの設計を行っているため小級数や低解像度のディスプレイ環境でも本文書体としての見やすさを失わない点が特徴です。 文字セット Pro（98言語をサポートする独自規格） ウエイト Regular / Italic 提供開始日 2019年1月24日 書体見本を見る 和文、簡体字、繁体字およびハングルまで展開されている「UD新ゴ」シリーズとの併記を目的として作られたサンセリフ書体です。シンプルかつ可読性を重視した設計を特徴としています。それぞれの文字に精通した海外デザイナーが制作に携わり、高品質で統一感のある表現を可能にしています。 可
読みやすいフォントの CSS 設定例 | murashun.jp
［ ＋ expand ］美しいフォントとはフォントの種類ゴシック体 vs 明朝体Web フォント総称ファミリーfont-family の設定例フォントのサイズフォントの色フォントの文字間隔フォントの行間まとめ関連記事美しいフォントとは 昔から Windows のユーザでしたが、初めて Mac のフォントを見たときの衝撃は今でも忘れられません。Windows と比べて Mac のフォントの美しさは際立っていました。その美しいフォントは "ヒラギノ" と呼ばれ、Mac の中心的なフォントのひとつで、これ以上に美しい日本語のフォントは見たことがありません。 Windows と Mac ではフォントのレンダリング方法が異なるため、今日に至っても Windows のフォントが美しくない問題は解決されていません。しかし、Windows は Vista 以降から "メイリオ" と呼ばれるフォントが収録さ
日本のブログでよく利用されているWEBサービスロゴのアイコンフォントまとめと利用方法
WEBサービスのアイコンフォントについて ウェブアイコンフォントと言えば現時点ではFont Awesomeが最も使われています。 Font Awesomeには、多数のウェブアイコンフォントがあり使い勝手もとても良いです。WEBサービスのロゴアイコンも多数揃っています。 ただ、Font Awesomeは海外で制作されていることもあり、海外でよく利用されているWEBサービスロゴしかありません。 例えば、Twitter、Facebook、Google＋、YouTube、Tumblrなどはあるのですが、feedly、はてブ、ポケット、LINEなど日本のブログ界隈でよく利用されているWEBサービスのロゴはありません。 こういうのは、自前でウェブアイコンフォントを作るしかありません。 僕も以前feedlyのアイコンフォントがなかったので以下のように作成しました。
【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ
大阪のホームページ制作会社プラスデザインカンパニーのブログ Vol.1
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
おしゃれ！明朝体フリーフォントのおすすめ16選【商用利用可】
明朝体フォントは手書きの雰囲気を残した日本語の情緒を感じさせてくれるフォントで、和文によく合います。また種類も豊富で、非常に個性が豊かなのも魅力です。 そこで本記事では、明朝体フリーフォントから、商用利用可能なものを16個をご紹介します。気に入ったフォントがあればデザインに取り入れてみてはいかがでしょうか。 ※フォントを利用する際は、各サイトの利用規約をご確認ください。 目次 明朝体フォントの魅力 はれのそら明朝 Oradano明朝GSRRフォント さわらび明朝 はんなり明朝 こころ明朝体 やさしさアンチック 刻明朝フォント 刻丸明朝かな ほのか明朝 あおぞら明朝フォント うつくし明朝体 ふぉんとうは怖い明朝体 戸越明朝 XANO明朝 梅明朝 イマジン・ヨコハマフォント 明朝体フォントの魅力 明朝体は横線に対して縦線が太いのが特徴。ウエイトが重くなっても、横線の太さはそれほど変わりません。
重宝すること間違いなし！役立つアイコンフォントセット19種
レスポンシブデザインが普及した流れから、近年多くのホームページで「アイコンフォント」を見かけるようになりました。 ちなみにアイコンフォントとは、その名のとおり、フォントに文字ではなくアイコンを割り当てたもののことです。一からアイコンを作成する手間が省けるということで、既に使っている方、ご興味をお持ちの方も多いのではないでしょうか。 様々なメリットを持つアイコンフォントですので、どんどん取り入れていきましょう。 そこで今回は、便利なアイコンフォントを配布しているホームページを複数ピックアップしてご紹介します。 アイコンフォントをお探しの方は、ぜひご覧ください。 ※各ページの掲載数などの情報は、2017年2月12日時点でのものです。今後変更となる可能性があります 便利なアイコンフォントセット19個 1. Foundation Icon Fonts 3 http://zurb.com/playg
アイコンデザインをWebフォントで表現出来る「アイコンフォント」の基本知識を解説
情報をコンパクトにわかりやすく伝えるデザインの1つに「アイコン」があります。 直感的に表しているものを理解できるアイコンは、看板からホームページのボタンまで様々なシーンに利用されています。 しかし、アイコン画像を使いすぎると、容量過多になりページが重くなってしまいます。 そんな時に便利なのが、テキストとしてアイコンを埋め込める「アイコンフォント」です。 今回はアイコンフォントとは何か、どのようなメリットがあるのかを解説します。 CSS3でも対応され、今注目を浴びているアイコンフォントについて、ホームページの制作に関わっている人は学んでおきましょう。 アイコンフォントとは アイコンフォントとは、簡単にいうと*「アイコンを表現出来るWebフォント」*です。 Webフォントとは、クラウド上にあげられたフォントデータを読み込むことでホームページに反映させる仕組みを指します。 CSS3からWebフォ
なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。入社以前はエディトリアルデザイナー（新聞・雑誌・書籍などの出版物のデザイナー）として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね！ 2017年2月27日追記：有識者の方からのご指摘を反映し、記事の内容を一部訂正いたしました。詳細な訂正内容については記事末尾をご覧ください。 今回の要点 日本語組版は約物（記号類）のアキが大事 Webブラウザの文字組がイマイチなのは、約物のアキ量が常に一定であることが原因 font-feature-settings: “halt” 1; で約物のアキをなくせるようになった jQury.yakumonoプラグインで行末約物半
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Windowsの標準フォントってどこまで“タダ”なの？ ～最新の状況をまとめたブログ記事が人気／許諾範囲は意外に広いが、フォントの改変やアプリ・ゲームへの組み込みはやめよう【やじうまの杜】
自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）
Engadget | Technology News & Reviews
