Documentation CSS

この記事で学べること

  • font-variantプロパティの概念と目的
  • small-caps、oldstyle-nums、slashed-zeroなどの各値
  • フォントバリアントの拡張プロパティ
  • タイポグラフィの細部調整方法
  • 実用的なスタイリングテクニック

概要

CSSのfont-variantプロパティは、テキストの表示スタイルをカスタマイズするために使用されるプロパティです。このプロパティを使用することで、小文字を大文字風に変換したり、異なる数字のスタイルを指定したりできます。特に、タイポグラフィの細部を調整する際に役立ちます。本記事では、font-variantプロパティの使い方や指定できるスタイル、実際の活用例について詳しく解説します。

font-variantプロパティの基本

font-variantプロパティは、テキストの表示スタイルを調整するためのCSSプロパティです。このプロパティを使用することで、小文字を大文字風に表示するsmall-capsや、数字のスタイルを変更するoldstyle-numsなど、細かな表示の違いをコントロールできます。

基本構文

selector {
font-variant: 値;
}

例えば、次のように指定すると、p要素のテキストはすべて小型の大文字で表示されます。

p {
font-variant: small-caps;
}

指定できる値

font-variantプロパティには、いくつかのスタイルが指定できます。以下に主要な値とその用途を説明します。

  • normal 標準のフォントスタイルです。特別な変形は行われません。
div {
font-variant: normal;
}
  • small-caps 通常の小文字を小型の大文字に変換します。このスタイルは見出しや強調テキストに適しています。
h1 {
font-variant: small-caps;
}
  • all-small-caps（CSS Fonts Level 3） すべての文字を小型の大文字として表示します。small-capsの拡張版で、通常の大文字も小型の大文字になります。
h2 {
font-variant: all-small-caps;
}
  • oldstyle-nums（CSS Fonts Level 3） 旧字体の数字を使用します。数字が通常よりも縦方向にアンバランスなスタイルになり、特定のデザインに個性を与えます。
span {
font-variant-numeric: oldstyle-nums;
}
  • lining-nums（CSS Fonts Level 3） 数字を通常のラインの高さに揃えるモダンなスタイルです。金融やビジネス関連のテキストで使用されます。
p {
font-variant-numeric: lining-nums;
}
  • slashed-zero（CSS Fonts Level 3） 数字の0に斜線を追加して、アルファベットのOと区別しやすくします。技術文書やプログラミングのコード表示で役立ちます。
code {
font-variant-numeric: slashed-zero;
}

font-variantの拡張プロパティ

font-variantは細かくカスタマイズできる拡張プロパティも存在します。特定のスタイルを細かく制御したい場合に使用します。

  • font-variant-caps: 大文字と小文字のスタイルを設定します（例
    small-caps, all-small-caps）。
  • font-variant-numeric: 数字のスタイルを調整します（例
    oldstyle-nums, lining-nums, slashed-zero）。
  • font-variant-east-asian: 東アジアの文字スタイルを調整します（例
    jis78, simplified）。
p {
font-variant-caps: small-caps;
font-variant-numeric: oldstyle-nums;
}

実用的な使い方

見出しのスタイルを強調する

small-capsを使うことで、見出しやタイトルにクラシックで洗練された印象を与えることができます。

h1 {
font-variant: small-caps;
font-weight: bold;
}

数字の表示スタイルをカスタマイズする

金融や技術関連のドキュメントでは、数字のスタイルにこだわることで読みやすさが向上します。oldstyle-numsを使用することで、通常の数字よりも柔らかい印象を与えることができます。

.article {
font-variant-numeric: oldstyle-nums;
}

プログラミングコードの可読性を向上させる

slashed-zeroを使用することで、コード内で0とOの区別が明確になり、誤解を防ぐことができます。

pre {
font-variant-numeric: slashed-zero;
}

まとめ

CSSのfont-variantプロパティは、フォントの表示スタイルを調整し、テキストに個性を与える強力なツールです。小文字を小型の大文字に変換するsmall-capsや、数字のスタイルを変更するoldstyle-numsなど、様々な表現方法でタイポグラフィの可能性を広げます。適切なフォントバリアントを選ぶことで、文章の見た目を調整し、読みやすさやデザイン性を向上させることが可能です。

ポイントの振り返り

値説明使用例
normal標準スタイルデフォルト
small-caps小型大文字見出し強調
all-small-caps全て小型大文字統一表現
oldstyle-nums旧字体数字柔らかい印象
slashed-zero斜線付きゼロコード表示

関連プロパティ

プロパティ説明
font-variant-caps大文字スタイルの制御
font-variant-numeric数字スタイルの制御
font-variant-ligatures合字の制御

参考文献

円