「文字のプロ」の隠し技。`font-feature-settings`でタイポグラフィに魔法をかける方法
Web制作を始めたばかりの頃、「なんかフォントが綺麗に見えるサイトと、そうじゃないサイトがあるな」と感じたことはありませんか？実はそれ、単にフォントの種類を選んでいるだけでなく、「文字の微調整」という職人芸が隠されているからかもしれません。
今日は、そんなプロの現場で密かに使われている魔法の杖、CSSの`font-feature-settings`についてお話しします。「難しそう…」と思う必要は全くありません。お買い物をするときに「自分好みにカスタマイズする」ような感覚で、一緒に文字を美しくしていきましょう！
—
そもそも「OpenType機能」って何？
みなさんが普段使っているフォント（OpenTypeフォント）には、実は隠れた「オプション機能」がたくさん詰まっています。
例えば、「合字（リガチャ）」。これは、「f」と「i」という文字が並んだときに、勝手に合体して一つの綺麗な形にしてくれる機能です。また、「カーニング」は、文字と文字の間の隙間を、見た目が美しくなるように自動で調整してくれる機能ですね。
これらは普通、ブラウザが気を利かせてやってくれることもありますが、時には「あえてこうしたい！」というこだわりが出ることもありますよね。そんな時に使うのが`font-feature-settings`というプロパティです。
—
具体的にどう使うの？（身近な例え話）
想像してみてください。あなたは高級なオーダーメイドのスーツ店に来ています。
- 「基本設定」：お店が用意した標準のサイズ。
- 「font-feature-settings」：店員さんに「もう少し袖を詰めて」「ボタンを少しだけ動かして」と細かく注文する「お直し」の指示書。
CSSで書くと、こんな感じになります。
/ 文字を「お直し」する魔法のコード /
.text-custom {
/
‘liga’ は合字（リガチャ）のON/OFFスイッチ。
‘1’ は「有効」、’0′ は「無効」を意味します。
/
font-feature-settings: “liga” 1;
}
—
実際に動かしてみましょう！
HTMLの``タグなどを使って、特定の単語だけを美しく装飾する例を見てみましょう。特に、数字の並びや英単語のつながりを調整したいときに便利です。
HTML
通常のテキスト: fifi
カスタマイズしたテキスト: fifi
CSS
/ 合字（fとiがくっつく）をあえてオフにする例 /
.normal {
font-feature-settings: “liga” 0; / 0にするとOFF /
}
/ 合字をオンにする（多くのフォントで標準ですが、明示的に指定可能） /
.fancy {
font-feature-settings: “liga” 1; / 1にするとON /
}
「あれ？何も変わらないよ？」という方もご安心ください。これは「そのフォントがその機能を持っているか」に依存します。お気に入りのフォントがどんな機能を持っているかを探すのは、宝探しみたいでワクワクしますよ！
—
初学者がつまずきやすいポイントと「大丈夫だよ」のフォロー
このプロパティを触る上で、いくつか覚えておいてほしいことがあります。
1. 「やりすぎ注意」の法則：
カーニングや合字をいじりすぎると、逆に読みにくくなることがあります。料理の隠し味と同じで、「言われてみれば綺麗かも？」くらいが一番美しいのです。
2. フォントの種類を選ぶ：
残念ながら、すべてのフォントがこれらの機能をフルサポートしているわけではありません。「Google Fonts」などでプロ仕様のフォントを使うと、この魔法がしっかり効いてくれますよ。
3. ブラウザの相性：
最近のブラウザは優秀なので心配いりませんが、古いブラウザだと動かないこともあります。「動かなかったら、それはそれで標準の美しさがある」と割り切る心の余裕も大切です。
—
最後に：デザインは「細部」に宿る
Webサイト制作は、大きなレイアウトを作るだけが仕事ではありません。こうして、たった数文字の隙間や、文字同士のつながりにこだわること。その「泥臭いこだわり」こそが、あなたのサイトを世界に一つだけの、魅力的な場所へと変えていきます。
今日から、ちょっとだけフォントの「裏側の設定」を覗いてみてください。`font-feature-settings`という小さな窓から、これまで見えなかったタイポグラフィの深い世界が広がっています。
「難しそう」と感じていたことも、一つずつ紐解けばただの便利な道具です。焦らず、楽しみながら、あなただけの文字の表現を追求してみてくださいね！応援しています。
コメント