font-feature-settingsで文字詰めができる！Webのテキストを読みやすく。

Web担当のうたまるです。どーもです。

最近、CSSで文字詰めができることを知りました。今までは、Web上のテキストを文字詰めしたいなら、テキストを画像化するしかなかったので、「めんどくさいなー」と思っていました。

これが、CSSを1行追加するだけで自動的に文字詰めをしてくれるので便利です。特にタイトルに使うと、テキストが引き締まって見えるのでお勧めです。

文字詰めの設定方法

CSSで文字詰めをするプロパティはこの1行です。簡単ですね。

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

タイトルのような大きな文字に使うと違いがよくわかります。

文字詰めの設定なし

CSSのプロパティ「font-feature-settings」のサンプル。

文字詰めの設定あり

CSSのプロパティ「font-feature-settings」のサンプル。

全体的に文字間が詰まって引き締まった印象になります。特にプロパティの【ィ】と「」の前後が詰まっています。

font-feature-settingsが使えるフォント

便利なプロパティですが、すべてのフォントに利用できるわけではありません。使用できるフォントの条件は下記の2点です。

• OpenTypeフォント
• プロポーショナルメトリクスの情報を含んでいる

Windowsやmacに標準でインストールされている游ゴシック体・遊明朝体で使えます。また、Webフォントを契約されているのであれば、ヒラギノ角ゴシック・ヒラギノ明朝など、使えるフォントはたくさんあるかと思います。残念ながら、メイリオには使えないのでご注意ください。

※OpenTypeフォントとは、文字ごとの字詰め情報を持っているフォントのことです。また、プロポーショナルメトリクスとは、書体ごとに最適な詰め組を行うためのOpenTypeフォントの機能です。

font-feature-settingsの値

font-feature-settingsの値を変えて比較してみました。

.sample-normal{
     font-feature-settings: normal;
}
.sample-palt{
     font-feature-settings: "palt";
}
.sample-pkna{
     font-feature-settings: "pkna";
}

font-feature-settings: normal;

これはデフォルトサンプルテキストです。

CSSプロパティのfont-feature-settingsを使えば、自動的にカーニング（文字詰め）をしてくれます。他の設定と比べて文字の詰まり方はいかがでしょうか？「かぎかっこ」や句読点などの約物を見ると違いが分かりやすいです。半角のABCDEFG12345・全角のＡＢＣＤＥＦＧ１２３４５でも違いが出ます。

font-feature-settings: “palt”;

これは［palt］を指定したサンプルテキストです。

CSSプロパティのfont-feature-settingsを使えば、自動的にカーニング（文字詰め）をしてくれます。他の設定と比べて文字の詰まり方はいかがでしょうか？「かぎかっこ」や句読点などの約物を見ると違いが分かりやすいです。半角のABCDEFG12345・全角のＡＢＣＤＥＦＧ１２３４５でも違いが出ます。

font-feature-settings: “pkna”;

これは［pkan］を指定したサンプルテキストです。

CSSプロパティのfont-feature-settingsを使えば、自動的にカーニング（文字詰め）をしてくれます。他の設定と比べて文字の詰まり方はいかがでしょうか？「かぎかっこ」や句読点などの約物を見ると違いが分かりやすいです。半角のABCDEFG12345・全角のＡＢＣＤＥＦＧ１２３４５でも違いが出ます。

paltは句読点やかぎ括弧を含め、全体的に文字間が詰まりました。pknaも”palt”同様に全体的に文字間が詰まりましたが、句読点やかぎ括弧などの約物の間隔は開いています。

個人的な感想

個人的な感想としては、【palt】【pkna】のどちらを指定するか迷います。本文のテキストに【palt】を設定すると、文字が詰まり過ぎるように感じるので”pkna”の方が読みやすいでしょうか。

もしくは、font-feature-settings: “palt”;を指定してletter-spacingで文字間を広げる方法もありでしょうか。

↓こんな感じ

.sample-palt-space{
     font-feature-settings : "palt";
     letter-spacing:1px;
}

font-feature-settings: “palt”;とletter-spacing

これは［palt］とletter-spacingを指定したサンプルテキストです。

CSSプロパティのfont-feature-settingsを使えば、自動的にカーニング（文字詰め）をしてくれます。他の設定と比べて文字の詰まり方はいかがでしょうか？「かぎかっこ」や句読点などの約物を見ると違いが分かりやすいです。半角のABCDEFG12345・全角のＡＢＣＤＥＦＧ１２３４５でも違いが出ます。

文字間にゆとりが出て読みやすくなりました。本文にもfont-feature-settingsを使うか迷うところですが、便利な設定なので色々試しながら使っていきたいと思います。