Web tan tan !

中小企業のぼっちWeb担のブログ

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・全角のABCDEFG12345でも違いが出ます。

font-feature-settings: “palt”;

これは[palt]を指定したサンプルテキストです。
CSSプロパティのfont-feature-settingsを使えば、自動的にカーニング(文字詰め)をしてくれます。他の設定と比べて文字の詰まり方はいかがでしょうか?「かぎかっこ」や句読点などの約物を見ると違いが分かりやすいです。半角のABCDEFG12345・全角のABCDEFG12345でも違いが出ます。

font-feature-settings: “pkna”;

これは[pkan]を指定したサンプルテキストです。
CSSプロパティのfont-feature-settingsを使えば、自動的にカーニング(文字詰め)をしてくれます。他の設定と比べて文字の詰まり方はいかがでしょうか?「かぎかっこ」や句読点などの約物を見ると違いが分かりやすいです。半角のABCDEFG12345・全角の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・全角のABCDEFG12345でも違いが出ます。

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

Related

パンくずリストの問題を検出。項目「itemListElement」がありません

パンくずリストの問題を検出。項目「itemListElement」がありません

Search Consoleから”パンくずリストの問題が新たに検出されました”というメールが送られてきました。「なんのこと?」と思いつつエラーの修正作業を行いました。

うっかり!?サーバーの更新期限が過ぎてしまったらどうすればいい?

サーバーの更新期限が過ぎてしまったらどうすればいい?その対処方法と、そんなトラブルを未然に防ぐためにできることをまとめました。

ネットで見つけた画像を無断で使うと著作権の侵害になるの?

上司から「この画像を使って欲しい」と渡された画像がネットで拾ってきた画像だったらどうすればいい?ネットで拾った画像を無断で使うとどうなる?

Google Chromeで画像を縮小表示すると画質が荒れる現象の対処方法

Google Chromeで画像を縮小表示すると画質が荒れる現象の対処方法

レスポンシブでサイトを作ったときに画像を縮小表示させると、画質が荒れるという現象が起こったので、その時の解決方法をご紹介します。