数字の書式

定義

数字の書式は、フォントが数字を描くやり方を選んで使う機能です。なかでもいちばんよく使うのが、数字の幅を扱う設定です。等幅（tabular）の数字は 0 から 9 までのすべての数字が同じ幅を占めるように作られているので、数字を縦に積み重ねると桁が縦にぴたりと揃います。反対にプロポーショナル（proportional）の数字は文字ごとにふさわしい幅を持っていて、たとえば 1 は狭く、0 は広く描かれます。同じフォントのなかにこの二つの方式が一緒に入っていて、使う場所に合わせて選んで使えます。どちらが優れているというより、目的の違う二つの道具だと考えるとよいでしょう。この選択は font-variant-numeric プロパティで指定します。

なぜ重要か

表や価格、ダッシュボードの指標のように数字を縦に並べる場所では、桁がずれると読むのがとても不便になります。プロポーショナルの数字は幅がまちまちなので、上下の行で同じ位置の数字が互いにずれてしまい、値の大小をひと目で比べるのが難しくなります。等幅の数字を使えばすべての桁が垂直に正確に揃うので、どの値が大きくて小さいか、目で追うだけですぐにわかります。またリアルタイムで変わる数字でも、等幅を使えば値が更新されるときに桁の幅が違って左右に揺れる現象を防げます。反対に文章のなかに混じって入る数字は、わざわざ幅を合わせる必要がないので、まわりの文字と自然になじむプロポーショナルの数字のほうが見栄えします。このように同じ数字でも、どこに置かれるかによって適した書式は変わってきます。

よくある間違い

• 表や価格表にプロポーショナルの数字をそのまま使ってしまうケースです。桁が縦にずれて値を比べにくくなり、リストが雑然として見えます。縦に揃えたい数字には等幅（tabular）を指定しましょう。
• 反対に、文章のなかの数字にまで等幅を強制してしまうケースです。狭いほうが自然な 1 のような数字が無理やり広がって字間が空いてしまい、文章の流れが不自然に途切れて見えます。
• 数字を縦に揃えようとして、等幅の代わりに空白や複数のスペースを手で挟み込むケースです。フォントや画面サイズが変わると揃えがすぐに崩れてしまうので、こういう場面では手作業で合わせず、等幅の数字に任せるほうがずっと安定します。

実務のヒント

• 表や価格、ダッシュボードのように数字を縦に揃えたい場所には tabular-nums を、文章に混じる数字にはプロポーショナル（proportional）の数字を使いましょう。どちらも font-variant-numeric で指定します。
• 値がリアルタイムで変わるカウンターやタイマーには等幅の数字を使いましょう。桁の幅が一定でないと、数字が更新されるたびに左右にがたつきますが、等幅なら同じ位置にとどまり、ずっと落ち着いて見えます。秒を数えるタイマーではこの揺れがとくに目立ちます。
• 数字の書式を決める前に、使うフォントがその機能に対応しているかをまず確かめましょう。一部のフォントは等幅の数字をそもそも収めていないので、指定しても何も変わらないことがあります。そのときは、数字だけ等幅に対応した別のフォントに差し替える方法もあります。

関連概念