【Figma】おすすめ設定 font-feature-settingsを設定する

Webサイトでテキスト間調整を行いたい、Webデザインツールの定番のFigmaでテキストの調整をしたい時の調整方法です。

そんな時に　font-feature-settings　を使用するときれいに調整することができます。

最近　font-feature-settings　でテキストを調整するサイトを多く見ます。
見やすいなって感じるテキストは　font-feature-settings　で大体調整されています（体感ほぼ全て）。

font-feature-settingsとは？

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

自動カーニングが有効になり、HTMLでの日本語のカーニングが縮まります。

▼以下 ICSmediaさん　の記事より

CSSの前に一般的なフォントの話をします。OpenTypeフォント（OTF）にはタイポグラフィのためのさまざまなオプション機能があります。この1つにフォントの字間情報を制御する「プロポーショナルメトリクス」という機能があります。フォントデザイナーが設計時に定めた最適な字間の情報が、OpenTypeフォントに含まれているのです。

▼詳しくは
https://ics.media/entry/14087/

つまり、フォント情報に含まれているプロポーショナルメトリクスをWebでも有効にしてカーニングを調整しようということなのです。

一般的には下記のように font-feature-settings と合わせて letter-spacing を設定することで縮まったカーニングに調整を行います。

base.scss

html {
  font-size: 16px;
  font-weight: 400;
  font-feature-settings: "palt";
  letter-spacing: .3rem;
  line-height: var(--line-height-base);
}

めちゃ見やすくなりました。

これをFigmaで設定したい

ということでこれをFigmaにて設定しテキストの調整を行います。

テキスト設定部分　右下の「・・・」　をクリックします。

詳細を開いた後、左右の間隔　一番下部分　の　「Proportional Alternative Widths」　にチェックを入れると　font-feature-settings　がFigma上で設定されます。

以上　Figma　で　font-feature-settings　を設定する方法でした。
ぜひ試してみてください〜