対象読者
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 の指定の意思統一をしました。
みなさんもヒラギノ系のフォントをご使用の場合はご注意ください。
↧