タイポグラフィの深淵へ：`font-variant`で実現する「プロのこだわり」
現場でデザインカンプを実装していると、ふとデザイナーから「ここの数字だけ、少し上品にしたいんだよね」とオーダーされることはないでしょうか。あるいは、「見出しのスモールキャップスがなんか安っぽい」と頭を抱えた経験があるかもしれません。
多くのフロントエンドエンジニアが `font-size` や `font-weight` で格闘する中、一歩先行く「タイポグラフィの解像度」を上げる鍵が `font-variant` プロパティです。今回は、インライン要素を操り、UIの質感を一段階引き上げるための実践的な知見を共有します。
—
1. なぜ今、`font-variant` を知るべきなのか
`font-variant` は、OpenTypeフォントが持つ高度な機能をCSSから呼び出すための窓口です。単に文字を小さくしたり太くしたりするのではなく、フォントファイルが内包している「別バージョンのグリフ（字形）」を呼び出すという点が重要です。
ブラウザは `font-variant` が指定されると、フォントファイル内の `GSUB`（Glyph Substitution）テーブルを参照し、通常のグリフを特定のルールに基づいて差し替えます。この処理はレンダリングエンジン側で行われるため、JavaScriptで文字列を置換するようなコストをかけず、極めて軽量かつ正確にタイポグラフィを制御できるのです。
—
2. 実務で「使える」プロパティ精鋭たち
特にインライン要素（`span` や `time` など）で多用する、現場で即戦力となる指定をいくつか紹介します。
数字を美しく見せる `font-variant-numeric`
表組みの価格や、`time` 要素内の時刻を表示する際、デフォルトの数字（ライニング数字）が周囲のテキストと馴染まないことがあります。ここで役立つのが `oldstyle-nums` です。
/ 価格や時刻を文脈に馴染ませるためのスニペット /
.price-display {
/ 文字のベースラインから上下に数字が跳ねるオールドスタイル数字を適用 /
font-variant-numeric: oldstyle-nums;
/ 数字の幅を揃えたい場合は tabular-nums を併用 /
font-variant-numeric: oldstyle-nums tabular-nums;
}
スモールキャップスで知的なアクセントを
`font-variant: small-caps;` は有名ですが、単に小文字を大文字に変換するだけではありません。本来のデザインを保ったまま、小文字の高さに合わせた「大文字」に変換されます。見出しのサブタイトルや、クレジット表記で使うと一気に洗練されます。
—
3. 実践：インライン要素でのモダンな制御コード
それでは、現場で即座に使えるサンプルコードを見てみましょう。ここでは、`time` 要素と `span` 要素を組み合わせ、洗練されたインターフェースを構築する例を提示します。
公開日:
draft
.post-date {
/ 数字をオールドスタイルにし、等幅（tabular-nums）で揃える /
/ これにより、時刻表示がガタつくのを防ぎ、UIに安定感が生まれる /
font-variant-numeric: oldstyle-nums tabular-nums;
font-family: ‘Inter’, sans-serif; / OpenType対応フォントが必須 /
}
.status-badge {
/ 大文字をスモールキャップス化して、控えめな主張に /
font-variant-caps: small-caps;
font-weight: 600;
letter-spacing: 0.05em; / スモールキャップスには少し広めのトラッキングが映える /
}
—
4. 現場のシニアとしてのアドバイス：落とし穴を避ける
ここで、現場で必ずハマる「罠」についても触れておきます。
1. フォントの対応状況を確認せよ
`font-variant` は魔法ではありません。対象のフォントファイル自体がその機能をサポートしている必要があります。 Google Fontsなどを使う際は、OpenType機能が含まれているか、検証ツールで実際にグリフが切り替わっているか（あるいは文字化けしていないか）を必ず確認してください。
2. `font-variant` 一括指定は慎重に
`font-variant: small-caps;` のようなショートハンドは、実は `font-variant-ligatures: normal;` などの値をデフォルトに戻してしまうことがあります。特定の機能だけをONにしたい場合は、`font-variant-numeric` や `font-variant-ligatures` のような個別のプロパティを使うのが、バグを生まないための「プロの流儀」です。
—
最後に：タイポグラフィは「余白」と同じ
優れたUIは、機能的であると同時に「心地よい」ものです。`font-variant` を適切に使いこなすことは、単なる装飾ではなく、ユーザーが情報を読み取る際のストレスを物理的に減らす行為でもあります。
派手なアニメーションに頼らずとも、こうした細部のこだわりが、プロダクト全体の「格」を決めます。次の実装では、ぜひ `font-variant` で数字やアルファベットの表情を変えてみてください。きっと、デザイナーも驚くような精緻なアウトプットになるはずです。
現場からは以上です。また次の技術トピックでお会いしましょう。
コメント