文字詰め(カーニング)をCSS1行で設定する

日本語フォントこそ指定したい自動カーニング

こちらを拝見して今まで知らなかったCSSプロパティに衝撃を受けたのでサンプルを作りました。

See the Pen font-feature-settings Test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

カーニング調整がされている方に指定しているCSSは下記のみ。

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

あまりにも簡単で効果は強烈。

文字校正的には間違いなく読みやすくなってるのですが、今までの文字間に慣れている人には逆に読みにくく感じられたり、レイアウトが崩れる場合もありえるので、問答無用で使っていいプロパティでないども思えます。

かく言う自分も句読点(、。)だけは等幅でスペースが開いた方が文章の区切りが分かりやすいな〜なんて思うくらいです。

しかしながら新規サイト立ち上げにはどんどん使っていきたいプロパティです。

追記:やっぱりあまり気軽に使えない

参考: 文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました

比較検証された記事を見る限り、新規構築でもあまり安易に使えないなという判断に変わりました。