こんなfont-familyの指定順は嫌だ

僕はこんなfont-familyが嫌だ

僕は、を強調しているのは本当にどうしようもなく個人の気持ちだから。
ある意味宗教戦争みたいな内容なので仕方ないものの、どの文でも「一概には言えませんが〜」と書くのも歯切れが良くありません。
というわけで、この記事の文章は自分の気持ちが全ての基準です。

欧文より和文が先に指定されている

font-family: メイリオ, "Hiragino Kaku Gothic Pro", Meiryo, "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif;

相当有名なサイトからそのままコピペしてきました。
「僕は嫌です」と宣言しているので流石に名前は伏せます。

上記の指定だと何が起こるか

欧文がHelveticaではなく和文の従属欧文で描画されます
なぜなら和文フォントの中に英数字があるからです。

解説

文字にフォントが適用されるステップは以下のようなイメージです。

font-family内の先頭のフォントを認識する → そのフォントを使って文字が描画出来ればOK → 出来なければ次のフォントで文字の描画を試みる

和文を先に指定していると和文中の英数字で描画出来てしまい、欧文フォントは画面に登場しません。

ですから欧文を先に指定するべきです。

ちなみにこのサイトの海外向けバージョンを調べたら、英語に翻訳された同じスタイルのサイトではなくて完全に別物が現れました。
つまり、海外ユーザー向けの施策というでもないのでしょう。
（海外ユーザー→ローカルに和文フォントが入っていない→和文指定が先でも欧文フォントで描画される）

Helveticaより先にArialが指定されている

font-family: Arial, Helvetica, sans-serif;

という指定も見かけました。

上記の指定だと何が起こるか

HelveticaではなくArialが画面に描画されます

解説

仕組みは前の節で書いたのと同様です。

歴史を紐解くと、ArialはHelveticaに「似るために」生まれたフォント。
そしてWindowsにもMacにも標準搭載されているフォント。

Helveticaが表示できるMacユーザーに大して、あえて「Helveticaに似せたフォント」であるArialを表示させる指定をしている訳です。

（ArialとHelveticaの話は相当長くなりますので、タイプフェイスデザイナー大曲都市さんのブログ記事へのリンクを貼ります。詳しく知りたい方はこちらをどうぞ。）

ヒラギノ角ゴシックより先にメイリオ指定されている

font-family: "Meiryo","Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;

これも相当有名なサイトからそのままコピペしてきました。
「僕は嫌です」と宣言しているので流石に名前は伏せます。

上記の指定だと何が起こるか

Officeソフトを入れてるMacユーザーにはヒラギノ角ゴシックではなくメイリオで描画されます。
（嫌すぎて、僕は普段メイリオの使用を停止しています。）

解説

仕組みは前の節で書いたのと同様です。

ヒラギノが先なら先で「Windowsユーザーの画面に、あのヒンティングで表示されるヒラギノ角ゴシックが不憫」と思った方もいるかもしれません。
しかしそれでもメイリオよりは美しいと思います。

終わりに

和文の順番は美学や宗教っぽい問題ですが、欧文を和文の後に指定するのはただただ無駄です。
どこかからコピペしただけのfont-familyはやめましょう。