font-feature-settingsで文字詰めができる【CSS】

font-feature-settingsはOpenTypeフォントの機能を有効もしくは無効にすることができるプロパティです。

OpenTypeフォントというのはフォントのフォーマットのひとつ。

normalという値をfont-feature-settingsプロパティで指定すると、OpenTypeフォントの機能を利用しないことになりますが、featureタグと呼ばれるOpenTypeフォントの機能を指定することで、いろんな表現が可能になります。

文字詰めが簡単にできる

一般的にletter-spacingプロパティを使って、文字間を調整したりすると思うんですが、font-feature-settingsプロパティを使うことで文字詰めが簡単にできます。

font-feature-settingsプロパティで文字詰めした場合と、文字詰めしていない場合を比べてみたいと思います。

以下の文章は、適当に探してきたヘレン・ケラーの言葉です。この言葉を選んだ理由は特にありません。

「安全とは思いこみにすぎない場合が多いのです。
現実には安全というものは存在せず、子供たちも、誰一人として安全とは言えません。
危険を避けるのも、危険に身をさらすのと同じくらい危険なのです。
人生は危険に満ちた冒険か、もしくは無か、そのどちらかを選ぶ以外にはありません。」
-ヘレン・ケラー-

何も指定していない状態なので、まぁ普通です。このままでも十分読みやすいですが、個人的には書き出しのカッコ「の左側に余白ができてしまうのが少し気になります。

先ほどと同じ文章を、今度はfont-feature-settingsプロパティで文字詰めしました。

それが以下の文章。

「安全とは思いこみにすぎない場合が多いのです。
現実には安全というものは存在せず、子供たちも、誰一人として安全とは言えません。
危険を避けるのも、危険に身をさらすのと同じくらい危険なのです。
人生は危険に満ちた冒険か、もしくは無か、そのどちらかを選ぶ以外にはありません。」
-ヘレン・ケラー-

全体的に文字詰めされて、横幅が縮んだのがわかると思います。（もしかしたブラウザによって挙動が違うかも）

ちょっと窮屈そうな文字間になってしまって、かえって読みづらくないかなって思ったりするんですけど、書き出しのカッコ「の左側にあった余白がなくなり、字面が揃ったのはいい感じです。

あとは句読点の後ろの間も詰まりました。

{font-feature-settings: “featureタグ”}

font-feature-settingsプロパティでは、OpenTypeフォントの機能を示すfeatureタグを引用符（””）で囲んで指定します。

指定できる値はかなり多いのでここでは紹介しませんが、さっきの例では、”palt”という値を指定していました。

featureタグはカンマ（,）で区切って、複数指定することも可能です。

ただし、利用できるfeatureタグはフォントによって異なります。

font-feature-settingsプロパティは便利だと思いますが、文字間が詰まりすぎるとやっぱり個人的にはちょっと読みにくいので、font-feature-settingsプロパティとletter-spacingプロパティの両方をうまく使いながら調整するのがいいんじゃないかと思います。