FigmaとWeb実装で文字の太さが違って見えることがある
デザイン確認や実装確認をしていると、Figma上ではちょうどよく見えていた文字が、Web実装後のブラウザでは少し太く見えることがあります。
今回も、Figma上ではちょうどよく見えていた文字が、Web実装後の画面で見ると少し太く見える状態でした。
Figma上では、該当テキストに font-weight: 700 が指定されていました。
実装側でも同じように font-weight: 700 を指定していたのですが、実際のWeb画面で確認すると、Figma上の印象よりも少し太く、濃く見えるように感じました。
最初は「フォントの指定が間違っているのかな？」と思ったのですが、確認してみると、font-familyやfont-weightの指定自体が間違っていたわけではありませんでした。
font-weightは同じでも、見た目が完全に一致するとは限らない
今回のポイントは、Figma上の表示と、Web実装後のブラウザ上の表示は、完全に同じ描画にはならないことがある、という点です。
同じフォント、同じ font-weight: 700 を指定していても、Figma上での見え方と、Web上での見え方がピクセル単位で完全に一致するとは限りません。
文字の輪郭や濃さは、アンチエイリアスやブラウザ、OS、表示環境などの描画処理の影響を受けます。
そのため、CSSの指定値としては同じでも、見た目としては
- 少し太く見える
- 少し濃く見える
- Figmaよりも圧が強く見える
- 文字の印象が少し重く見える
などと感じることがあります。
今回の案件ではNoto Sans JPを使っていましたが、これはNoto Sans JPだけに限った話ではありません。
フォントの種類に関係なく、FigmaとWeb実装後のブラウザ表示で、同じfont-weightを指定していても文字の太さが違って見える可能性があります。
まず確認したこと
こういう場合、いきなり「見え方の違いだから仕方ない」と判断するのではなく、まずは実装側の指定を確認する必要があります。
今回も、以下のような項目を確認しました。
- font-familyが違っていないか
- font-weightが違っていないか
- font-sizeが違っていないか
- line-heightが違っていないか
- letter-spacingが違っていないか
- 意図しないCSSで上書きされていないか
そのうえで、指定自体に大きなズレがなければ、FigmaとWeb実装後の表示差として考える必要がありそうです。
今回はWeb実装側でfont-weightを600に調整した
仕様値だけで見ると、Figmaで 700 と指定されているなら、実装側も font-weight: 700 にするのが自然です。
ただ、今回の画面では、Web実装後の見た目がFigma上の印象よりも少し太く見えていました。
そのため、最終的な見た目をFigmaの印象に近づけるために、実装側では font-weight: 600 に調整して対応しました。
Figmaでは700、実装では600。数値だけ見るとズレているように感じます。
ただ、最終的にユーザーが見るのはFigmaの設定値ではなく、実装後のWeb画面です。
今回は、仕様値をそのまま合わせることよりも、最終的な見た目の印象をFigmaに近づけることを優先しました。
なんとなくfont-weightを変えないために注意したいこと
注意したいのは、毎回なんとなく 600 にすればよい、という話ではないことです。
基本はFigmaの指定値に合わせるのが前提です。
そのうえで、実装後の画面で見たときに明らかに印象が違う場合だけ、デザイナーや関係者と相談したうえで調整するのがよいと思います。
また、調整した場合は、なぜFigmaの指定値と違うのかを残しておくことも大事です。
例えば今回であれば、以下のようなメモ等を残しておくとよさそうです。
Figma上では font-weight: 700 指定だが、Web表示ではやや太く見えたため、見た目をFigmaの印象に近づける目的で、実装側では font-weight: 600 に調整。
こうした理由を残しておくと、後から見た人にも判断の背景が伝わりやすくなります。
「なぜデザインデータとCSSの数値が違うのか」が分からないままだと、後から別の人が見たときに「実装ミスかも」と判断される可能性もあります。
まとめ
Figmaの値は、Web実装時の大事な基準です。
ただし、Figmaの数値をそのままCSSに反映すれば、必ず同じ見た目になるとは限りません。
特にフォントの太さは、数値としては合っていても、実装後のブラウザ上では少し違って見えることがあります。
今回のようなケースでは、以下の流れで確認するとよさそうです。
- 1.
Figmaの指定値を確認する
- 2.
Web実装側のCSS指定を確認する
- 3.
実装後のブラウザ表示で見た目を確認する
- 4.
指定値は合っているのに印象が違う場合は、デザイナーや関係者と相談する
- 5.
調整した場合は、理由を残しておく
「仕様値に合わせる」と「見た目を合わせる」のどちらを優先するかは、ケースによって判断が必要です。
