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

  

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

CSSで指定する!

.kerning {
font-feature-settings : "palt";
}

指定前と指定後の比較

游ゴシック

指定前はこんなかんじ

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

指定するとこんなかんじ

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

ヒラギノ角ゴ

指定前はこんなかんじ

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

指定するとこんなかんじ

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

游明朝

指定前はこんなかんじ

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

指定するとこんなかんじ

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

ヒラギノ明朝

指定前はこんなかんじ

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

指定するとこんなかんじ

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

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

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

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

web tipsの記事