フォント「Hiragino Kaku Gothic ProN」はどこにいったのか？
こんにちは。デザインエンジニアの奥田です。HTMLとCSSを書くのが好きです。
現在、デザインシステムのコンポーネントを実装しています。その際に気になって調査したフォントの話を書こうと思います。時間がない方は「まとめ」だけでも読んでいってください。でもほんとは全部読んでくれるとうれしいです。
はじめに
環境：Mac OS Big Sur 11.7、GoogleChrome最新
このnoteの中では、以下の表記で進めたいと思います。
ヒラギノ角ゴシックProN...Hiragino Kaku Gothic ProN
ヒラギノ角ゴシック...Hiragino Sans
きっかけ
Figmaデータを見ながらボタンコンポーネントを作るためにCSSを書いていた際、指定されているフォントが「Hiragino Kaku Gothic ProN / W6」になっているのに目が止まりました。
ここまでは普通で、これをそのままCSSに書き起こすとfont-weight: 600となりますね。
しかしコーディングの都合上、できればfont-weightはnormal/boldで使い分けたかったんです。（環境による差がどのくらい出るかわかんないので安全策を取った形です）
ブラウザで表示した際、CSSの仕様によると、normal：400、bold：700が当たるみたいです。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/font-weight
ここで疑問が湧いてきました。
Figmaでは、Hiragino Kaku Gothic ProNは、W3とW6しか選択できません。しかし、ブラウザ上は100〜900まで表現できる。これはなんでだろう？ということで調査してみることにしました。
Hiragino Kaku Gothic ProNとはなんなのか
そもそもHiragino Kaku Gothic ProNとは何かというと、みなさんご存知のとおりヒラギノフォントのことです。
軽く分解してみると、
Pro...収録文字がたくさんあるよ
N...2004年に改定されたJIS規格に則っているよってことみたいです。なるほど。
参考1：https://www.screen-hiragino.jp/lineup/hirg/index.html
参考2：https://rachicom.net/design/hiragino.html
で、次にマシンに入っているシステムフォントを確認してみると、、、、
あれ？Hiragino Kaku Gothic ProNが見当たりません。
入っているのはHiragino Sans。W0〜W9までが入っているようです。
どういうことなんだろ、と思って調査を進めると、どうやらmacOS 10.13 High Sierra以降、Hiragino Kaku Gothic ProNはHiragino Sans内に同梱されているようなのです。へえ〜〜〜〜知らなかった。
参考：https://applech2.com/archives/201910-fonts-included-with-macos-catalina.html
ということでFontBookでHiragino Sansを見てみると、、、、
ありました！！
確かに同梱されているようです。
なぜFigma上ではW3とW6しか表示できないのか
前述したとおり、Figma上ではW3とW6しか選択できない。これはなぜか。
いきなり答えなんですが、その昔、Hiragino Kaku Gothic ProNはW3/W6しか提供されてなかった、って話なんです。
参考：https://www.screen-hiragino.jp/product/download.html
Figmaのフォントの仕様的なものはきちんと調べられてないのでここからは推測ですが、フォントの一覧にHiragino Kaku Gothic ProNが残っているのは、Hiragino Kaku Gothic ProNで作られた古いデータなどのためではないでしょうか。
※余談ですがIllustratorもHiragino Kaku Gothic ProNの選択ができるようになってました
Hiragino Kaku Gothic ProNは無くなったわけではなく、Hiragino Sansに同梱されただけなのでフォントの置き換えダイアログも出てこないのかな〜なんて思いました。
まとめ
・Hiragino Kaku Gothic ProNは、macOS 10.13 High Sierra以降Hiragino Sans内に同梱されている
・Figmaなどのツールでヒラギノを使うときは、Hiragino Sansを指定する
・CSSのフォント指定は”Hiragino Sans”が指定してあればOK
・font-weightで数値指定しない場合（normal/boldなどで指定する場合）は、Figma上のweight指定に気をつける
いや〜〜〜一日中フォントのこと考えてた日でした！読んでいただいてありがとうございました！
おまけ
FigmaでHiragino Sans/W2を指定してるとき、インスペクト（CSS）のweightが250になってるのは何故なんだぜ🤔
