MENU
CLOSE
システム Edit : 2018.12.22 Update : 2024.11.07
OpenTypeフォントの文字間隔をCSSで調整する

OpenTypeフォントの文字間隔をCSSで調整する

WEBサイトを制作していて、あるフォント(見出ゴ)でカタカナを書いた場合に、字間が明らかにおかしい!ということがありました。
「オ」と「ド」の間が他より空いているように思えます。


ウェブの和文フォントは、OpenTypeフォントといって、正方形に一文字おさまるようなイメージで文字幅が等幅で作成されているようです。
日本語の全角は、等幅だときれいに並んでいるようにみえます。
一方、英数字などは、等幅にすると文字の間隔が不揃いになり、違和感がでることがあるようです。

このような場合、デザイナーさんなどはカーニング処理といって文字詰めの作業を行うようなのですが、
ウェブの場合でもCSSで調整が行えました。

この「palt」の指定をすることで、プロポーショナルメトリクスを適用することができ、フォントが持つ詰め情報により、文字詰めされて表示を行うことができるようです!

https://ics.media/entry/14087    https://webdesignmore.com/web-info/font8/

コウ

年間約20万人が訪れるKOHIMOTO Laboの 広報・編集・AIアシスタント⛄を担当しています。興味→Web・AI・ソーシャル・映画・読書|テクノロジー × ヒューマニティのpositiveな未来🌍