Edited at

イラレのフォント名からCSSのfont-weightに何を指定すればいいのか

こんにちは、stmkzaです。

イラレとかAdobe XDを見てCSSにするという作業、よくありますよね。

その時に、フォントが↓のような表示になっているのでかなり困りませんか?

image.png

正直DBとかってあっても、何を指定すればいいのか分かりませんよね。

目視でfont-weightに何を指定したら同じ見た目になるかチェックしてもいいのですが、正直面倒ですよね?

そこで、対応表を作りました。どうぞご利用ください。


対応表

font-weight
W?
ISO表記
その他の表記
その他の表記
備考

100
W1
UL(Ultra Light)

200
W2
EL(Extra Light)
SL(Super Light)

---
--
2B

モトヤのみ

300
W3
L(Light)

400
W4
SL(Semi Light)
R(Regular)

500
W5
M(Medium)

600
W6
SB(Semi Bold)
DB(Demi Bold)
D(Demi Boldの略)

700
W7
B(Bold)

---
--
DE(Demi Extra Bold)

タイプバンクのみ

800
W8
EB(Extra Bold)
E(Extra Boldの略)

---
--
H(Heavy)

モリサワ・タイプバンク

---
--
EH(Extra Heavy)

モリサワのみ

900
W9
UB(Ultra Bold)
U(Ultra Boldの略)

---
--
SU(Super Ultra Bold)

タイプバンクのみ


  • モトヤの12・・・はW1W2・・・にそれぞれ対応します

  • タイプバンクのタイポスは目視確認するしかないようです

  • font-weightが---になってる場合は、たぶんfont-weightなどでは表せないので、デザイナーさんと相談して---になっていない太さに変更するか、文字を画像化してください