はじめに
サイトのフォントサイズの決め方として、「タイプスケール」を用いる方法があるようです。
画面のモック作成中、フォントサイズに迷うことがあったので共有です。
STEP1 タイプスケールの比率の大きさを決める
大きいとメッセージが強調されて、小さいと一覧性が高まる
- 広告やマーケティングサイトを作りたい ⇒ メッセージを強調するため、比率を大きくする
- ECサイト ・ アプリを作りたい ⇒ より多くの情報を配置できるよう、比率を小さくする
STEP2 タイプスケールの比率のルールを決める
<タイプスケールの比率のルール >、
- 1. 乗算のルール （一定の倍率で大きくなる・小さくなる）
- 2. 加算のルール（一定数ずつ大きくなる・小さくなる）
通常は乗算のルールに従えばいいそうですが、複雑な業務アプリを作る場合は、加算のルールに従うと良いようです。
UIガイドラインではフォントについて、
12px・・・Sub Text
14px・・・Main Text
16px・・・Main Text
18px・・・Title
24px・・・Special Text
と記載されているので、おおむね2. 加算のルールに従っています。
実際に触れるサイト
↑のサイトでは、ベースになるフォントサイズに合わせてタイプスケールを自動で決めてくれます。
（使い方はこちら参照)
参考