このページの中身

大きさの体系

使ってよい文字サイズを先に決めておくと、迷う場面が1つ減ります。段は5つから7つで足ります。

タイプスケールの比率を1.125と1.333と1.5で比較し、段の差の出方を示した図
図を大きく見る
図の中身を文字で読む
  • 1.125　静か。階層が出にくい　1.333　標準的なWebサイト　1.5　劇的。中間段が足りなくなる
  • 見出し　本文　本文
  • 見出し　小見出し
  • 小見出し
  • 見出し　中見出し
  • 見出し　大見出し
  • 隣の段との差が読み取れない　大見出し　本文と小見出しの間が空きすぎる
  • 段は5〜7に絞る
  • 段が多いと、隣どうしの差が知覚されず、どれを使っても同じに見える。
  • 比率を1つ決めれば段は計算で出る。端数は実用値に丸めてよい。本文だけは読みやすさを優先して先に決め、そこから上下へ展開する。
  • 比率が小さいほど静かで密度が高く、大きいほど劇的になる。デザインスタイルの選択でもある。

ひと目で#

タイプスケール
使ってよい文字サイズの段を決めた一覧。5〜7段
モジュラースケール
比率を1つ決め、掛け算で段を作る方式
流体タイポグラフィ
clamp() で画面幅に応じてなめらかに変える。見出し向き
垂直リズム
行送りの倍数で縦の余白を揃える。読み物向き
等幅数字
数字だけ幅を揃える。表と金額には必須

使い分け#

こうしたい選ぶ比率と方式
落ち着いた読み物1.2（Minor Third）
標準的な企業サイト1.333（Perfect Fourth）
劇的な見出しが欲しい1.5 以上。ただし中間の段が足りなくなる
見出しを画面幅でなめらかに変えたい流体（clamp()）
本文のサイズ固定。可変にしない
表や金額の桁を揃えたいfont-variant-numeric: tabular-nums

間違えやすいところ#

階段を作ったら、次の仕事は割り当てです。要素ごとに値を選び直すのではなく、段の名前で指定します。

計算で出たpx値をそのまま散らばらせた例と、5段のトークンに割り当て直した例の比較
図を大きく見る
図の中身を文字で読む
  • ✕ 出た値をそのまま置く　○ 5段に割り当てる
  • 似た値が多すぎて、差が階層にならない　段の名前で選ぶ。迷いは「どの段か」だけになる
  • 36px　--text-2xl
  • 32px　--text-lg
  • 28px　--text-base
  • 15px
  • 16px　15px
  • --text-sm
  • 14px　本文は --text-base の1段に固定。
  • 6種の値が3段にしか見えない　px の直書きは削除する
  • 段は5〜7に絞る。使う値の候補を先に決めておけば、要素ごとに数値を発明しなくて済む。

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

コーポレートサイトの初稿です。見出しが 28px・32px・36px とバラバラ、本文は 15px と 16px が混在、料金表だけ 14px です。デザインツール上では「だいたい同じ」に見えますが、階層が1段しかありません。

比率 1.25 の階段を --text-sm から --text-2xl まで5段に固定します。本文は --text-base のみ。見出し h1 は --text-2xl、h2 は --text-lg、キャプションは --text-sm に割り当て、それ以外の px 指定は削除します。見出しだけ clamp() で流体にし、推奨値には必ず rem を含めます。

確認する#

使えるパターン#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

本文を何ピクセルにすればいいか

16pxを下限にする。指定はpxではなくremで、利用者のブラウザ設定に追従させる。

このコードで動いている見本です

見出しの大きさが決まらない

比1.2〜1.25の階段を作り、その中から選ぶ。1ページで使うのは4段まで。

このコードで動いている見本です

この場面のほかの困り事と、そのまま貼れる部品は文字を読ませるにまとめてある。逆引きには全188件。

階段を作る#

この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 字と余白と幅

基準と比率を決めると階段が出ます。実寸で並ぶので、使う段を目で選べます。

clampを試す#

最小・推奨・最大の3値で、画面幅に連動する見出しを作ります。推奨値には rem と vw の両方を含めます。

画面幅で伸びる見出し

この道具は JavaScript で動きます。無効の場合は、比1.2〜1.25の階段を手で作ってください。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。