CSSのfont-feature-settingsで日本語フォントの自動カーニングをマスターしよう🚀:OpenTypeの秘密

こんにちは!デザイナー・イラストレーターの志摩🍥 です!

今日はホームページ制作において重要な要素の一つ、CSSのfont-feature-settings🛠️というプロパティについて紹介したいと思います。

このプロパティを使うと、文字詰めを自動で調整してくれる機能があります🚀。
見た目をデザイン的にすっきりさせ可読性を高めることが可能です📚。

紙面のグラフィックデザインなどは日本語フォントを扱う場合、このカーニングを多用します。

font-feature-settingsプロパティとは

これは、OpenTypeフォントでのみ有効なプロパティです。

OpenTypeフォントとはフォント形式の一種で、Web上でのフォント表示に必要な機能を豊富に備えているフォントです。
font-feature-settingsプロパティで設定できる値は多数ありますが、主に日本語で使用される値を以下に表形式で紹介します。

説明
paltプロポーショナル(文字ごとに幅を設定した)メトリクスを有効にする(自動文字詰め)漢字、かな、英数字
vkrn縦組みペアカーニング(隣り合う文字ごとに文字詰めが設定される)を有効にする縦書きの漢字、かな、英数字
vert縦書き用の字形を有効にする横書きの漢字、かな、英数字 → 縦書きの漢字、かな、英数字
hkna半角カナを有効にするカタカナ → カタカナ

この表は参考程度です。フォントによっては対応していない値や、別の値が必要な場合もあります。詳しくはフォントの仕様書やAdobe Fontsの公式サイトを確認してください。

https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html

それでは、最も一般的に使用されている「palt」を例に解説したいと思います!

プロポーショナルメトリクス(palt)

まず、CSSfont-feature-settingsプロパティに「palt」という値を指定します。

これは、プロポーショナルアルタナティブという意味で、文字の幅を均一にせずに、文字の形に合わせて調整するということです。

では、ホームページ制作で、このfont-feature-settingsプロパティはどうやって使うのでしょうか?🤔

例えば、こんな感じです👇。

p {
  font-feature-settings: 'palt' on;
}

これだけで、自動的に文字詰めが行われます🎉。

もちろん、フォントによって効果は異なりますが、一般的な日本語フォントではかなり見やすくなります。例えば、以下の画像を見てください👀。

上が通常のフォントで、下がfont-feature-settings: “palt”を適用したフォントです。

下の方がスペースが最適化されて、すっきり見えますよね👍。

このように、ホームページ制作において、CSSのfont-feature-settingsプロパティを使うと、日本語フォントにも自動カーニングを適用できます💡。

見た目が良くなるだけでなく、読みやすさも向上します。ぜひ日々のホームページ制作に実践してみてください!🙌

注意点

注意点としては、font-feature-settingsプロパティは、全てのブラウザや全てのフォントでサポートされているわけではありません。

特に、この’palt’機能は日本語フォントによく含まれていますが、英語フォントなど他の言語のフォントには含まれていない場合が多いです。

また、古いブラウザではfont-feature-settingsプロパティ自体がサポートされていない可能性がありますので注意が必要です。

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。