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/

KOHIMOTO LABO

WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。