スマートフォンを考慮したフォント指定の検討

Webページで使用するフォントはCSSでfont-familyプロパティに指定します。PCサイトの場合はWindowsとMac OSを対象にしますが、スマートフォンで閲覧することも考え、iOSとAndroidも含めた指定を検討してみました。

欧文フォントだけを考えればいいのなら、Webフォントで対応することが現在は主流です。
しかし文字種類の多い日本語フォントが必要なサイトでは、どうしても端末にインストールされているデバイスフォントを使用せざるを得ません。

どういうデバイスフォントがインストールされているかは、端末により異なります。
MacとWindowsで共通しているフォントもありますが、デフォルトで使用するフォントは違いますので、Webページの表示を整えたいのならきちんと指定することが必要です。

スマートフォンまで考えたら、さらにややこしくなります。
OSバージョンによっても標準インストールされているフォントが違いますし、Android端末はメーカー独自でインストールしているフォントもあります。

フォント指定は、"これが決定版"というものはありません。
すべてのデバイスに対応するなんて不可能だし、「フォント指定はsans-serifだけで十分!」という意見も多くあります。

しかしWebページにはデザイナーが考え抜いた意図がありますので、端末の種類やユーザー環境により「表示がどうなるか分からない」というのも、嫌な気がします。

そこで、このTips記事では現状で考えられる問題の少ない組み合わせを示します。

【コンテンツ】

  1. 現時点で推奨する指定
  2. ゴシック体と明朝体
  3. 欧文フォント指定
  4. Androidの検討
  5. iOSの検討
  6. OS Xの検討
  7. Windowsの検討
  8. メイリオとヒラギノの順番
  9. font-familyの記述の作法
  10. 各OSに標準インストールされているフォント

現時点で推奨する指定

いきなり結論から書きますが、これがPCサイト/スマートフォンサイトに共通する推奨指定です。

PCサイトだけ考えればいいのであれば、次のようにします。

スマートフォン専用サイトなら、次のように単純な指定にします。
スマートフォンは種類が多すぎ現状ではどうせ統一感がないのだから、いっそのこと最低限の指定で済まそうという趣旨です。

結局、どういう指定にするかは考え方の問題です。正解などありません。
そこで、以下こういう結論に至った背景を説明します。

ゴシック体と明朝体

ほとんどのサイトが見やすいという理由で、ゴシック体を指定しています。
Webページの本文にはやはりゴシック体を使うのが無難でしょう。
したがって、該当フォントがない場合の最後の砦として、ゴシック体の総称フォントファミリー "sans-serif" を一番最後に指定します。
なお、実際に指定する場合は引用符で囲ってはいけません。

ちなみに、どうしても明朝体にしたい場合は、以下のようになります。

他に、明朝体に関する注意点としては以下があります。

  • iOS6では、日本語フォントのデフォルトが明朝体になりました。したがって何も指定しない場合は明朝体で表示されます。
  • 記事執筆時点で、Androidに標準でインストールされる日本語フォントには明朝体がありません。

欧文フォント指定

日本語フォントに含まれている英数文字(従属欧文と呼ぶ)を使用せず、欧文フォントを使用したい場合は、欧文フォント指定を日本語フォントよりも先に記述します。

従属欧文でも構わないのであれば、欧文フォント指定はしません。私はどちらでもよいと思います。

指定する場合は、「Arial」「Helvetica」「Verdana」がよく使われます。
推奨指定では、Windows/OS X/iOSのほとんどがカバーしている Verdana を記述しました。もちろん複数記述するのも有りです。

Androidの検討

Androidは端末メーカーが独自でフォントをインストールしていることもあり、端末ごとに標準フォントが異なっている可能性もあります。
したがってオリジナルのAndroidを前提に話を進めます。

Android 3.x 以前は、「Droid Sans」がデフォルトの標準フォント(システムフォント)となっています。これには日本語フォントとしての、「Droid Sans Japanese」も含まれます。そして日本語フォントに太字(bold)は用意されていません。

Android 4.0 になって、「Roboto」がシステムフォントとして採用されました。日本語フォントは、「モトヤフォント」です。

また先に書いたように、Androidの標準日本語フォントである「Droid Sans Japanese」「モトヤフォント」には明朝体がありません。

推奨指定では、Android用として、Roboto と "Droid Sans" を記述しました。
これは、端末により標準フォントがどうなっているか分からないからですが、省いてしまう手もあります。

iOSの検討

iPhone/iPad/iPod touch用OSであるiOSには、日本語フォントとして以下がインストールされています。

ヒラギノ角ゴ ProN W3(HiraKakuProN-W3)
ヒラギノ角ゴ ProN W6(HiraKakuProN-W3)
ヒラギノ明朝 ProN W3(HiraMinProN-W3)
ヒラギノ明朝 ProN W6(HiraMinProN-W6)

iOS6から、日本語フォントのデフォルトが明朝体になりましたので、ゴシック体の指定は必須です。

推奨指定では、"ヒラギノ角ゴ ProN W3" と "Hiragino Kaku Gothic ProN" を記述しました。
英語名表記だけでも良さそうですが、古いブラウザは日本語名表記しないといけないものもありますので、安全のために併記しています。

なお、日本語名表記ではウェイトを示す"W3"をつけますが、英語名表記ではつけません。

OS Xの検討

MacのOS Xでも、ヒラギノフォントが搭載されていますので、iOSと同じ指定でOKです。
ただ、OS X v10.9 Mavericks から、Windows 8.1 と共通の日本語フォント「游ゴシック体」が搭載されましたので、それを優先で指定します。
"游ゴシック" と YuGothic をヒラギノよりも前に記述します。

Windowsの検討

Vista以降は「メイリオ」を使用し、XPは「MS Pゴシック」を使用します。
つまり、"メイリオ"、Meiryo、"MS Pゴシック"を記述します。
なお、「MS Pゴシック」は「MS P明朝」と違って、XP用に日本語名表記だけでOKです。

Windows 8.1 からは、OS Xのところで述べた「游ゴシック」が適用されるようにします。

【注意!】
游書体は他のフォントに比べて細いので、文字が薄く見えます。実際にWindows 8.1のPCで確認してください。
薄さが気になるようでしたら、"游ゴシック" と YuGothic は設定から外します。

メイリオとヒラギノの順番

環境によっては、Macに「メイリオ」がインストールされていたり、Windowsに「ヒラギノ」がインストールされていることがあります。

Windowsでヒラギノは汚いので、「メイリオ」を優先します。
実際、メイリオを先に書くサイトのほうが圧倒的に多いと思います。

font-familyの記述の作法

以上の検討の結果をfont-familyプロパティに記述するわけですが、記述の作法を以下にあげます。

  • 適用優先度の高いフォントから記述する。
  • 欧文フォントと日本語フォントにそれぞれ別のフォントを適用したいときは、欧文フォントを先に記述する。
  • 最後に総称フォントファミリー(sans-serifなど)を記述することで、該当フォントがない環境にも対応する。
  • フォント名にスペースや全角文字が含まれている場合は、引用符(シングル/ダブルどちらでも可)で囲む。
  • 日本語フォント名は英語名表記も可能。
  • フォントの日本語名と英語名を併記する場合は、日本語名を先に記述する。

最後にもう一度、PCサイト/スマートフォンサイトに共通する現時点での推奨指定を以下に示します。

各OSに標準インストールされているフォント

フォントリストを閲覧できるサイトのURLを参考としてあげておきます。

Windows

【Windows 8.1】
http://helpx.adobe.com/jp/x-productkb/global/cq013018331.html

【Windows 7】
http://helpx.adobe.com/jp/x-productkb/global/236469.html

【Windows Vista】
http://helpx.adobe.com/jp/x-productkb/global/233842.html

【Windows XP】
http://helpx.adobe.com/jp/x-productkb/global/221220.html

OS X

【OS X v10.9 Mavericks】
http://support.apple.com/kb/HT5944

【OS X v10.8 Mountain Lion】
http://support.apple.com/kb/HT5379

【OS X v10.7 Lion】
http://support.apple.com/kb/HT5098

【Mac OS X v10.6 Snow Leopard】
http://support.apple.com/kb/HT5154

【Mac OS X v10.5 Leopard】
http://support.apple.com/kb/HT1642

iOS

【iOS 7】
http://support.apple.com/kb/HT5878

【iOS 6】
http://support.apple.com/kb/HT5484

【iOS 5】
http://support.apple.com/kb/HT4980

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ