本文と見出しのフォントサイズを数学的にバランスの良い比率でデザインする -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

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

sponsors

top of page

©2024 coliss