文字の骨格
同じ16pxでも、書体が変わると大きさが変わって見えます。理由は骨格にあります。
図の中身を文字で読む
- アセンダーライン
- キャップハイト（大文字の高さ）
- x-height（小文字の高さ）
- カウンター（字の内側の空間）
- Hxdp ベースライン（文字が乗る線）
- ディセンダーライン
- x-height が高い書体ほど、同じ級数でも大きく見える。
- CSS の font-size は「em ボックスの寸法」であって、字面の大きさではない。だから書体を変えると見た目の大きさが変わる。
- 和欧混植では、欧文の x-height が低すぎると欧文だけ沈んで見える。
ひと目で#
- ベースライン
- 文字が乗っている線。揃えの基準はここ
- x-height
- 小文字の高さ。同じ級数でも大きさが違って見える、いちばんの原因
- キャップハイト
- 大文字の高さ
- アセンダー / ディセンダー
- b や p が、基準線を上下に超える部分
- カウンター
- 字の内側の空間。狭いと小さなサイズで潰れる
- em
- その書体の指定サイズと同じ幅の単位。字間はこれで指定する
使い分け#
| こう困ったら | 見るところ |
|---|---|
| 書体を変えたら文字が小さく見える | x-height の比率が違う |
| 和欧混植で欧文だけ沈んで見える | 欧文の x-height が、和文の字面に対して低い |
| 小さなサイズで字が潰れる | カウンターが狭い。または太いウェイトを使っている |
| ボタンの文字の下が切れる | ディセンダーの領域を、高さの計算に入れていない |
| アイコンと文字の高さが合わない | ベースラインではなく、中央で合わせる |
| 字間が級数によって広く見えたり詰まって見えたりする | px ではなく em で指定する |
「同じ16px」を実際の2書体で並べると、差は説明より先に見えます。
図の中身を文字で読む
- 同じ font-size を指定しても、同じ大きさには見えない
- Type Type
- 共通のベースライン
- Georgia x-height が低い Verdana x-height が高い
- 同じ指定でも小さく見える 同じ指定でも大きく見える
- font-size は em ボックスの寸法で、字面の大きさではない。書体を替えたら、見た目の大きさを目で合わせ直す。
- 代替書体との差は font-size-adjust で補正できる。
間違えやすいところ#
line-height: 1を本文に使うディセンダーとアセンダーがぶつかる- ボタンの高さを文字サイズから直接計算する下が切れる。
min-heightとpaddingで組む - 字間を px で指定するサイズが変わると比率が崩れる
- em を入れ子で多用する親の font-size を基準にするので累積する。レイアウトの寸法は rem
図の中身を文字で読む
- ✕ height を文字サイズから決め打ち ○ min-block-size と padding で組む
- 行ボックスの下にはディセンダーの領域がある 高さは中身が決める。どの書体でも切れない
- 送信 Sign up 送信 Sign up
- g と p の下が切れる min-block-size: 2.75rem; padding-block: 0.75em;
- ボタン・入力欄・バッジの高さは固定しない。利用者が文字を拡大しても、書体が代替に落ちても、切れずに伸びる。
- アイコンを添えるときは、ベースラインではなく中央で合わせる（inline-flex ＋ align-items: center）。
実装#
このコードで動いている見本です
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、予約ボタンの「y」の下が切れている、と実機確認で指摘されました。ボタンの高さを文字サイズから直接計算していたのが原因です。文字の下にはディセンダーの領域があり、行ボックスの高さは書体ごとに違います。高さの決め打ちをやめ、min-block-size と padding で組み直すと、どの書体でも切れなくなります。
同じ確認で「英数字だけ小さく見える」も挙がりました。級数は全行で揃っています。欧文書体の x-height が和文の字面に対して低く、沈んで見えていました。直すのは級数ではなく、書体の組み合わせのほうです。
コピーする#
アイコンと文字は、ベースラインではなく中央で合わせます。
このコードで動いている見本です
確認する#
- ボタンと入力欄で g・y・p の下が切れていない
- 同じ行の和文と英数字で、英数字だけ沈んで見えない
- 字間が em で指定されている（px は級数を変えると比率が崩れる）
このページで扱う語#
このページで扱う語を並べる本文では太字5 語
語の名前から引くなら用語索引へ。
- アセンダー
- b、d、f、h、k、l などの小文字が、x-height を超えて上へ伸びる部分。
- ディセンダー
- g、j、p、q、y などの文字が、ベースラインより下へ伸びる部分。
- エム・エン
- em はその書体の指定サイズと同じ幅の単位、en はその半分。相対的な寸法の基準になる。
- 合字
- 隣接する複数の文字が衝突するのを避けるため、1つの字形に結合したもの。fi、fl などが代表例。
- オプティカルサイズ
- 使用サイズに応じて字形そのものを最適化する仕組み。小さいときは字間を広く線を太く、大きいときはその逆にする。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
x-heightが違う。字面の大きさは font-size と一致しない。書体を替えたら級数も測り直す。
このコードで動いている見本です
ボックスの上端で揃えている。ベースラインで揃える。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は文字を読ませるにまとめてある。逆引きには全188件。
出典#
- MDN「font-size」
- Robert Bringhurst『The Elements of Typographic Style』