文字詰めしてくれるCSSプロパティ「font-feature-settings」が使える！

おはようございます！社員Aです👩

PhotoshopやIllustratorでは、簡単に文字詰めできますが、コーディング時には文字詰めしづらいイメージがあります。

美しいタイポグラフィに文字詰めは欠かせないので、デザイン時に文字詰めする機会も多いですが、コーディング時にどう組めば良いのか悩む場合もあります。「letter-spacing」プロパティだと不自然になってしまいますよね。

今回ご紹介するCSSプロパティ「font-feature-settings」を使うと、ブラウザ上でも簡単に自動カーニングすることができます！

文字詰めしてくれるCSSプロパティ「font-feature-settings」

左側が文字詰めありの状態、右側が文字詰めなしの状態です。

左側のみCSSプロパティ「font-feature-settings」を適用しています。

.box{
	font-feature-settings: "palt";
	text-align: justify;
	text-justify: inter-ideograph;
}

「font-feature-settings」には「palt（全角英数字以外は、記号なども含めて文字詰め）」を適用していますが、これだけでは詰まりすぎて見える可能性があるので、私は「text-align: justify;」と「text-justify: inter-ideograph;」も同時に指定し、左右までしっかり文字が揃えられるように設定しています。

たったこれだけで見違えるようにきれいに見えますし、可読性も上がります。

font-feature-settingsの指定について

font-feature-settingsには、それぞれ下記を指定すると文字詰めすることができます。

「font-feature-settings」の対応ブラウザ

Can I Useによると、対応ブラウザは上記の通りです。（※2019年2月2日時点）

IEでも基本的に10以降対応しているようです。

caniuse.com

 

1711 Users

12941 Pockets

Can I use... Support tables for HTML5, CSS3, etc

https://caniuse.com/#search=font-feature-settings

ただし、メイリオには非対応

上記で記述した通り、IEでも10以降は対応している「font-feature-settings」ですが、メイリオには非対応のようです。

「font-feature-settings」を指定しても、カーニングされた様子がありません。

Windowsでよく使われるメイリオですが、メイリオはもともと等幅フォントのため、カーニングに対応していません。

このプロパティが使用できる条件は下記です。どちらも満たしている必要があります。

1. OpenTypeフォント
2. プロポーショナルメトリクス情報が含まれているフォント

無難な「游ゴシック」や「ヒラギノゴシック」「Notosans（WEBフォント）」などを使うと、問題ないかと思います。

「font-feature-settings」を指定したにもかかわらず、カーニングが適用されない場合は使用しているフォントを確認してみましょう。

まとめ

CSSプロパティ「font-feature-settings」を使うと、ブラウザ上でも簡単に自動カーニングできることがわかりました。

デザイン上で文字詰めされている場合でも、WEB上で簡単に表現することができるので覚えておきたいプロパティですね。

対応ブラウザについては、随時変わっていくと思うので「Can I Use」などで定期的にチェックしていきたいと思います。