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

   2017年8月2日

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

CSSで指定する!

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

指定前と指定後の比較

游ゴシック

指定前はこんなかんじ

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

指定するとこんなかんじ

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

ヒラギノ角ゴ

指定前はこんなかんじ

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

指定するとこんなかんじ

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

游明朝

指定前はこんなかんじ

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

指定するとこんなかんじ

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


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

今回参考にさせていただいた記事はこちらです。

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい...
「Webでは文字詰めはできない」と諦めていませんか? 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つとされています。 そんな文字詰 …

2017/8/2追記:落とし穴

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

解決方法

font-feature-settings : “pkna”;

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

web tipsの記事