CSSのfont-variantプロパティでスモールキャップスを使う方法と注意点

CSSのfont-variantプロパティを使えば、テキストにスモールキャップス（小型大文字）を適用できます。この記事では基本的な使い方に加えて、「本物」と「疑似（フェイク）」のスモールキャップスの違いや、そもそもスモールキャップスを使うべきかどうかの判断基準まで解説します。

CSSのfont-variantプロパティは、テキストを通常の字形で表示するか、スモールキャップスの字形で表示するかを指定します。指定できる値は次の3つです。

• normal：通常のテキストケース（デフォルト）
• inherit：親要素の値を継承
• small-caps：スモールキャップスを表示

font-variantの基本的な使い方

.small-caps {
  font-variant: small-caps;
}

font-variantプロパティを使い始める前に、「何を・いつ・どのように正しく使うのか」をきちんと理解しておきましょう。実は、正しく理解しないまま使っている人が少なくありません。

まずは、通常のテキストとスモールキャップスの違いを確認しておきます。

• 通常のテキストケース（センテンスケース）：文の最初の単語の頭文字だけが大文字になる、ごく一般的な文章の書き方です。今読んでいるこの文のような形式です。
• スモールキャップス：小文字と同じx-height（小文字の高さ）に合わせて設計された、小ぶりの大文字のこと。小文字と自然になじむように作られています。

残念ながら、「本物」のスモールキャップスを備えたWebフォントは多くありません。

テキストにfont-variant: small-caps;を設定した場合、表示されるのは次のどちらかです。

• フォントデザイナーが丁寧に設計した本物のスモールキャップスが表示され、通常のテキストと美しく調和する 👌
• コンピューターが自動生成した疑似（フェイク）スモールキャップスが表示され、通常のテキストとなじまず、素人っぽい印象を与えてしまう 😒

本物のスモールキャップスの例

以下は、本物のスモールキャップスが通常のテキストと完璧になじんでいる例です。

この例が美しく見える理由は、使用しているフォントファミリー「Alegreya」が本物のスモールキャップスを提供しているからです。

疑似（フェイク）スモールキャップスの例

続いて、疑似スモールキャップスの例を見てみましょう。

このスモールキャップスが、通常のテキストと自然に馴染んでいないことに注目してください。

この例でも同じくAlegreyaを使用していますが、意図的に「Alegreya SC」というスモールキャップス専用フォントを無効化し、ブラウザーが自動生成した疑似スモールキャップスを表示させています。

見た目を決めるのはフォントの品質

font-variant: small-capsを指定したときの見た目を左右するのは、選んだ書体（フォントファミリー）が本物のスモールキャップスを提供しているかどうかです。

しかし残念ながら、本物のスモールキャップスを持つフォントは希少です。そのため、CSSスタイルシートでfont-variant: small-capsの使用を検討する前に、必ず次の手順を行いましょう。

1. 使用する書体が本物のスモールキャップスを備えているか調査する（対応している場合、書体デザイナーによって明記されているので、フォントの仕様を確認しましょう）。
2. 対応している場合は、それが正しく有効化されていることを確認する。

もし対応していなければ、このプロパティの使用は諦めたほうが無難です。

幸い、font-variantプロパティは、フォント内にOpenTypeのスモールキャップスが存在する場合、自動的にそれへアクセスしてくれます。ただし、他のフォントと同様に、そのスモールキャップス用フォントをプロジェクトに読み込んでおく必要があります。読み込んでいない場合、font-variantプロパティはコンピューター生成の粗悪な疑似スモールキャップスへフォールバックしてしまうため、注意が必要です。