この記事で学べること
- font-variant-numericプロパティの概念と目的
- lining-nums、oldstyle-nums、tabular-numsなどの各値
- 数字の幅制御（プロポーショナル・固定幅）
- 分数表示スタイルの設定
- 金融・会計データの表示最適化
font-variant-numericとは？
CSSのfont-variant-numericプロパティは、テキスト内の数字の表示スタイルを制御するために使われます。数字には複数の表示方法があり、例えばプロポーショナル（可変幅）数字やモノスペース（固定幅）数字、さらに歴史的な書体に見られるオールドスタイル数字など、異なるバリアントが存在します。このプロパティを使うことで、数字の見た目を細かくコントロールし、デザインに合わせたタイポグラフィが可能になります。
font-variant-numericの構文
font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> ] ;数字のスタイル指定
- normal: デフォルトのスタイル。特に変化を加えない。
- lining-nums: 数字を通常の「ライニング（lining）数字」で表示します。これは現代のフォントでよく見られる、上下のラインが揃った数字スタイルです。
- oldstyle-nums: 歴史的な「オールドスタイル（oldstyle）数字」で表示します。数字ごとに異なる高さや形を持ち、手書き風の印象を与えます。
数字の幅を制御
- proportional-nums: 数字をプロポーショナル（可変幅）で表示します。数字ごとに幅が異なり、自然な流れでテキストに組み込むことができます。
- tabular-nums: 数字をモノスペース（固定幅）で表示します。すべての数字が同じ幅になるため、表や数値データの整列に便利です。
分数のスタイル指定
- diagonal-fractions: 分数を斜線付きの対角線スタイルで表示します（例：1/2）。
- stacked-fractions: 分数を上下に積み重ねた形で表示します（例：½）。
使用例
プロポーショナル数字の使用
通常のテキストにおいて、数字を自然に配置するためには、プロポーショナル（可変幅）数字が適しています。たとえば、文章中にある数字が固定幅だと不自然な空間ができることがありますが、プロポーショナル数字ならスムーズな流れを保てます。
p {
font-variant-numeric: proportional-nums;
}この設定により、段落内の数字は幅が異なるプロポーショナル数字として表示され、他のテキストと調和します。
モノスペース数字で表を整列させる
表や数値のデータを扱う際には、モノスペース（固定幅）数字が役立ちます。これにより、数字が縦にきれいに揃い、読みやすくなります。
table {
font-variant-numeric: tabular-nums;
}この設定により、表内のすべての数字は固定幅で表示され、桁の位置が揃います。これにより、視覚的に整った表を作成できます。
オールドスタイル数字で歴史的な雰囲気を演出
歴史的なドキュメントやフォーマルなデザインでは、オールドスタイル数字が適しています。これにより、数字が手書き風で優雅な印象を与え、デザインに独特の風格を加えます。
h1 {
font-variant-numeric: oldstyle-nums;
}この設定を使うと、見出し内の数字がオールドスタイルで表示され、レトロな雰囲気や高級感のあるデザインが可能です。
分数を対角線スタイルで表示する
分数の表現を対角線スタイルで表示することで、標準的な分数表現が可能です。
span.fraction {
font-variant-numeric: diagonal-fractions;
}この設定により、分数がスラッシュで区切られた一般的な形式（例：1/2）で表示され、数式や数量を扱う場面で役立ちます。
分数を積み重ねて表示する
伝統的な分数表示では、分子と分母が上下に積み重なった形式が使用されます。これを表現するには、stacked-fractionsを使います。
span.fraction {
font-variant-numeric: stacked-fractions;
}この設定により、1/2などの分数が上下に重なって表示され、特定のフォントではクラシックな分数スタイルが実現できます。
実際の使用ケース
- 金融や会計のデータ表示: 金融レポートや会計データの表では、モノスペース数字を使うことで、数字が揃い、視覚的に分かりやすくなります。
- タイポグラフィ重視のデザイン: 歴史的なデザインや特定のフォーマルな文書には、オールドスタイル数字を用いることで、雰囲気を演出できます。
- 分数を扱うドキュメント: 数学やレシピなど、分数を頻繁に扱う場面では、分数の表示スタイルを指定することで、より読みやすく、正確に情報を伝えることができます。
ブラウザ対応
font-variant-numericプロパティは、モダンなブラウザで広くサポートされていますが、特定のフォントでのみ効果が発揮されます。選択したフォントが対応していない場合、数字のバリアントが正しく表示されないことがあるため、デザインに使用するフォントがこれらのバリアントをサポートしているか確認することが重要です。
まとめ
CSSのfont-variant-numericプロパティを使うことで、数字のスタイルを詳細に制御でき、テキスト内の数値表現をデザインに合わせて最適化できます。プロポーショナル数字やモノスペース数字、オールドスタイル数字、分数の表現方法など、様々なバリエーションを指定することで、見やすく美しいタイポグラフィを実現できます。特に数字が重要な役割を果たす場面で、このプロパティを活用することにより、よりプロフェッショナルなデザインを作成できます
ポイントの振り返り
| 値 | 説明 | 使用例 |
|---|---|---|
normal | 標準表示 | デフォルト |
lining-nums | ライニング数字 | モダンな表示 |
oldstyle-nums | オールドスタイル数字 | クラシックな表示 |
tabular-nums | 固定幅数字 | 表・データ |
diagonal-fractions | 斜線分数 | 1/2形式 |
関連プロパティ
| プロパティ | 説明 |
|---|---|
font-variant | フォントバリアントの一括指定 |
font-feature-settings | OpenType機能の詳細制御 |
letter-spacing | 文字間隔の調整 |
