「font-size:16px;」の謎

ウェブ制作において「フォントサイズ」と「フォントスタイル」、そして「行間」は非常に重要な要素となります。個人的に「フォントカラー」については、黒系であれば、特になんでもかまわないという印象がありますが、サイズとスタイルについては、全体のレイアウトにも関連してくる重要な要素であると感じています。

デフォルトのフォントサイズは16pxなのか?

まず基本として、デフォルトのフォントサイズは16pxと言われています。この真否は定かではありませんが、ぼくは概ね、様々な理由でこの説は正しいと考えています。

例えば、CSSでフォントサイズを何も指定しない状態で、320pxのボックスに文字を詰め込んでいくと、ちょうど20文字が入ります。これは19文字でも21文字でもなく、ジャスト20文字であることをぼくは確認しています。

さらに、640px、1280pxとボックスを広げていくと、40文字、80文字と増えていきます。これは39文字でも41文字でもありません。ジャスト40文字、80文字で1文字の違いもなくぴったり収まります。文字数カウンターの限界まで調査してみましたが、width幅を広げても誤差は確認できませんでした。

ブラウザも変えていくつか調査してみましたが、結果は同じでした。

これらのことから考えて、当サイトでは「フォントサイズ100%は概ね16pxである。」との前提で話を進めていきたいと思います。なかには、100%でバグの出るブラウザもあるようで、意図的に100.01%にするのがよいという方もいらっしゃいますが、当サイトでは「font-size:100%;=font-size:16px;」ということを前提にしています。

また、この16pxというのは、文字の縦と横の長さが16pxの正方形であるという点も前提にさせて頂きます。

プロポーショナルフォントや等幅フォントなどの違いもあるかと思いますが、縦横の比率を1:1の割合とぼくはみなしています。これを調べるには、ボックスに高さを指定して上記と同じことをやればいいだけです。

この場合、line-heightを100%にしないとずれてしまいますが、おそらくは高さも16pxであると確認できるかと思われます。

14px、15pxはデフォルトフォントサイズの何%なのか?

次に、ウェブでよく指定されることの多いフォントサイズについてデフォルトフォントサイズの何%なのかを調査してみたいと思います。

例えば、わりと一般的に使用されている「font-size:13px;」です。

これは僕もたまに指定することがありますが、サイトに専門的、学術的なふいんきを醸し出すのに最適なフォントサイズと思います。16pxなら少し大き目の文字サイズになるため、小学生向きのサイトになってしまいがちです。その点、13pxの文字サイズでびっちり埋めていきますと博学なふいんきが出てくるのです。

で、この13pxをデフォルトの16pxで割ると、13割る16で「0.8125」の値が出てきます。

つまり、「font-size:81.25%;」を指定すると、これがまさに「font-size:13px;」と同じ意味になると考えられるわけです。

同じように、14pxは「0.875」、15pxは「0.9375」の値が出てきます。ついでにいえば、12pxは「0.75」 、11pxは「0.6875」、10pxは「0.625」です。

まとめると以下のようになります。

10px → font-size:62.5%;
11px → font-size:68.75%;
12px → font-size:75%;
13px → font-size:81.25%;
14px → font-size:87.5%;
15px → font-size:93.75%;

ここまで書けばお気づきになられるかと思いますが、実は1pxから16pxまで、デフォルトのフォントサイズが16pxならたいていの文字サイズで割り切れてしまいます。

例えば、「0.4666666…」のように、割り切れないケースがありません。もし、デフォルトのフォントサイズが17pxだったとしたら、16割る17でこの時点で割り切れません。15pxであったとしても、14割る15でこれも割り切れません。

「なぜ、16なら割り切れるのか…?」

これは意図的にそのような仕組みになっているのか、それとも単なるたまたまなのか、非常に謎めいております。いずれにしても、デフォルトのフォントサイズとしては16pxが都合のよい数字かと思います。

ぴったり合ったwidthの指定がエレガント

ここで本来のCSSの指定方法に戻るわけですが、コンテンツのwidth幅を文字サイズで割り切れる値にして、ぴっちり詰めた方が見栄えがよくなります。前提として、等幅フォントのフォントファミリーを指定する必要がありますが、メイリオなどで指定すると最適です。

例えば、15pxの文字サイズ(font-size:93.75%;)で1行の文字数を50文字とすると、15かける50でwidthを750pxで指定するとぴったり合います。あるいは、13pxで40文字とすると520pxです。このように指定することにより、文章の右端がガタガタしないでぴったり合いますので、見栄えがしっかりしてきます。

もちろん、行のなかに、英数字や半角文字を指定した場合は多少はガタつきますが、基本的に大きくガタガタすることはなくなります。加えて、行間をline-height:1.6;程度に指定しておくと、わりといい感じのウェブデザインになるはずです。

ちなみに、1行の文字数については、これは液晶画面の大型化にともない、最近は増加傾向にあるかと思いますが、文字サイズも1行の文字数も多めになってきているウェブサイトが多いようです。この点については、いずれ、最適な文字数についても検証してみたいと思います。