読みやすい文字の階層
タイポグラフィスケールを使うと、見出しと本文の関係に一貫性が生まれます。基準サイズは本文、上の段階は見出しとして使います。
余白と行間も一緒に設計
文字サイズだけではなく、行間や段落間隔も合わせて確認すると、実際のページに近い判断ができます。
Type Scale
Type Scale is a free browser-based tool. Supported files are processed locally whenever possible, with no installation required.
生成されたスケール
記事プレビュー
CSS variables
スケール選び
どの比率がおすすめですか？
情報量の多い画面では1.125〜1.25、見出しを大きく見せるLPでは1.333以上が使いやすい目安です。
remは何を基準にしていますか？
ブラウザ既定のルートサイズ16pxを基準に表示します。プロジェクトのhtml要素が別サイズなら値を調整してください。