字詰をいい感じでできるfont-feature-settings

今回は字詰を調整するfont-feature-settingsについてお話ししていきます。
デザイナーさんが字詰をしてデザインをしたりするのですが、デバイスフォントの時に()「」、。などの余計な余白があり段落が変わってしまってデザイン通りにいかないと困ってる方もいらっしゃるかと思います。

スポンサーリンク

字詰をする

日本語フォントの字詰にはCSSプロパティのfont-feature-settingsを使うことをお勧めします。
とりあえず下記をみてもらえればわかると思うのですが、普通にコーディングしていくと下記のようになります。

See the Pen GLBOzv by bonheurtime (@bonheurtime) on CodePen.

やっぱり空白があって結構スペース空いてしまいますよね。。
font-feature-settingsを使ってみます。

See the Pen VNBrop by bonheurtime (@bonheurtime) on CodePen.

こんな感じで、いい感じに詰めてくれるんですね。
“palt”で機能名を、1で有効にしてます。
0だと無効で、on offでも指定できます。
何も記載しないと、onということになります。

軽く説明

元々font-familyで指定する日本語フォントはOpenTypeフォントという種類のフォントのようで、正方形の中に文字が収まるように作られているようなのです。
正方形で全て日本語フォントが置かれるので、余ったスペース分余白ができるんですね。

そんなOpenTypeフォントですが、その中には「プロポーショナルメトリクス」というフォントの字間情報を制御する機能が備わってるようなのです。
初めは機能していないのですが、機能するようにしてあげれば、フォントに含まれる字間情報を参照するので、うまいこと自動で文字が詰まるという訳です。

他にも、tradは旧字体で表示したり、hwidは等幅半角字形にしたりと色々種類があるみたいです。

See the Pen xeJpQr by bonheurtime (@bonheurtime) on CodePen.

See the Pen LvBeoQ by bonheurtime (@bonheurtime) on CodePen.

詳しくはこちらのサイトで説明されているので、さらに知りたい方は参考にされると良いかと思います。
https://ics.media/entry/14087/
また、機能に関してはAdobeの下記サイトに詳しく載ってるので、興味がある方はみてみてくださいね!
https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html

以上いかがだったでしょうか?
ちょっとデバイスで詰めるのどうしたらいいんだ?と悩んで調べたら結構色々できることがわかって、私もびっくりしました。
これを機会にフォントを自由自在に操れるようになれたらと思ってます 笑

コメント

タイトルとURLをコピーしました