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

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

結論

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

.text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ただし、これらは macOS 向けの差分で、Windowsでは基本的に効きません。
というか、Windows版Figmaだとantialiasedかかっていないらしいです。

あと、font-smooth 系の指定は標準仕様ではない点にも注意です。
-webkit-font-smoothing も -moz-osx-font-smoothing もブラウザ依存の挙動なので、見た目合わせの調整として使うのがよさそうです。

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

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

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

• Macだと文字がちょっと太く見えることがあること
• macOSでは -webkit-font-smoothing や -moz-osx-font-smoothing で近づく場合があること。ただしこのあたりは非標準なので、環境依存の調整になること
• バリアブルフォントなら、軸を細かく触って見た目を調整できることもあること

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

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

以上、おわり。