HTML / CSS

【CSS】文字詰め：括弧や句読点を揃える（カーニング）

font-feature-settings: "palt";

日本語の文字間調整を最適化し、
特に括弧（「（ ）」）や句読点のバランスを改善する機能を持ちます。

CSS
                  
font-feature-settings: "palt";

/* 併用して使用するCSS */
letter-spacing: 0.05em;  /* 調整 */
font-kerning: normal;  /* カーニングの最適化を促し、さらに美しいタイポグラフィを実現できる */

句読点や括弧などの約物を含めた文字間をしっかり詰めてくれます。

詰まりすぎたと感じる場合、「letter-spacing」 でトラッキングを調整し、バランスをとりましょう

サイト全体の文字組みを改善したい場合は、「body」要素への指定は推奨される有効なアプローチです

値は3種類

palt かな、カナ、約物、英数などすべて詰め（全角英数字以外）
pwid かな、カナは詰め、約物は詰めなし、全角英数と行頭の全角スペースが半角になる
pkna かな、カナのみ詰め

游ゴシックで比較

font-feature-settings: “palt”; が効かないケース

すべてのフォントでサポートされているわけではない
特に、 Meiryo や MS PGothic などのシステムフォントでは適用されないことがあります。

OpenTypeフォント「.otf」以外の「.eot」、「.ttf」、「.woff」は効かないです

効く日本語フォント： 源ノ角ゴシック / 游ゴシック / ヒラギノ角ゴシック / ヒラギノ明朝 / など。。

効かない日本語フォント：MS明朝 / MS ゴシック / メイリオ / など。。