はじめに
こんにちは！
blank canvasで広報を担当させていただいております、ameです！
Qiitaでの投稿ははじめてなので、軽く自己紹介を！
広報以外では、主にフロントエンドエンジニアとして開発に携わらせていただいたり、blank canvasの業務のお手伝いをさせていただいております。
プログラミングに関してはまだまだ初心者ですので、少しずつでも色々と学べたらなと思っております。
というわけで、本題に入ります！
游ゴシックについて
游ゴシックについて、WindowsとMacで表記が少し違うのをご存じでしょうか？
実のところ以前の私は全く気付かず使用していたのですが、Windowsだと「Yu Gothic」、Macだと「YuGothic」と、若干表記が違うんですね。
それだけなら font-familly で複数フォントを指定すれば問題はないのですが、なんと「Yu Gothic」と「YuGothic」で使用できるfont-weightが違うのです！！
簡単にまとめると、
| Windows | Mac | |
|---|---|---|
| 英語名称 | Yu Gothic | YuGothic |
| 日本語名称 | 游ゴシック | 游ゴシック体 |
| ウェイト | Light / Regular / Medium / Bold | Medium / Bold |
スペースのあるないでかなり違いがありますね！
経緯
前置きが長くなりましたが、そこから色々あって、とある案件にてYu GothicからNoto Sansに切り替えよう、となり作業を進めていたところ、
Yu GothicのMediumとNoto SansのMediumではローマ字の太さが違う、ということに気が付きました。
自分は今までコーディング上では太くしたければBoldを使用する、レスポンシブ対応で場合によってはNormalに戻す、くらいしか使ってこなかったので、それ以外にも色々文字の太さを設定できるのは知っていたけど、ほとんど一緒、みたいな曖昧な認識でした。
しかし、フォントによって同じMediumやBoldでも太さが違う、今回のようにYu GothicからNoto Sansに切り替えようとなった時、文字の太さの違いで結構デザインの方で修正する必要が出てくる可能性がある。
それ以上に自分がちょっと気になる！ と思い、少し調べてみました。
…という経緯でした。
基本的な和文フォントのウェイト
| ウェイト名 | |
|---|---|
| Medium | 中くらいの太さで、ほとんどの和文書体に用意されている。小見出しや大見出しなどに使われることが多い。 |
| Light | Mediumよりも細い。本文やキャプションに使われることが多い。 |
| Regular | MediumとLightの中間の太さ。本文組によく使われる。 |
| Bold | 本文中で強調したい部分や、見出しなどに使われる。上記の「Medium」「Light」とか。 |
太さとしては以下のようになります。
Light < Regular < Medium < Bold
近しい太さだと思っていたRegularとMediumでもこれくらい違いがあるのですね！
ウェイトの種類はどれもよく見るものなのでもう既に調べるほどのことではないもの、という認識でしたが、改めて見るとそれぞれに得意分野や役割があり、Medium ～ Regularの間でも同じくらいかなと思っていたのが結構違うことに驚きました。
ここで私的にとっても重要だなと思ったのが、先程の游ゴシックの話、Yu GothicのデフォルトはRegular、YuGothicのデフォルトはMediumである為、もしウェイトを指定しなかった場合デフォルトのウェイトが表示されることになり、見た目にかなり影響が出ます。
ですので、WindowsとMacのどちらも綺麗に表示させるために中字で表示したい場合でもウェイトは指定する必要があり、両方対応しているMediumかBoldを使用すればとりあえず両対応できる…と思われます。
私は指定されていたり見出し部分にはとりあえずBold、他のウェイトはレスポンシブ対応時に場合によっては戻す為に使用するくらいしかしてこなかったので、実のところ太くする必要のない部分に関しては結構指定せず端折っていたことが結構ありました。
使用できるウェイトはフォントによって違うということも、デフォルトのウェイトもフォントによって違うというのをここではじめて知ったので、これからはそれらを意識しつつ各箇所ウェイト指定はしっかりしていこう、とかなり勉強になりました！
でもよく考えてみたらそれぞれ違いがあるからこそ細かく種類が存在するんですよね。そりゃそうだ。盲点でした！
太さの種類
コーディングする時数値で設定もできるけど、400がNomarlで700がBold、くらいしか知らないな？ これもそれぞれどれくらい違いがあるんだろう？
そう思い、こちらも調べてみました。
| 値 | 太さ名 |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | Extra Black (Ultra Black) |
値の方が100 ～ 800くらいまである、というのは知っていましたが、太さ名もそれぞれあったのははじめて知りました。
(でも全てのフォントに用意されているわけではないみたいなので、全てを活用することはあんまりなさそう…)
今までBoldからNormalに戻す時も、検証ツールを見てNormalがある！ →とりあえず戻るらしいからこれでいいかな！ っていう非常に良くない考え方で使用していたのですが、
このNormalこそがRegularだったのも驚きでした。
おわりに
最後まで読んでいただき、ありがとうございました！
普段使用しているfont-weight、調べてみるとこんなに細かく種類や役割があり、決して一括りにはできない大切なことがたくさん出てきました。
当たり前のように使用していたからこそ深く調べようとする機会ってあまりないと思うので、まだまだほんの一部分しか調べられていないとは思いますが、これを機に色々と学べてよかったです。
それと同時に気付いたのが、とりあえず使えたらそれでいいかな精神でいるのはもったいないし、こんなにウェイトによって違いがあると、いい加減に使用していると大きなデザインの違いが出てくることもあると思うので、この辺りは反省点だなと思いました。
もしその作業が急ぎだったとしても慌てず急がず、せめてどこかにメモを残しておいて、後ほど思い出して調べられるように改善する等していきたいです！
ちなみにウェイト表記は上記が全てではなく、フォントによって特殊な表記もあり、
さらに欧文フォントは欧文フォントでならではな表記があったりと、本当に数多くあるみたいです。
フォントの世界はとても深いとは知っていたのですが、ウェイトの方もこんなに深いとは思いませんでした…！