こんにちは、株式会社PentagonでUIデザイナー/Webデザイナーをしているmaoです。
Webデザインをする際、OSに標準でインストールされているフォントを使用してデザインすることがよくあると思います。
数多くのフォントの中でも、Macにインストールされているヒラギノ角ゴシックは、美しいフォントとして有名です。
ところが、ヒラギノ角ゴシックを使う場合、「コーディングの際に注意しなければフォントの太さが違って見えてしまう」ということに先日の業務中に気づきました。
今日はヒラギノ角ゴシックを利用したWebデザインをコーディングする際の注意点を共有したいと思います。
【こんな人に読んで欲しい】
- ヒラギノ角ゴシックを使用したWebデザインを行っている方
- ヒラギノ角ゴシックを使用したWebデザインを行った際、コーディングで太さが違う不具合が出た方
【この記事を読むメリット】
ヒラギノ角ゴシックを使用したWebデザインとコーディングをスムーズに行えます。
【結論】
Macに標準インストールされているヒラギノ角ゴシックには、ヒラギノ角ゴ Pro（Hiragino Kaku Gothic ProN）とヒラギノ角ゴシック（Hiragino Sans）の2つがあります。
それぞれの違いは下記のとおりです。
- ヒラギノ角ゴ Pro：インストールされている太さがW3とW6のみ
- ヒラギノ角ゴシック：W0～W9までインストールされている
ヒラギノ角ゴシックを使う際の注意点を理解して、コーディングの際のfont-familyの指定を適確に行いましょう！
注意！「ヒラギノ角ゴ Pro」と「ヒラギノ角ゴシック」の違い
コーディングでデザインとは違うfont-familyの指定をしてしまうと、想定したデザインと違った見え方をしてきてしまいます。
それは一見同じフォントであるかのように見えるヒラギノ角ゴ Proとヒラギノ角ゴシックでも同様です。
たとえば、ヒラギノ角ゴシックをfont-weight:700やfont-weight:boldを指定した時はW7で表示されます。
ヒラギノ角ゴ Proは同じように指定した場合にW6で表示されるため、少し細く見えてしまうのです。
コーディングでそれぞれのフォントを指定する方法は下記のとおりです。
ヒラギノ角ゴ Pro
font-family: "Hiragino Kaku Gothic ProN", sans-serif;ヒラギノ角ゴシック
font-family: "Hiragino Sans", sans-serif;また、ヒラギノ角ゴシックとヒラギノ角ゴ Proを併記することも可能です。
古いMacにはヒラギノ角ゴシックがインストールされていない場合もありますので、念のため併記しておく方が安全でしょう。
全く違ったフォントで表示されてしまうよりは、太さが2種類しか無くてもヒラギノ角ゴ Proで表示された方がデザインの崩れ等は少なくなります。
ヒラギノ角ゴシックとヒラギノ角ゴ Proを併記
font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;※上記のままだと、Windowsの時のフォントが指定されていないことになります。任意で游ゴシックやメイリオなど、Windowsに標準インストールされているフォントを加えてあげましょう。
まとめ
ヒラギノ角ゴ Proとヒラギノ角ゴシックの違い、ご存知でしたか？
それぞれのフォントでインストールされている太さが違うことを理解しないと、コーディングされた画面を見て「何か太い（細い）な？」と戸惑うかもしれません。
また、コーダーさんに指示する場合もヒラギノ角ゴ Pro（Hiragino Kaku Gothic ProN）とヒラギノ角ゴシック（Hiragino Sans）の違いをはっきり伝えましょう。
フォントの指定に関する情報共有をコーダーさんとしておけば、コーディング作業がスムーズに進むと思います。
