web上でも文字詰めをしたい!CSSのfont-feature-settingsで自動カーニング

web上でも文字詰めをしたい!CSSのfont-feature-settingsで自動カーニング

今回は文字組み+CSSです!

日本語webフォントの普及で、今まで画像にしていた文字をテキストにすることが増えてきました。
でもブラウザのベタ打ちって、空き具合が気になりませんか…?
特に「・」や「、」あたりはやたら隙間が広く見えてしまいます。

こういう文字をコーディングで何とかしたいとき、今まではCSSのletter-spacingでひとつずつ文字間隔を調整していたと思います。

しかし、「font-feature-settings」を使うと1行で良い感じになります!

自動カーニングする記述


h1{
  font-feature-settings : "palt";
}

これだけです!
実際に指定してみた画像はこちら。

自動カーニングbeforeafter

「OpenType」+「プロポーショナルメトリクス情報が含まれる」フォントのみ適用されます。
例えば、よくWindows用に指定される「メイリオ」にはこの情報が含まれていないため、等幅のままとなります。

主要ブラウザの対応状況

気になる主要ブラウザの対応状況はこちら
http://caniuse.com/#feat=font-feature

自動カーニング対応状況
2017/03/17現在、ほぼ全てのブラウザに対応しています。

一部ブラウザ(主にSafari)で崩れが起きることもあるので、表示チェックをしましょう。
ちなみに、崩れる場合は値を「”pkna”」にすると解消されるかもしれません。
この指定だと詰める文字が「かな」だけになります。

まとめ

CSSに1行追加で、見栄えがぐっと良くなりました!
ただ、本文全てに適用するとぎゅっと詰まりすぎて読みづらいことも…。
頑張ればもっと調整できそうですが、とりあえず見出しにだけ使おうと思います。

この記事をシェアする