STEP 1
アイコンと文字が上下にずれる
Noto Sans JP で、アイコンと文字を並べたボタンを作りました。align-items: center で上下の中央にそろえています。
アイコンに比べて、文字が少し下に下がって見えます。2倍に拡大して、アイコンの上端と下端に赤い線を引きました。文字は上の線から離れ、下の線からはみ出しています。
STEP 2
文字の上下には空きがある
文字の箱は、目に見える文字よりひと回り大きく作られます。下は、同じ「Hg 見」の箱を3つの範囲に分けて色を付け、境目に線を引いたものです。フォントによって空きの大きさが違います。
IBM Plex Sans JP
Noto Sans JP
BIZ UDPGothic
- ハーフレディング
- line-height からフォントの高さを引いた残りを、半分ずつ文字の上と下に足したもの。line-height を大きくするほど増えます（ここでは
line-height: 2）。 - フォント上部・下部の余白
- フォント自体が持つ空きです。アクセント記号（Å など）や漢字のように大文字より背の高い文字のために、大文字の上に空きがあります。下は g や y の下に伸びる部分のための空きです。
- 大文字の上端〜ベースライン
- 目に見える文字の高さです。
- font-size の高さ（赤い点線）
- font-size で指定した高さの範囲です。フォント上部・下部の余白まで入れた高さは、font-size と同じとは限りません。
IBM Plex Sans JP は大文字の下の余白が上より大きく、Noto Sans JP は逆に上の余白が大きくなっています。BIZ UDPGothic は上下とも余白が小さめです。上下の余白が同じでないフォントでは、箱を中央にそろえても文字は上か下に寄ります。STEP 1 で文字が下がって見えたのはこのためです。
Noto Sans JP の箱の主な高さを、線で示したのが下の図です。左は CSS での呼び名、右はフォントファイルの中で値を持っている場所です。
CSSOpenType
この2つの空きのせいで、ボタンの文字が上下の真ん中に見えなかったり、見出しの上の余白が padding より広く見えたりします。
STEP 3
text-box で空きを削る
text-box: trim-both cap alphabetic を指定すると、上は大文字の上端、下はベースラインまで箱を削ります。STEP 2 の青の範囲だけが残るので、箱を中央にそろえると文字も中央にそろいます。
STEP 1 のボタンの文字に指定しました。赤い線はアイコンの上端と下端です。
指定なし
text-box: trim-both cap alphabetic
指定すると、文字が線の間に収まり、アイコンと上下の位置がそろいます。
カードの見出しでも同じです。薄い青の部分が文字の箱です。
指定なし
Title 見出し
カードの上の余白は padding の 16px だけのはずが、見出しの上に空きが足されて広く見えます。
text-box: trim-both cap alphabetic
Title 見出し
見出しの上の空きが削られ、上の余白が padding の 16px どおりになります。
使っている機能
text-box-trim- 削る側を決める。trim-both（上下）・trim-start（上）・trim-end（下）
text-box-edge- どこまで削るかを決める。cap alphabetic は、上を大文字の高さ、下をベースラインにそろえる
text-box- 上の2つをまとめて書く書き方
和文での注意- 漢字は大文字より背が高いので、cap で削ると文字が箱の上にはみ出す。和文向けの ideographic は Chrome が未対応
CSS
/* 上は大文字の高さ、下はベースラインまで、文字の上下の空きを削る */
.tb-trim .tb-icon-button span,
.tb-trim .tb-text {
text-box: trim-both cap alphabetic;
}