日本語の文字詰めに利用できるfont-feature-settings:"palt"でおしゃれに魅せる

日本語で文章を打ったり、デザインを作っているときに、文字幅を詰めたいなと思ったことはありませんか？
そんなときに使えるCSSがfont-feature-settingsです。

letter-spacingでも設定はできるのですが、letter-spacingよりも使いやすいと思いますので、場面に分けて使うのがおすすめです。

日本語をいい感じで文字詰めできるfont-feature-settings:"palt"

font-feature-settings: "palt"を設定することで、各文字に合わせた文字幅で調整されいい感じに文字詰めができます。
実際に見ていただいた方がわかりやすいので、まずは見てみてください。
▼ 例文

上の文章が通常の設定で表示される文章です。そして、下の文章がfont-feature-settings: "palt"を設定している文章になります。
見ていただけると分かる通り、下の文章の方が短くなっており、なんとなく収まりがいいように感じるのではないでしょうか。

このfont-feature-settings: "palt"による文字詰めはゃ、ぃ、ぅなどの小文字やカタカナ、ひらがなを多く使っていたり、長文であったりする場合に、違いが出てきます。
次の文も見てみましょう。
▼ 例文

上の文章では小文字、大文字に関わらず等間隔で文字幅が設定されているので、ォや ョの表示の際に、余白が目立ちます。
一方、下の文章であれば、各文字ごとに文字幅が調整されているので、文字幅が詰まって違う印象を与えてくれます。

font-feature-settings: "palt"が効かないフォントがあるのは注意

このように日本語をいい感じで文字詰めしてくれるfont-feature-settingsですが、フォントによっては適用できないものがあります。
例えば、メイリオやMSPゴシックなどが効かないフォントになります。

このfont-feature-settingsというCSSが効くフォントの条件として、OpenTypeフォントであり、かつ、プロポーショナルメトリクス情報を含んでいることという2点があります。
メイリオやMSPゴシックはこの2つの条件のどちらかを満たしておらず、このCSSが適用できないのです。

古いバージョンのブラウザを除いて多くのブラウザで対応

font-feature-settings: paltの良い点として、既に多くのブラウザで対応しており、どのブラウザでも利用できる安心感があります。

一部の古いバージョンのブラウザを使っているユーザーには、うまく表示がされないケースがあるようなので、そういったユーザーにも表示させてあげるように、-moz-や-webkit-ををつけてCSS設定をしてあげるのがよいでしょう。

その他設定できるfont-feature-settings

約物類を半角にする font-feature-settings: "halt"

句読点や疑問符、括弧などを総称して約物類と言いますが、これらのみを半角にして文字詰めするのが、font-feature-settings: "halt"です。

日本語フォントに影響ない形で文字幅を詰めたい場合には、使いやすい設定でしょう。

約物類以外を文字詰めしたい場合には、font-feature-settings: "pkna"

先ほどは、約物のみを文字詰めするfont-feature-settings: "halt"を説明しましたが、font-feature-settings: "pkna"を設定すると約物以外の文字詰めを行うことができます。

あまり利用することはないかもしれませんが、実際に使ってみると下記のようになりますので、参考にしてみてください。

上記のように微妙に変化がありますので、使用用途に応じて使い分けてみてください。
尚、font-feature-settings: palt を使うと約物、文字全てに文字詰めが適用されますので、手取り早く適用したい場合には、paltで設定するのがよいでしょう。

よくある質問