本文と見出しのフォントサイズを数学的にバランスの良い比率でデザインする -Type Scale

本文と見出し、中見出し、小見出しのフォントサイズはどのように決めてますか？
一つの方法として、一定の比率でそのサイズを決めるのも有りです。というか、そうやってよく決めてました。

さまざまな比率をベースにして、本文や見出しの各フォントサイズを検討できるオンラインサービスを紹介します。

使い方は簡単で、英語のサービスですが日本語でも利用できます。

Type Scale

左の各項目は、下記のようになっています。

Base Size

ベースにするフォントサイズを入力します。

Scale

比率を選択します。
1.2, 1.414, 1.618などよく使う比率だけでなく、カスタムで数値を入れることもできます。

Preview Text

表示するテキストを入力します、日本語でも可。

Google Fonts

日本語で利用する場合は、特に変更はいりません。

Font Family

明朝体の時は「serif」、ゴシック体の時は「sans-serif」を入力。

Weight

フォントのウェイトを入力します。

Permalink

入力した内容のパーマリンクが発行されます。

右サイドバーではページで確認ができ、フォントや背景のカラーを変更できます。
※ページビューは日本語に未対応のようです。

という感じで、いくつかよく使う比率で試してみました。
ベースのフォントサイズは、16pxです。

1.414 -Augmented Fourth

1.200 -Minor Third

1.333 -Perfect Fourth

1.618 -Golden Ratio

大きい文字の見出しも大切ですが、小さいサイズがきちんと読めるようにするのも大切ですね。