Figmaでは細いのに実装だと文字が太く見える件

Figmaではちょうどよく見えてた文字が、実装すると「あれ、なんか太くない？」ってことありますよね。
気になりつつ後回しにしてたので、ちょっと調べてみました。

結論

Figmaの見え方って、OSとかブラウザの文字レンダリング差にけっこう左右されます。
macOSなら以下を入れると、実装側の見た目が近づけます。

.text {
  -webkit-font-smoothing: antialiased;
}

なお、これはWindowsでは基本的に効きません。
というか、Windows版Figmaだとantialiasedかかっていないらしいです。

ちなみに各種比較するとこんな感じです。

実装するときに伝えておくとよさそうなこと

デザインデータを実装担当者に渡すときは、

• Macだと文字がちょっと太く見えることがあること
• -webkit-font-smoothing を入れると近づく場合があること
• バリアブルフォントなら、軸を細かく触って見た目を調整できることもあること

このへんは最初に共有しておくと、あとで「あれ？」が減りそうです。

「同じ値なのに見た目が違う」と、ついfont-weightだけを疑いたくなるんですけど、今回は描画のされ方の差っぽかった、という話でした。

以上、おわり。