Figmaのヒラギノ系のfont-weightが狂っている!? #CSS

対象読者

Figmaを使うデザイナー
Figmaを見ながらスタイルのコーディングをするエンジニア

なぜこの記事を書いたのか

弊社ではデザインシステムを構築しています。
テキストもコンポーネント化しているのですが、ある日エンジニアから上がってきたPull Requestを見ると font-weight: 700; となっていたのです。
デザイナーとしては、太文字は font-wight: 600; になる用にコンポーネントを作っていたので、なぜ700と指定されてしまったのか不思議でした。

原因を調査した結果、他でも嵌る可能性があるかもしれないと思ったので、今回記事に残そうと思いました。

すべての答えはFigmaにある

弊社で使っているFigmaの文字設定は下記のようにしています

font-familly	Figmaでのfont-weight	ブラウザでのfont-weightとして出力したい値
Hiragino Kaku Gothic ProN	W3	normal
Hiragino Kaku Gothic ProN	W6	600

※iOSの Hiragino Sans ではW3,W6,W8に絞られているので、この構成にしています。
※iOS13 Safariで font-weight: bold が W8に割り振られるようになったため、弊社では明示的に font-weight: 600; にしています。参考 2021年に最適なfont-familyの書き方 - ICS MEDIA

一部は下記で公開していますので、該当のテキストのコンポーネントも見ることができます。

FigmaのInspectで見てみると原因がわかった

font-familly	Figmaでのfont-weight	ブラウザでのfont-weightとして出力したい値	FigmaのInspect
Hiragino Kaku Gothic ProN	W3	normal
Hiragino Kaku Gothic ProN	W6	600

そう、 Hiragino Kaku Gothic ProN のfont-weightが１段階太く表示されていたのです。

FigmaとFontの変換がうまくいっていないのでInspectが狂っているように見える

ググってみたところKiteさんのTweetを見つけました。

CSS の場合フォントウェイトは100〜900の9段階ですが、Hiragino Sans は W0〜W9 の10段階あるので、そもそもすべてを CSS で再現することはできませんが、W0 = 100 からスタートしてしまったため、1つずつズレたんでしょう。
— 𝐊𝐢𝐭𝐞 / KITERETZ inc. (@ixkaito) February 19, 2021

Hiragino Sans とは日本語では「ヒラギノ角ゴシック」のことで、macOS の新しい日本語システムフォントです。
— 𝐊𝐢𝐭𝐞 / KITERETZ inc. (@ixkaito) February 19, 2021

整理するとこうなります

Hiragino Sans でまとめるとこうなります。

CSSのfont-weight（デフォルト）	Hiragino Sansのfont-weight	理想のCSSのfont-weight	FigmaのInspectの表示
-	W0	-	100
-	W1	100	200
-	W2	200	300
-	W3	300	400
normal	W4	400	500
-	W5	500	600
-	W6	600	700
bold	W7	700	800
-	W8	800	900
-	W9	900	900

他のヒラギノ系のフォントでInspectを見てみたら下記の結果になりました。

Figmaで調べたフォント	FigmaのInspectで見たときの数値

ヒラギノ角ゴシック系のInspectが思った以上に狂っていたことがわかりました。

まとめ

FigmaのEditor権限があるデザイナーならば、InspectではなくDesignを見れば意図通りのfont-weightを見つけられますが、Viewer権限しかもっていないエンジニアの場合、Inspectを見て1段階太いfont-weightを指定していることがわかりました。

対策として、弊社ではナレッジ記事を作成し font-weight の指定の意思統一をしました。
みなさんもヒラギノ系のフォントをご使用の場合はご注意ください。