【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた

投稿日 2016年12月1日
更新日 2019年5月1日
著者 conti
カテゴリーコーディング

TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。
そのCSSは「font-feature-settings」というものです。

詳しい事は下記記事よりご確認ください。

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング

簡単にCSSでカーニング出来るんだーやったーとか思ってたのですが、また興味深いツイートがありました。

ベタ組みは読みにくいからなんでも自動詰め組みを指定しよう、というような書き方には違和感がある。このブログでは句読点の後ろが詰まってしまっているが、これで「読みやすい」と言えるのか。私は違うと思う。/ 文字詰めできるCSSの… https://t.co/ravQr0CPy8

— Fukazawa Kojiro (@witch_doktor) 2016年12月1日

どんなときにも自動詰め組みが良いかと言われるとそうではないよなー。
なので考えるよりも実際に比べたほうが早いかなと思って比較をするページを作成しました。
また自分なりに「font-feature-settings」の使い方で試したい事があったのでそれも並べてみました。

サンプルを作ってみた


.default-block {
    padding: 1em;
    background: #e8f5e9;
}
.sample-block {
    font-feature-settings: "palt";
    background: #eceff1;
    padding: 1em;
}
.custom-block {
    font-feature-settings: "palt";
    letter-spacing: .1em;
    background: #e3f2fd;
    padding: 1em;
}

font-feature-settings比較ページ

自分で作ったサンプルでは単純にfont-feature-settingsを入れるより、文字詰めしていないほうが読みやすいかなーという印象です。
ただ、「」の部分（サンプルだと「弱虫やーい。」のところ）とかが文字詰めされているので、この点は読みやすいかな思ってます。

なので「letter-spacing」を使うと文字間もいい感じに合わさりつつ、余白も詰まって読みやすいのかなと思ってサンプルに加えました。

いかがでしょう。