メインコンテンツまでスキップ

ヒラギノ書体 (Hiragino Font)

ヒラギノ書体はMacOSとiOSのみでプリインストールされているフォント。 しかし、MacOSとiOSでは同じフォントでも端末へ登録されている名称が異なっているため、MacOSとiOSで同じ表示をさせるためには複数指定が必要となる。

デザイナーはMacで作業する事が多いので、デザインファイルにはヒラギノ書体がよく指定されている。その場合には、MacやiPhoneでの表示を優先してヒラギノ書体を使用することに問題はないが、その他のWindowsやAndroid端末を意識して、下位指定に他端末用のWeb safe fontを指定する必要がある。

ヒラギノ角ゴ (Hiragino Kaku Gothic) / ヒラギノ角ゴシック (Hiragino Sans)​

ヒラギノ書体のsan-serifフォント。 ヒラギノ角ゴ (Hiragino Kaku Gothic), ヒラギノ角ゴシック (Hiragino Sans)は字形は同じだが、詳細が異なっている。 ヒラギノ角ゴ (Hiragino Kaku Gothic Pro / HiraKakuPro)ではCSS指定では太さの差がbold, normal歯科存在しなかったが、 OS X El Capitan以降のMacから追加されたヒラギノ角ゴシック (Hiragino Sans)により、ヒラギノ角ゴシック (Hiragino Sans)のCSS指定が適用されれば、font-weightの指定が0 - 9まで10段階で設定が可能となる。

OSFont Family機能
OS X 10.11 以降, iOS9Hiragino Sans, 'ヒラギノ角ゴシック'font-weight 100 - 900
OS X 10.5以降、iOSHiragino Kaku Gothic ProN, 'ヒラギノ角ゴ ProN W3', HiraKakuProN-W3

ヒラギノ角ゴシック (Hiragino Sans)でfont-weightを自由に指定してデザイン再現性を上げることが出来る場合もあるが、ヒラギノ角ゴシック (Hiragino Sans)が読み込まれない環境で意図せぬ大きさのフォントになってしまわないように注意が必要である。特にfont-weight: 500;のような指定は他のフォントではsemi-boldではなく、boldとなってしまうようなケースもある。

ヒラギノ明朝 (Hiragino Kaku Gothic) / ヒラギノ明朝 (Hiragino Sans)​

ヒラギノ書体のserifフォント。 MacOSとiOSでは同じフォントでも端末へ登録されている名称が異なっている。

ヒラギノ丸ゴ (Hiragino Maru Gothic)​

ヒラギノ書体のsan-serifのラウンドフォント。 MacOSにしか対応していない。