必要なCSSフォント指定を考えてみる
海外のWebサイトでは、Webフォントを用いることが常識化しています。GoogleフォントなどのWebフォントが無料で使用できることもあり、どのブラウザ、OSでも共通したフォントが使えるWebフォントはかなり価値があるものとして重宝されています。しかし、日本語におけるWebフォントの整備は、世界のフォント事情からするとかなり遅れており、トラフィックに応じた課金で使用するWebフォントが主流となっていることもあって、使用するにはハードルが高く、その他のいくつかの問題もあり、まだまだ、閲覧者のローカルでインストールされているフォントに頼らざるを得ません。
そこで、日本語を表現するCSSのfont-familyのあり方を
現在のWebブラウザやOSの標準フォントの現状を踏まえて再検討してみます。
font-familyで共通するものはないのか
フォントをどうするという前に、まずは共通しているフォントは何なのかを考えます。
Windows、Mac双方に使用できるフォントはないのでしょうか。
欧文の場合は、共通の「コアフォント」から指定することで、ほぼ共通のフォント表示が可能となります。現在、両OSで共通しているコアフォントは、下記の通りです。
- Arial
- Arial Black
- Comic Sans MS
- Courier
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
上記はあくまで欧文です。では和文はどうでしょう。
和文はこれまで、両OSに共通の標準日本語フォントがなかったため、揃った表示が叶いませんでしたが、実は、游ゴシック体と游明朝体の採用により、Winodws 8.1とOS X Mavericks（10.9）からそれらが可能となりました。
そういう意味では、欧文はコアフォントから指定し、和文は游ゴシック体と游明朝体を指定をすることで、Winodws 8.1とOS X Mavericks（10.9）以上で共通化することができます。
Windowsのメイリオはどうすればいいか
Macの利用者が増えていると言っても、まだまだWindowsのシェアには追いついていません。そういう意味では、Windowsでどうキレイに表示させるかと考える必要があります。
WindowsにはVistaから「メイリオ」というフォントが追加されました。画面上の文字を「明瞭」に表示するために開発された新しいフォントで、多くの企業サイトでは、このメイリオが高い優先度で指定されています。
確かにとても見やすい書体で、メイリオがキレイに見えるのは、本文に使うサイズでもきちんとアンチエイリアスがかかるから。MSゴシックでは、14pxや16pxというパソコンで一番見やすい大きさのテキストに対して、アンチエイリアスはかかりません。少しカクカクしたフォントに見えるのは、それが理由。
ただ、Windowsでは、ほとんどのブラウザの標準フォントがMS Pゴシックなので、見易さを優先しようと思うと、メイリオを指定したくなる気持ちは、とてもわかります。
ただ、このメイリオはMacで使用ができません。
officeをインストールしているパソコンでは、その流れでメイリオがインストールされていることもありますが、ちょっと外的要因があるので、どうしてもメインのフォントに使用するには至らないといえるでしょう。
しかも、このメイリオはちょっとクセがあるフォントです。
そういう意味でも、あまりクセもなく、美しい表示ができる游ゴシック体と游明朝体を使用するのに軍配があがるでしょう。
スマートフォンの対応はどうするか
今や、PCよりも重要なスマートフォンユーザー。
レスポンシブのページを制作するのであれば、フォントの指定をスマートフォンにも対応させる必要があります。
iOSで使用されているのはヒラギノ書体。Windowsでは使用はしませんでしたが、日本でのシェアを考えるとiOSは視野に入れないといけないデバイスと言えます。iOSでは「ヒラギノ角 Pro」ではなく、「ヒラギノ角 ProN」を指定していることが必要になり、また、アルファベットで”Hiragino Kaku Gothic ProN”と、ウエイトなしで記述している必要があります。
スマートフォンという意味では、Androidも考慮が必要です。
Androidは「Droid Sans」がデフォルトの標準フォントとなっています。これには日本語フォントとしての、「Droid Sans Japanese」も含まれます。最近のものでは、Android 4.0 になって「Roboto」がシステムフォントとして採用されました。日本語フォントは、「モトヤフォント」です。
ですので、Androidへの対応として、RobotoとDroid Sansも合わせて記述することとします。
2015年のCSSフォント
その他の考慮すべきことはたくさんありますが
あまりいろいろ考えても、結局以下のものに集約されるということで
割愛をしました。
各項目を考慮し、2015年の現在でもっとも良いCSSフォントファミリー指定は以下の通りです
font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
※ 欧文はお好みで、ArialをVerdanaやTrebuchet MS、Times New RomanをGeorgiaに換えてください
Googleが出している「Noto」ファミリーが
Webフォントで使用できるようになれば
上記の内容も変わっていくかもしれません。
ただ、現在ではどうしてもデバイスインストールのフォントを使用するという
前提があるのであれば
上記のフォントが一番理想かもしれないですね。
欧文フォント部分だけ
GoogleのWebフォントを使用するというもの良いかもしれませんね。
