font-variantとは？初心者にも分かる意味と使い方を徹底解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

font-variantとは？基本をやさしく解説

font-variantは CSS のプロパティの一つで、ウェブ上の文字の見た目を細かく調整するための機能です。文字の形を変える小さな工夫として、文字の大きさよりも「形」の部分を変えるときに使います。代表的な変化としては、文字を大文字風に見せる small-caps や、数字の見た目を揃えるための numerics などがあります。設計者はデザインの統一感を出すために font-variant を使いますが、適切に使わないと読みづらくなることもあります。まずは基本を理解し、実際の文章でどう変わるかを体感することが大切です。

font-variant は実は複数の長い名前の組み合わせで動くものです。具体的には font-variant-caps や font-variant-numeric などを組み合わせて使い、全体を一つの font-variant: … という書き方でまとめることがあります。小さなデザインの工夫なので、初心者の人は最初は font-variant-caps だけを試してみると良いでしょう。慣れてきたら numeric の設定や ligatures の設定も試してみてください。

使い方の基本

実際の使い方はとてもシンプルです。まずは CSS ファイルに以下のような記述を追加します。font-variant-caps: small-caps; これだけで、段落中の文字のうち一部が小文字風に表示されます。なお small-caps はフォントが小文字を小文字風に描画できる場合にのみ有効です。フォント自体が対応していない場合は元の形のまま表示されます。別の例として font-variant-numeric: oldstyle-nums tabular-nums; のように書くと、数字の形を切替えや整列の仕方を揃えることができます。

ここで覚えておきたいのは、font-variant はフォントとブラウザの組み合わせに左右されるという点です。小さなフォントやグリフの形状が異なるフォントを使うと、期待していた見た目と多少違うことがあります。そのため、実際のサイトで使うときは、使用するフォントファミリと組み合わせて確認することが大切です。

主な値と長所・短所を整理

font-variant はいくつかの長形式のプロパティに分かれており、それぞれの値で見た目を調整します。よく使われるものを一部紹介します。

名前	説明
font-variant-caps: small-caps	小文字を大文字風に表示します。見出しや強調したい文章で使われることが多いです。
font-variant-numeric: lining-nums	数字の縦のラインをそろえます。本文内の数字をきれいに揃えたいときに便利です。
font-variant-numeric: oldstyle-nums	古風な数字表現に切替えます。雰囲気づくりに役立ちます。

このように、font-variant は文字の雰囲気を変える強力なツールですが、使い方を誤ると読みづらくなる可能性があります。実際のデザインでは、1つか2つの値に絞って使い、読みやすさと美しさのバランスを取ることをおすすめします。

互換性と注意点

現代の主要なブラウザは font-variant の扱いに対応しています。特に small-caps や numerics は多くのフォントでうまく表示されます。ただし、フォントファミリがその機能をサポートしていない場合は、ブラウザがデフォルトの表示に戻します。したがって、デザインを決定する際にはフォント選択と font-variant の組み合わせを事前にテストしてください。特にサイトの本文と見出しで使い分けると、読みやすさを保ちつつ印象を整えることができます。

実践のコツとまとめ

font-variant は小さな効果でウェブデザインをアップデートできる便利な機能です。まずは font-variant-caps の small-caps から試し、次に numeric の設定を少しだけ加えると良いでしょう。長所としては、本文の読みやすさを保ちながらデザイン性を高められる点、短所としてはフォント依存で思った通りに表示されない場合がある点です。実務で使うときは、必ず複数のフォントでの表示を確認し、必要に応じてフォールバックを用意してください。

font-variantの同意語

フォントバリアント: CSSの font-variant プロパティを指す総称。フォントの表示形式を切り替える機能全般を意味します。
字体バリアント: 字体（フォント）の異形・別の字形を指す表現。font-variant の概念を指す言い換えです。
書体バリアント: 書体（フォント）の表示形式・異なる字形のこと。小文字風表示などの表示変化を含みます。
字形のバリエーション: 文字の字形の複数の形を指す表現。font-variant が扱う代替字形や異体字の総称です。
字形の変種: 異体字・代替字形など、字形が別の形に変わることを表す語です。
異体字の指定: font-variant で使われる異体字（別の字形）を指定することを指します。
代替字形: フォント内の別の字形を選択・表示すること。font-variant の中心的な概念です。
小文字風表示: 頭文字を小さく表示する小文字風の字形を指します。font-variant の代表的な機能の一つです。
小型大文字表示: 小型の大文字風の表示、いわゆる small caps の表示形式を指します。
フォントバリエーション: フォントの異なる字形・スタイルの集合。font-variant が扱うバリエーションの総称です。
書体のオルタネート: 書体の代替字形を指す表現。異体字やスタイルの代替を含みます。
スタイリスティックセット: font-variant-alternates の機能の一つで、特定のスタイルセットを適用することを意味します。
スタイルセット: font-variant-alternates の中で用いられる、複数のスタイリスティック（装飾字形）の集合を指します。

font-variantの対義語・反対語

normal: フォントの変体を適用せず、標準の字形表示。特別な変形を行わず、通常の大文字小文字の表示になります。
small-caps: 小文字を大文字風に表示する字形変換を適用する状態。通常は頭文字に使われることが多く、文字全体が大文字風に見えることがあります。

font-variantの共起語

font-variant: フォント機能をまとめて設定するショートハンド属性。複数の font-variant-* サブプロパティを一括で指定します。
font-variant-ligatures: 合字（ライゲーション）を有効・無効にする設定をまとめるサブプロパティ。
common-ligatures: 一般的に使われる連字を有効にする設定。
discretionary-ligatures: 任意の連字を有効にする設定。
historical-ligatures: 歴史的な連字を有効にする設定。
no-common-ligatures: 一般的な連字を無効にする設定。
no-discretionary-ligatures: 任意の連字を無効にする設定。
no-historical-ligatures: 歴史的連字を無効にする設定。
font-variant-numeric: 数字の表示形式を変える機能群をまとめる設定。
lining-nums: 均等な高さの数字（リニング・ナムズ）を表示。
oldstyle-nums: 旧式数字（Old Style Numbers）を表示。
proportional-nums: 数字の幅を可変にして美しいレイアウトを作る。
tabular-nums: 列揃え向けの等幅数字を表示。
diagonal-fractions: 対角線付きの分数表記を有効にする設定。
stacked-fractions: 縦に積み上げた分数表記を有効にする設定。
ordinal: 序数表記（1st, 2nd など）を適用する設定。
slashed-zero: ゼロに斜線を入れて識別性を高める表示。
font-variant-position: 下付き文字（sub）・上付き文字（superscript）の表示位置を変更する設定。
sub: 下付き文字を適用する設定。
super: 上付き文字を適用する設定。
font-variant-caps: キャップ体裁のバリエーションを指定する設定。
normal: デフォルトのキャップ・大文字の扱い。
small-caps: 小文字を大文字風に表示する小型大文字（small-caps）表示。
all-small-caps: 文中の全ての文字を small-caps で表示。
petite-caps: やや小さめのキャップ表示。
all-petite-caps: 全て petite-caps で表示。
unified: 大文字と小文字の表示を統一する設定。
titling-caps: タイトル用途の大文字表示を促進する設定。
font-variant-east-asian: 東アジア文字の形状を切替えるための追加設定。
jis78: JIS78 規格に準拠した東アジア文字の異体字設定。
jis83: JIS83 規格に準拠した東アジア文字の異体字設定。
jis90: JIS90 規格に準拠した東アジア文字の異体字設定。
jis04: JIS04 規格に準拠した東アジア文字の異体字設定。
simplified: 簡体字の表示設定。
traditional: 繁體字の表示設定。
full-width: 全角幅で文字を表示する設定。
ruby: ルビ（ふりがな）表示をサポートする設定。
OpenType: OpenType フォント機能を活用する考え方・機能群。
font-feature-settings: OpenType の機能を細かく指定する属性。
font-variant-alternates: 異体字・代替表示の指定をまとめた設定。
font-variation-settings: 可変フォントの個別設定を行う属性。
typography: タイポグラフィの総称。字体設計と組版の分野。
CSS: ウェブページのスタイルを記述するスタイルシート言語。

font-variantの関連用語

font-variant: CSSの font-variant は OpenType 機能をまとめて有効化/無効化するショートハンド。通常は normal がデフォルトです。
font-variant-ligatures: 連体字機能をコントロールする。代表的な値には common-ligatures、no-common-ligatures、discretionary-ligatures、historical-ligatures などがあります。
font-variant-caps: 大文字の表示スタイルを切り替える機能。値の例として normal、small-caps、all-small-caps、petite-caps などがあり、フォントとブラウザのサポート状況で異なります。
font-variant-numeric: 数字の表現スタイルを切り替える機能。例として lining-nums、oldstyle-nums、proportional-nums、tabular-nums、diagonal-nums、stacked-nums、ordinal、slashed-zero などがあります。
font-variant-east-asian: 東アジア文字の字形・幅の変化を制御する機能。背景として ideographic-forms や全角/半角の扱いなど、フォントと環境により値が異なります。
font-variant-alternates: 字形の代替（alternate forms）を指定する機能。 stylistic alternatives の利用などを可能にします。
font-variant-position: 文字の上下位置（例：上付き・下付きなど）を制御する機能。
font-feature-settings: OpenType の機能を直接タグで指定する総合設定。liga、smcp などの機能を任意に組み合わせて細かく制御できます。
OpenType機能: OpenType フォントが提供する機能群の総称。連体字・小型大文字・数字の表現など、文字の表示を変える追加機能の集合です。
ligatures: 連結字の総称。複数の文字が結合して1つの形になるフォント機能のこと。
small-caps: 小型の大文字（小文字を大文字風に表示する）機能。文体を整える際に使われます。
lining-nums: 行に揃えやすいよう高さを統一した数字表示。均一な見栄えを作る時に便利です。
oldstyle-nums: 本文中で用いられる旧字体の数字。高さが揃わず、本文との調和を取りやすくします。
tabular-nums: 表組みで数字を揃えるための等幅表示。列揃えを美しく保つのに役立ちます。
proportional-nums: 数字の幅を文字ごとに自動調整する表示形式。自然な文章の流れを損なわずに数字を表現します。
ordinal: 序数を表す数字のスタイル。例えば 1st, 2nd のような序数表現に対応します。
slashed-zero: ゼロに斜線を入れて識別を容易にする表示形式。0 と O の識別を助けます。