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

         

CSS

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

2019年02月07日 8:00 

文字詰めしてくれる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には、それぞれ下記を指定すると文字詰めすることができます。

normal 初期値
palt 全角英数字以外は、記号なども含めて文字詰め
pkna ひらがなとカタカナのみが文字詰め
pwid 句読点以外は文字詰め。全角英数字は半角に変換

 



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

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

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

 

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

上記で記述した通り、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」などで定期的にチェックしていきたいと思います。

 

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺