スキップしてメイン コンテンツに移動

投稿

12月, 2012の投稿を表示しています

【CSS】font-familyを指定するな。ユーザー選択に任せよ。

参照: [CSS]俺好みのfont-family指定が最強に読みやすくてオススメ! 上記記事にも直接コメントしましたが、これ以上他人様のブログで自説を展開するのもよろしくありませんので、ここに書きます。 まず前提として、ぼくは 「日本語文章に欧文フォントを指定すべきではない」 と考えています。 理由は上記記事のコメントにも書きましたが、 高さ・ウェイト・字幅・ベースライン等が揃わず 非常に不格好になる。 ためです。 具体例を出しましょう。 「Windows7 + IE9」 「デフォルトフォントにMS Pゴシック指定 + ClearType有効」 環境において、どのように表示が不格好になるのか確認します。 font-family: Arial, sans-serif; とした際のサンプルが以下になります。 これを見て、どうでしょう? 気にならない方もいらっしゃるのでしょうが、 僕に言わせれば「めちゃめちゃ」です。 たとえば3行目を見てみます。 半角括弧がArialで描画され、続く「英」はMS Pゴシックです。 文字の高さが非常に不揃いになっていますね。 その箇所をドラッグで選択してみたのが上図になります。 フォントの境目で高さが変わっているのがよりはっきりしました。 では、このまま表示を拡大していきます。 おやおや 太さがおかしく なってきました。 (実は1枚目の画像も同じ状態です) これが最初に書いた「ウェイトが揃わない」という現象です。 欧文フォントのほうがClearTypeが効き始めるポイントが小さいため、 このようなことが発生します。 英字だけが妙に強調されて見え、かなりの不統一感があります。 さらに拡大したところで、ようやく太さの違いが見えなくなりました。 文字サイズが大きくなったことで、 MS PゴシックにもClearTypeが適用されるようになったのです。 しかし最初の、 高さが揃わない問題については未解決 のままです。 Arial+メイリオならどうか 最近ではこちらの環境の方が優勢でしょうか。 ブラウザのデフォルトフォントでメイリオを指定した場合の想定です。 CSSは、 font-family: Ar