【CSS】font-feature-settingsでいい感じに文字詰め

どうも、くまだです。

日本語フォントをいい感じに自動カーニングするfont-feature-settingsについて。

LPデザインのお仕事募集中です↓↓↓

LPデザインのお仕事募集中【固定表示記事】

ランディングページ（LP）デザイン（＋コーディング）のお仕事を募集しております。 なお、コーポレートサイトのよ…

weblife.ppmp556.com

font-feature-settingsでカーニング

CSSのfont-feature-settingsプロパティで日本語フォントをいい感じに自動でカーニングすることができます。

<!-- font-feature-settings なし -->
<p class="normal noto">Notoフォントふぉんと文字</p>

<!-- font-feature-settings palt  -->
<p class="normal noto palt">Notoフォントふぉんと文字</p>

.normal {
  font-size: 32px;
}

.noto {
  font-family: "Noto Sans JP", sans-serif;

}

.palt {
  font-feature-settings: "palt";
}

上のテキストがfont-feature-settingsなし、下のテキストがfont-feature-settingsありになります。

「palt」はひらがな、カタカナ、約物全角を、それぞれの字形に合わせた幅に調整してくれます。

その他にも、

• palt / vpal：ひらがな、カタカナ、約物全角を、それぞれの字形に合わせた幅に調整
• halt / vpal：約物全角を、半角幅に調整
• chws / vchw ：特定の組み合わせで連続する約物全角を、半角単位で幅を調整

となります。基本的には「palt」でいいかなと…。

下記のような記述もできます。

「0」か「1」、もしくは「off」か「on」をセットで指定できます。ちなみに「1」を書かなくても、1を指定したものとみなされるので、省略することができます。

.palt {
  font-feature-settings: "palt" 1;
}

.palt {
  font-feature-settings: "palt" on;
}

なお、メイリオやMS Pゴシックなど一部のフォントには効きません。

OpenTypeフォントで、プロポーショナルメトリクス情報を含んでいるかどうかのようです。メイリオやMS Pゴシックはその条件に満たしていないため、font-feature-settingsが効かないようです。

なので、font-feature-settingsを使用する場合は、「OpenTypeフォント」「プロポーショナルメトリクス情報を含んでいる」かどうか確認してから使ったほうがよさそうです。

figmaで確認する場合は、テキストの「・・・」をクリックして詳細が表示されるので、そこの「左右の間隔」の下のほうにある「Proportional Alternative Widths」にチェックを入れると、font-feature-settingsが有効化されます。

ここまで読んでくださりありがとうございました。