タイポグラフィスケール生成

基準サイズと音階のような比率から、読みやすい文字サイズ階層を作ります。

生成されたスケール
記事プレビュー

読みやすい文字の階層

タイポグラフィスケールを使うと、見出しと本文の関係に一貫性が生まれます。基準サイズは本文、上の段階は見出しとして使います。

余白と行間も一緒に設計

文字サイズだけではなく、行間や段落間隔も合わせて確認すると、実際のページに近い判断ができます。

CSS変数
スケール選び
どの比率がおすすめですか？
情報量の多い画面では1.125〜1.25、見出しを大きく見せるLPでは1.333以上が使いやすい目安です。
remは何を基準にしていますか？
ブラウザ既定のルートサイズ16pxを基準に表示します。プロジェクトのhtml要素が別サイズなら値を調整してください。