こんにちは、ナカムラです。
今回はwebフォントの文字詰めについてです。
デザイナーから基本的に文字詰めはしたいという要望もあったので一度整理しておこうかと思います。
普段Googleフォントから提供されているNoto Sans JPを使用することが多いので文字詰めをするCSSプロパティ「font-feature-settings: "palt";」をよく使います。
このプロパティは使用できるフォントが限られているので、別のフォントを使いたい、となった場合の対応方法も整理していきたいと思います。
font-feature-settingsが使えるもの、使えないもの
font-feature-settingsはOpenTypeフォントの「プロポーショナルメトリクス」というオプション設定をオン／オフするプロパティになるため、そもそも使いたい書体が対応していなければ何も変化しません。
詳しくは下記の記事がわかりやすく説明してくださっています。 ics.media
Googleフォントの中で対応しているもの一覧を作ろうかと思ったのですが、Noto Sans JPくらいしか効かなかったので、丸文字などはどうするの！？というところで約物専用のフォント「Yaku Han JP」の話になります。
約物専用のフォント「Yaku Han JP」
約物とは、句読点や括弧類など文字・数字以外の記号の総称になります。
余白を詰めたくなる記号達です。
Yaku Han JPはこの約物を半角にしたフォントになります。
このフォントを優先的に当てることによって、約物の余分な余白を詰めることが可能になります。
使い方は下記のサイトをご覧ください。
DEMO
上の白背景の本文がNoto Sans JP、下のグレー背景の本文がM PLUS Rounded 1cを使用しています。
【通常】書体だけ当てたものになります。
【文字詰めのプロパティを当てたもの】font-feature-settings: "palt";を当てたものになります。
【Yaku Han JPを追加したもの（文字詰めはなし）】通常のものにYaku Han JPを追加したものになります。
See the Pen Untitled by Nakamura (@takayo-nakamura) on CodePen.
Noto Sans JPの場合は文字詰めが効いていますね。
Yaku Han JPを追加したものと比較すると、カタカナの部分なども文字が詰まっていることがわかると思います。
これはこれで詰まりすぎて読みづらいため、実際に使うときにはletter-spacingで字間の調整もします。
M PLUS Rounded 1cの場合は文字詰めが効きません。
丸文字なので横に広くなってしまいますね。
約物だけでも半角にできると間延びした感じが抑えられるかと思います。
終わりに
文字詰めに関するCSSプロパティは出てきそうですが、
まだ使えるまでには至っていないようなので今後も注目していきたいと思います。
