数字の桁をそろえたい？tabular-numsと比例幅の数字を作例で比べよう

金額や時刻を縦に並べたとき、数字の種類によって桁がそろわなく見えることがあるよ。フォントが対応していれば、font-variant-numeric:tabular-numsで数字の幅をそろえられる。

文字の内容ではなく、字形の使い方を変える

.amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

tabular-numsは、同じ幅の数字の字形を使う指定。proportional-numsは、数字ごとの幅に違いがある字形を使う指定だよ。フォントに必要な機能が含まれていることが前提で、どのフォントでも見た目が変わるわけではない。

MDNの数値字形の説明で、それぞれの役割を確認できる。

作例では、対応するフォントを使う

下の作例は、Noto Sansから数字など必要な文字を抜き出した練習用フォントを同梱している。表示のための外部フォントサービスには接続しないよ。proportional-numsとtabular-numsを切り替え、111111と888888の幅を比較してね。

1. 比例幅へ切り替え、二つの数字列の幅が異なることを見る。
2. 等幅の数字へ切り替え、同じ桁数の幅がそろうことを見る。
3. 金額の列でも、右端と桁の位置を見比べる。
4. リセットで等幅の数字へ戻す。

編集部では、この同梱フォントで数字列の幅をブラウザ測定したよ。測定値は拡大率などで変わるため、特定のピクセル数ではなく、二つの列の幅の関係を見るのがポイント。

桁数や小数点までは、自動で整理しない

このCSSを付けても、1と1000の桁数はそろわない。小数点以下の桁、通貨記号、桁区切り、欠損値の表示は別に設計する必要があるよ。

表を読む目的なら、右揃えや列の見出しも一緒に確認しよう。数字を空白文字の連打で無理にそろえるより、文字の幅とレイアウトを分けて扱いやすくなる。表の見出しの基礎も参考になるよ。