Webサイトに「品格」を。font-variantでタイポグラフィを自在に操ろう
こんにちは！Web制作の世界に飛び込んだ皆さん、毎日お疲れ様です。
HTMLタグを覚え、CSSで色を塗る楽しさを知ると、次に気になってくるのが「文字の美しさ」ですよね。「なんだかプロが作ったサイトと自分のサイト、文字の雰囲気が違うな…」と感じたことはありませんか？
実は、その差は「タイポグラフィのちょっとしたこだわり」にあるんです。
今日は、CSSの`font-variant`というプロパティを使って、Webサイトの文字にプロのような「品格」をプラスする方法を解説します。難しい技術ではありません。ちょっとした「魔法」をかけるような感覚で、一緒に見ていきましょう！
—
font-variantって、結局なにができるの？
一言でいうと、`font-variant`は「文字の形を微調整するスイッチ」です。
例えば、お買い物をするとき、高級なブランドのカタログを見たことはありますか？そこでは、大文字のAと、小さく整えられた大文字のAが混ざっていたり、数字が独特のバランスで並んでいたりしますよね。あのような「文字の表情」を、コードだけでコントロールできるのがこの機能です。
1. スモールキャップス（small-caps）
これは、小文字を「大文字の形をした、少し小さな文字」に変換する機能です。
「見出しなどで、英語を少し大人っぽく見せたい」という時に重宝します。
.brand-name {
/ これだけで、小文字が上品なスモールキャップスになります /
font-variant: small-caps;
}
2. オールドスタイル数字（oldstyle-nums）
これが一番の「知る人ぞ知る」テクニックです。
通常の数字はすべて同じ高さで揃っていますが、オールドスタイル数字は、文字によって上下に少し遊び（ディセンダー）が生まれます。文章の中に数字が混ざったとき、悪目立ちせず、紙の書籍のような落ち着いたリズムが生まれるんです。
.price-tag {
/ 数字が文章に馴染む、エレガントなスタイルに /
font-variant-numeric: oldstyle-nums;
}
—
実際にコードを書いてみよう！
では、よく使うインライン要素（``や``など）と組み合わせてみましょう。以下のコードをエディタにコピーして、ブラウザで眺めてみてください。
私たちは web design を愛しています。
価格は 1,250 円です。
—
つまずきやすいポイント：ここだけは気をつけて！
「コードを書いたのに、見た目が変わらない…！」と焦る必要はありません。これにはいくつか理由があるんです。
- フォントが対応していない場合がある
これが一番多い理由です。すべてのフォントが「オールドスタイル数字」を持っているわけではありません。Google FontsなどでWebフォントを読み込む際、そのフォントが「Opentype features」に対応しているか確認してみてくださいね。
- ブラウザのサポート状況
最近のモダンなブラウザ（Chrome, Edge, Safariなど）であればほぼ問題なく動作しますが、あまりに古いブラウザだと無視されることがあります。でも大丈夫、「表示されなくても文字が消えるわけではない」ので、あくまで「余力があったらやる装飾」というスタンスで気楽に導入しましょう。
—
最後に：デザインは「細部」に宿る
プロのデザイナーが作るサイトと、そうでないサイトの差。それは、大きなレイアウトよりも、こうした「文字の揃え方」や「数字の表情」といった、0.1ミリにも満たないこだわりの積み重ねで決まります。
最初は「`font-variant`？なんだか難しそう」と思ったかもしれません。でも、実際に使ってみると、自分のサイトが少しだけ高級な洋菓子店のような佇まいに変わるのが実感できるはずです。
まずは、身近な日付の数字や、小さな英語の単語から試してみてください。その小さな変化が、あなたのWeb制作をより楽しく、より深くしてくれるはずですよ。
それでは、また次回の記事でお会いしましょう！Happy Coding!
コメント