Zenn
🕺

文字間を自動で詰めるCSS

2024/09/20に公開
CSS
tech

イラレやフォトショでデザインをするとき、文字間を調整して見栄えをよくする作業を「カーニング」と呼びます。
紙のデザインをするときには当たり前の作業ですが、Web でもカーニングができたらいいのにと思ったことはありませんか？
CSS に 1 行追加するだけで、文字間を整えられます。

p {
  font-feature-settings: "palt";
}

約物類を半角にする

約物とは、句読点や疑問符、かっこなどを指します。
これらのみ半角にして文字を詰めたいときはfont-feature-settings: "halt"を使います。

font-feature-settings が使える条件

font-feature-settingsはすべてのフォントに対して使えるわけではありません。
以下の条件を満たしているフォントに対してのみ有効になります。

  • OpenType フォントであること
  • プロポーショナルメトリクスである

具体的に使えるフォント名を挙げると、以下の通りです。

  • ヒラギノ角ゴシック
  • ヒラギノ明朝
  • 游ゴシック体
  • 游明朝体
  • Noto Sans JP 　など

OpenType フォントとは

OpenType フォントとは、機能の一部に柔軟な文字詰め機能が入っています。
ちなみにOpenTypeフォントのひとつ前の世代のフォントは TrueType フォントと呼ばれており、歴史があり広く普及しています。

プロポーショナルメトリクスとは

1 文字単位で文字詰め情報を持っており、自動で文字詰めができます。
フリーフォントにはプロポーショナルメトリクス情報が入っていないことが多いです。
それは文字のひとつひとつに対して文字詰めを設定するのが大変だからです。

自動文字詰めに頼って時短コーディング！

こちらのCSS、綺麗なサイトのソースコードを見ていて発見しました。
1行書くだけでテキスト量が多いサイトは特に見栄えがよくなるので、ぜひ使って見てください。

Discussion