More than 5 years have passed since last update.

Web サイト本文の font-family に指定するフォントの決め方

Last updated at 2016-04-20Posted at 2016-04-04

Web サイト本文の font-family にどのフォントを指定するべきなのか考えたことをメモっとく。

明朝体とゴシック体

Web の本文は一般的にゴシック体で印刷物の本文が一般的に明朝体なのと異なる。ディスプレイに小さなサイズで明朝体を表示するとジャギーが多くなって可読性が低下するからだ。現在の高 PPI ディスプレイだと明朝体でも綺麗に表示されるけどね。

高 PPI ディスプレイが標準的になったとはまだ言えないので、現在でもゴシック体を指定するのが無難だろう。

Windows に入っているゴシック体の和文フォントで font-family に指定する候補として上がってくるのは下記の2つだろうか。

「ＭＳゴシック」と「ＭＳＰゴシック」を除外したのは、可読性の高い本文という観点では和文は等幅フォントで、欧文はプロポーショナルフォントである必要があるけど、どちらのフォントもそれに対応できないから。和文フォントと欧文フォントの混植で解決する方法もあるけど、そうしない理由は後述する。

Web サイト本文のフォントとして「メイリオ」と「游ゴシック」のどちらがいいのだろう？

スクリーン上での可読性を重視してつくられた「メイリオ」が Web サイト本文のフォントとして無難かな。

主観的に Windows 上で動作するブラウザが表示する小さなサイズの「游ゴシック」は汚いと思うので「メイリオ」がいいと思う。

Windows ユーザー向けの和文フォントのデモページを用意したので自分の目で見て決めてほしい。Windows でフォントを綺麗に見せる ClearType という技術は液晶ディスプレイのドットの三原色の配置に密接に関連した技術なので実機で確認するのがいいと思う。

OS X を利用している Web 制作者は Windows 環境での「游ゴシック」の表示をちゃんと確認してね。

OS X に入っているゴシック体の和文フォントで font-family に指定する候補として上がってくるのは下記の2つだろうか。

Web サイト本文のフォントとして「ヒラギノ角ゴシック」と「游ゴシック」のどちらがいいのだろう？

OS X ユーザーはシステムフォントの「ヒラギノ角ゴシック」を見慣れていたり、Apple の Web サイトは「ヒラギノ角ゴシック」を使用していたりするので、「ヒラギノ角ゴシック」という選択は無難かな。

「ヒラギノ角ゴシック」で Web を見ることに慣れすぎてしまっているからかもしれないが、主観的には和欧文混植の場合に「ヒラギノ角ゴシック」の方が読みやすいと思う。

OS X ユーザー向けの和文フォントのデモページを用意したので自分の目で見て決めてほしい。比較用に「メイリオ」も並べておいた。Office for Mac が入ってる OS X なら「メイリオ」が入っているからね。

「メイリオ」の場合は混植しない方がいい。「メイリオ」の欧文フォントは Verdana を「メイリオ」用にリデザインしたものなので和欧文混植での可読性が最初から考えられているから。

「ヒラギノ角ゴシック」の場合は混植するしないは好みの問題かなと思う。和文フォントと欧文フォントの混植で明確に発生する問題は「三点リーダー」のような記号が欧文フォントのものになってしまうこと。

OS X ユーザー向けに Helvetica Neue と「ヒラギノ角ゴシック」を混植したデモページを用意したので自分の目で見て決めてほしい。

「メイリオ」と「ヒラギノ角ゴシック」を下記のように指定するのがいい。

p {
  font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
}

Helvetica Neue と「ヒラギノ角ゴシック」で混植したかったら下記のように指定する。

p {
  font-family: Helvetica Neue, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
}