Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2015年2月28日 Web制作

毎回悩むfont-familyの指定、うちのブログはこれで統一しました


ffml しばらくはこれで問題無い…と思う。
Webサイトやブログを構築する際、微妙に悩むのが「font-family」の指定です。毎回「Mac環境でもメイリオが入ってることもあるし…」とか「Windowsでヒラギノ角ゴを表示させると汚いし…」とか考えるのもバカらしいので、しっかりと現在の環境を調べて統一することにしました。いやぁ、スッキリしましたね、ホント。

今回色々調べた中で、特に参考になったサイトはこちらです。 どちらも去年の記事ですが、現環境でも全然問題ありません。

君に決めた!

さっさと自分の中の答えを発表します。
font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
はい、先ほどのサイトに載っていた記述の丸パクリです。実際に色々試してみたんですが、これが一番無難、というか綺麗に表示出来ている気がしました。

英字はVerdanaで

WinとMacの共通で使える英字フォントはいくつかありますが、Verdanaが一番綺麗で識別しやすいです。 vdn 良い。すごく良い。

日本語フォントは游ゴシック>ヒラギノ>メイリオの順番で

游ゴシックってなんだ?って感じだったんですが、Win8.1とOSX10.9以上で共通で使える日本語フォントみたいですね。知らなかった。LeoTiger_7はWin7なので実際には確認していないんですが、公式サイトを見た感じだと癖のない綺麗なフォントだと思います。 表示が統一されるに越したことはないので、とりあえずVerdanaの次に突っ込んでおきます。

次に指定した「ヒラギノ角ゴ ProN W3」ですが、Macでの表示は問題ありませんよね。デフォルトのフォントだし、普通に綺麗です。ただ、ヒラギノをインストールしているWindows環境を考慮すると頭が痛くなります。Windowsのフォントレンダラはちょっとお粗末な出来なので、ヒラギノでWebページを表示すると異常に文字が汚くなるんですよね…こればっかりはどうしようもないので、先人が言っている「ヒラギノがインストールされているWindowsを使ってる奴なんて少ない」という言葉を信じて無視します。というかアレだ、MacTypeとかgdippとか使ってください。

次に、Win7以下の環境で忌まわしいMS Pゴシックを封印するためにメイリオを指定します。まぁメイリオもそこまで綺麗なフォントとは思わないんですが、MS Pゴシックよりは、ね?

最後にお決まりの「sans-serif」を記述して終わりです。 特に拘りが無いなら、Webサイトのフォント指定は何も考えずにこの記述をしておけば問題ないと思います。
関連するかもしれない記事