料金表や集計の画面を作ったとき、データもレイアウトも正しいのに、なぜか数字の並びが落ち着かないと感じたことはないでしょうか。金額の列の右端がそろわない、カウンターの値が変わるたびに行全体が少し横に揺れる。海外のフロントエンド制作者が公開している記事で、この見慣れた違和感の正体と直し方があらためて整理されていました。

原因はCSSでもデータでもなく、フォントが標準で出してくる数字の形にあるそうです。多くのフォントでは数字が文字と同じように幅を変えて並び、1は0より細く詰められます。文章の中ではこれが自然ですが、縦にそろえたい表や、その場で値が切り替わる表示では、桁の幅が毎回変わるため列が崩れたり数字が踊ったりします。

フォントに眠っている別の数字を呼び出す

解決策は font-variant-numeric: tabular-nums; の指定です。MDNの解説によると、これはOpenTypeの tnum に対応する値で、すべての数字を同じ幅にそろえます。字形そのものは変わらず、同じ大きさの枠に一つずつ収まるので、金額の列は右端がきれいに並び、タイマーや在庫数のように刻々と変わる値も横に動かなくなります。記事の著者は、表や数値のパネル、カウンターに入る数字にはとりあえず付けておく、という使い方を勧めていました。

同じ記事では、ほかの切り替えも紹介されています。文章中の数字を小文字のように上下に出入りさせて行になじませる oldstyle-nums、「1/2」と打った文字を本物の分数の形にする diagonal-fractions、ラベルを太さを保ったまま小さな大文字にする font-variant-caps: small-caps です。分数の指定は日付のような斜線の入った数字まで巻き込むので、分数の部分だけを span で囲んで適用するのがよい、という注意も添えられていました。

ブラウザの対応についての心配はほとんどありません。MDNでは font-variant-numeric は2020年1月から主要ブラウザで使える状態とされています。一方で落とし穴もあり、著者によるとGoogle Fontsで配信される可変フォントの多くは、容量を減らすために旧来の数字の形や分数などを省いているとのことです。指定しても見た目が変わらないときは書き方の誤りではなく、フォントのファイルにその字形が入っていない可能性があります。字形が無い場合も普通の数字で表示されるだけなので、表示が壊れることはありません。

日本語のサイトでは、本文の数字が和文フォントの字形で表示されることも多く、フォントによって効き方が変わります。中小企業のサイトでも、料金表や営業時間、実績の数値を並べたページは意外と多いものです。見出しや本文を変えずに数字の部分だけ整えられるので、既存サイトの手直しのついでに、使っているフォントで tabular-nums が効くかを一度確かめておくと、表まわりの印象が少し締まるはずです。