フォントサイズを黄金比で考える

  • 投稿日
  • 更新日
  • 著者 yuzinha
  • カテゴリー WEB屋の時間

無職生活も3週目に突入。
1週目は手続きやら何やらに追われ、2週目は子どもたちが相次いでインフルエンザに感染。
3週目に入りようやく自分のことができる…！！と思ったら今度は自分が風邪を引き（幸い、インフルではなさそうですが）無職生活を全然堪能していない感じになっています(´Д` )

ところで、家で仕事できるなら子ども見ながらできていいね、とたまに言われたりしますがそれは大いなる誤解です。
体調悪いときの子どもの機嫌の悪さには手を焼くし、熱下がったらパワーが有り余るし、子どもが二人以上になるとすぐに小競り合い起こすし、まぁ仕事どころじゃないです。
ぐったりしてたらそれはそれで心配やし、胃腸系の風邪なら排泄物の処理も大変やし、ほんま↑↑みたいなこと言う人は子どもの世話したことないんやろうなぁって思います( ꒪⌓꒪)

閑話休題。

で、やっと自分の仕事ができそうなので、自分仕様のデフォルトスタイルセットみたいなのを作りたいなぁと。
大体、自分でデザインする時はフォントサイズとか行間とかそんなに大きくは変わらないのであったら便利かなあと思い、作り始めたところであらためてフォントサイズについて考えています。

フォントサイズのパターンセット – デフォルト設定の場合

ウェブの場合だと、フォントサイズは大体5 – 7サイズを1パターンとして設定しておくことが多いかなと思います。

font-sizeのキーワード指定の場合、xx-large > x-large > large > medium > small > x-small > xx-small の７サイズがデフォルトで用意されていますね。
たとえばこんなかんじ。

font-size: キーワード指定の場合

font-size:xx-small
font-size:x-small
font-size:small
font-size:medium
font-size:large
font-size:x-large
font-size:xx-large

サイズ間のバランスはともかくとして、ベースとなるfont-size:mediumのサイズがブラウザによって異なる（14px or 16px）ということもあって、この指定はあまり使われていないような気がします。

もちろんベースフォントサイズは指定できますが、各サイズセットを個別に指定することが多いような。

フォントサイズのパターンセット – 私の場合（これまで）

私が最近まで手がけていたクライアントワークで使ってたのはこんな感じが多かったです。

今までよく使ってたパターン(1)

font-size: 11px
font-size: 13px
font-size: 14px
font-size: 16px
font-size: 18px

↑は私がこの仕事を始めた5年程前にはよく使ってました。
この2年ぐらいはベースフォントサイズが少し大きくなってこんな感じ。

今までよく使ってたパターン(2)

font-size: 14px
font-size: 16px
font-size: 18px
font-size: 24px
font-size: 28px

全体的にフォントサイズが大きくなっているのは、余白を大きめに取るフラットデザインやミニマルデザインが流行したり、1ページ完結型のページが増えたりして、ページ内の文字も大きくしたほうがバランスがいい場合が増えてきているからですが、ベースのフォント指定からPゴシックを外せるようになってきたことも大きいかなと思います。

Windows XPのサポートが終了してWindows 7以降への乗り換えが進んだおかげで、メイリオをフォント指定しても問題なくなってきましたからね。それまでメイン指定していたPゴシックだとフォントサイズを18pxより大きくするとジャギーが出てしまい大きくする気になれなかったのですが、最近はそんなこともなくなってきたのでフォントサイズを大きくすることにも抵抗がなくなってきました。

ちなみに、フォント指定については最近はこちらを参考にさせていただいています。
CSSでのフォント指定について考える（2014年） – DTP Transit

で、このサイズパターンをしていることが多かったのですが、全体的にもうちょっと大きなフォントサイズにしてもいいかなと思ったことと、覚えやすいからっていうだけでこういう単純なフォントサイズのパターンを使ってきたけれど、もうちょっとデザイン的に『根拠のあるサイズパターン』がいいよなってことでいくつか作ってみました。

デザインの王道？黄金比

黄金比は有名ですけれど、ついでに白銀比（大和比）でも作ってみました。
なお、いずれもベースフォントサイズは18pxで、5サイズのパターンセット（ベースフォントは下から2番め）としています。

黄金比 1:1.6180の場合

rem px サンプル
1 0.618 11.125 フォントサイズ font-size
2 1 18 フォントサイズ font-size
3 1.618 29.124 フォントサイズ font-size
4 2.618 47.123 フォントサイズ font-size
5 4.236 76.244 フォントサイズ font-size

めりはりが効いて、確かに美しい気がします。76pxは日本語フォントにはちょっと大きすぎる感が否めませんが…

白銀比（大和比） 1:1.4142の場合

続いて白銀比。白銀比には2つあって、こちらは大和比とも言われている方の白銀比。

rem px サンプル
1 0.707 12.728 フォントサイズ font-size
2 1 18 フォントサイズ font-size
3 1.4142 25.456 フォントサイズ font-size
4 1.200 35.999 フォントサイズ font-size
5 2.828 50.910 フォントサイズ font-size

一番大きいサイズでも50px程なので黄金比よりも大きすぎる感が抑えられていい感じ。

リュカ数を使う場合

いろいろ調べていた中でこういうのも見つけました。

【レスポンシブ・デザイン 】リュカ数列を使ってサイトに最適な日本語フォントサイズを割り出す方法 – TellmeDesign

これは黄金比や白銀比のように決まった数がベースフォントから公比を算出するのとは異なって、フォントの “x” と “d” の高低差から公比を算出します。

完全に余談ですが、リュカ数から求めた数列の場合、初項  = 1 となり、フォントの “x” と “d” の高低差は常に1以下なので第2項 < 1 となりますね。なので、フォントサイズパターンを作成する場合にはそこだけ昇順に並べ替える必要があります。

あと、これもどうでもいい違いのような気がしますが、リンク元で「リュカ数列」と訳されているのは「リュカ数」ではないかと思ったりしました。数学は高校数学までしかやったことがないので自信はないのですが。
（リュカ数 – wikipedia, リュカ数列 – wikipedia）

今回は、メイリオをもとに算出してみます。

meiryo-lucas-number

リュカ数は等比数列ではないのでちょっとややこしいですが、こちらも黄金比などと同様にフォントサイズパターンを作ってみます。

rem px サンプル
1 0.72 12.96 フォントサイズ font-size
2 1 18 フォントサイズ font-size
3 1.72 30.96 フォントサイズ font-size
4 2.72 48.96 フォントサイズ font-size
5 4.44 79.92 フォントサイズ font-size

リュカ数は黄金比と親しい関係性があるらしく、似たようなサイズ感になりました。黄金比より全体的フォントサイズが大きい感じ？ちょっと大きすぎるような気も。リンク元ではOsakaを使っており第2項の値がメイリオよりもわずかに小さい分、使いやすいサイズ感になっているのかもしれません。

ただ、リンク元の翻訳元の記事は欧文フォントを使っているのでxとdの高低差で第2項を算出していますが、日本語フォントの場合でもこの算出方法でいいのかには疑問が残ります。ひとつの算出の例として、という意味ではいいのかもしれません。

まとめ

これまでは漠然と何となく使いやすい偶数の整数値（しかも狭い範囲の）でルーチン的にフォントサイズを指定していましたが、こうしていろいろと検討してみるとやはりサイズにメリハリ感も出て、また全体としてまとまりも出てバランスよく見えるような気がしました。
よく「デザインには根拠を持たせろ」と言われますが、そのひとつとしてこういった法則を使ってみるのはまず叩き台としてはいいのかなと思います。（とりあえず、何でもこれでやったらいいというのではなくて）（個人的には白銀比のサイズ感が好きです）

今回はベースフォントサイズを18pxで作ってみましたが、他のサイズで試してみても面白いかもしれません。
また、すべて小数点第4位で四捨五入した値を使ってみましたが、実際の指定の際には近似の整数値でもいいような気がします。

フォントサイズとともに行間の高さ（line-height）をどうするか？などの問題もありますが、それについてはまたあらためて考えてみたいと思います。

css ウェブデザイン フォント

この記事を書いた人

yuzinha

記事一覧