MENU
CLOSE
STUDYSYSTEMWEBSITE Edit : 2018.12.22 Update : 2023.01.30

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

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


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

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

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

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

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。