CSSで文字詰めができる！font-feature-settingsを活用しよう

例えばデザインを作成するとき、文字の間隔を調整することは当たり前だし
重要なポイントです。
Webではできないのかな…と思っていたら、自動カーニング、あるんですね。
すごく便利なのでご紹介いたします！

CSSで指定する！

.kerning {
  font-feature-settings : "palt";
}
//もしくは
.kerning {
  font-feature-settings : "pkna";
}

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

いかがですか？
読みやすくもなるし全体的にスマートになった印象を受けます。

今回参考にさせていただいた記事はこちらです。
https://ics.media/entry/14087

font-feature-settings : “palt”;　がすごく便利でよく使ってましたが
最近縦書きをする機会がありました。
いつもどおり指定はカーニング設定をしたところ縦書きがきれいに表示されず…

font-feature-settings : “pkna”;

設定はpknaで指定するのが無難だそうです。
safariでもなにやらバグがあるとか。
これからはpknaで設定しようと思います。