Web サイトの本文フォント
Web サイトで本文に対して
body {
font-family: "ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka,
"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 13px;
}とか
body {
font: 16px/26px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"ＭＳ Ｐゴシック","MS PGothic",
Helvetica, Arial, Sans-Serif;
}みたいなスタイルが適用されていることがある。この記事ではこうした指定の是非について考えてみる。
font-family
冒頭にあげたスタイルは本文をなるべく OS 標準フォントでするという意図があるのだろう。しかしそれなら単に font-family を未指定にすればよい。指定がなければブラウザに設定されたものが選ばれる。それは OS 標準であったり Web ブラウザ開発側が十分に検証したフォントになるだろう。
結果として OS 標準なフォントが選ばれるなら明示的に指定してもよいのではないか？という考え方もある。実際、こうしたフォント指定の影響を受けるユーザーは少数と思われる。
しかしその少数は明示的な理由をもってフォントを設定しているのだ。例えば Windows 環境で ClearType を効かせるためにメイリオを選ぶとか明朝体のスッキリした見た目を好むとか。またフォントを変更していなくても以下のような副作用も起きえる。
後者の記事では gdi++ (いまなら MacType がよいかも) で対処してるけど OS 標準なフォント指定が目的なら対策を必要とするのは本末転倒。また逆に 2ch などでアスキーアートを崩れず表示させる目的で Mac に ＭＳ Ｐゴシックをインストールしているユーザーがいたら、それはそれで面食らうかもしれない。
ユーザーのフォント環境も踏まえて最適な指定をするのは無理がある。そう考えると明示的にフォントを指定したいなら Web Font などでサイト側が表示を保証すべきだし、それが難しいなら未指定とするのが無難だろう。
font-size
私はブラウザのフォントを大きめのサイズにしている。ディスプレイにもよるが 96dpi ならメイリオで 18 ～ 20pt ぐらい。私の視力は 1.2 ～ 1.5 あるけれど、それでも小さな文字を長時間ながめるのはキツイのでこのようにしている。そのため文字が小さくなるのはフォント変更よりダメージが大きい。
本文のスタイルに font-size が固定値で指定されていた場合、私の設定より大きかった試しがない。いつも小さくなっていきなり読みにくくなるのだ。
文字サイズの指定はレイアウトも含めた設計なので仕方ない、という意見もあるかもしれない。しかし本文は基本的に可変長だから表示領域も可変にするものではなかろうか？文字サイズが変動しただけで表示が崩れるならレイアウトとして失敗だ。
では本文の文字サイズを大きくすることについてはどうか？というと、これもどちらかといえば反対。大きいぶんには見やすさを損なわないだろうけど文字サイズの構成は本文が 100% で他は本文を基準とする相対値になるのが自然に感じる。
まとめ
まとめると Web サイトの本文にフォントを指定してもいいことなし。むしろ厄介な副作用もあるため指定しないほうが安全である。本文のスタイルはユーザーに委ねることを基本としよう。
ちなみに私は本文のフォントやサイズ指定が読みにくいと感じたときに Firebug で CSS をいじったり、何度も訪れるサイトであれば Stylish でスタイル指定している。つまり対処できてるわけだが非常に面倒だし本来は不要な作業と考えているので、この記事を書くにいたった。
なお、本文以外の要素については対象ではない。本文と表示的な差をつける意味でもフォントやサイズを変更するほうが好ましいこともある。
余談
本旨とは関係ないのだけど「ＭＳ Ｐゴシック」のアルファベットがマルチバイト文字になっているのは何故なのだろう。全角星からやってきたマルチバイト人が決めたのか？名前を書くたびにゾワっとする。英語名は「MS PGothic」なのだからそのままにするか、せめて「MS P ゴシック」にしてほしかった。
Windows における「Program Files」はパスにスペースが入っても大丈夫だから自然な命名でゆきましょう、みたいな感じで決まったという噂 (論拠は見つけられず) を聞いたことがあるけど「ＭＳ Ｐゴシック」もそういうものなのかな。全角でもへっちゃらです的な。だとしてもアルファベット部分は ASCII でよかったろうに、なぜ。
あと文字サイズといえば BLANKEY JET CITY の METAL MOON というアルバムのジャケットを思い出す。
赤地に白く巨大な文字で書かれた歌詞は内容も含めて衝撃的だった。写真や絵もなくひたすら文字で埋めつくされる。こういうデザインもありなのかと感銘を受けたものだ。