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

Webサイトでテキスト間調整を行いたい！
Webデザインツールの定番のFigmaでテキストの調整をしたい🤗

そんなあなたに〜　font-feature-settings

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

font-feature-settings is 何　？

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

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

以下 ICSmediaさん　の記事より

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

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

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

一般的には下記のように 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　を設定する方法でした。
ぜひ試してみてください〜