【備忘録】HTMLで文字詰めしたい！

デザイン的に文字詰めできたらいいよねっと言われたので。メモしとく。

font-feature-settings: "palt";
font-variant-east-asian: proportional-width;

基本的に日本語フォントは和等分になっていて、等幅表示になるらしい。
ちなみに使うときは、display: inline-block; や letter-spacing: 0; と一緒にしてしておくと、ブラウザや環境によって文字詰めがきれいに反映されないことがあるみたい。

OpenTypeフォントっていうのだと「プロポーショナルメトリクス」という機能があり、フォントデザイナーが決めた丁度いいサイズになるみたい。

font-feature-settingsは、プロポーショナルメトリクスを使って、数字・記号・小文字といった文字をちょうどいいサイズにいい感じに文字詰めしてくれるらしい。ただし、できるのはOpenTypeフォントだけなので注意が必要。

詳しくは下記のサイトを見るべし
参考サイト：文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング

ありがたや～