本文と見出しのフォントサイズを数学的にバランスの良い比率でデザインする -Type Scale
Post on:2014年12月3日
本文と見出し、中見出し、小見出しのフォントサイズはどのように決めてますか?
一つの方法として、一定の比率でそのサイズを決めるのも有りです。というか、そうやってよく決めてました。
さまざまな比率をベースにして、本文や見出しの各フォントサイズを検討できるオンラインサービスを紹介します。
使い方は簡単で、英語のサービスですが日本語でも利用できます。
左の各項目は、下記のようになっています。
- 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