ウェブデザインにおいて、文字詰め（カーニング）は重要な要素です。適切な文字間の調整は、テキストの視認性を向上させ、全体のデザインを引き締めます。今回は、CSSのfont-feature-settingsプロパティを使って、簡単に文字詰めを行う方法を紹介します。
font-feature-settingsプロパティの概要
font-feature-settingsプロパティは、OpenTypeフォントの高度なタイポグラフィ機能を制御するために使われます。このプロパティを利用することで、フォントに内蔵されたカーニング情報を有効にし、より洗練された文字間隔を実現することができます。
カーニングを有効にする基本例
以下は、font-feature-settingsプロパティを使ってカーニングを有効にする基本的な例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.kerned-text {
font-family: 'YourFontFamily', sans-serif;
font-feature-settings: "kern" 1;
}
</style>
<title>文字詰めの例</title>
</head>
<body>
<p class="kerned-text">これは文字詰めが有効なテキストです。</p>
</body>
</html>- font-family: 使用するフォントを指定します。カーニング機能がサポートされているフォントを使用してください。
- font-feature-settings: “kern” 1;: “kern”機能を有効にします。1はこの機能をオンにすることを意味します。
この設定を行うことで、フォントに内蔵されたカーニング情報を元に文字の間隔が自動的に調整されます。これにより、よりプロフェッショナルな見た目のテキストが表示されます。
その他のOpenType機能
font-feature-settingsプロパティを使うと、カーニング以外にも様々なOpenType機能を制御することができます。例えば、リガチャ（合字）を有効にするには以下のように設定します。
font-feature-settings: "liga" 1;まとめ
font-feature-settingsプロパティを利用することで、テキストの見た目をより洗練されたものにすることができます。特にカーニングを有効にすることで、文字間のバランスが取れ、読みやすく美しいテキストが実現します。是非、あなたのプロジェクトでも試してみてください。
