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

公開日：2014年8月22日
最終更新日：2019年3月25日

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

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

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

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

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

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

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

【コンテンツ】

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

現時点で推奨する指定

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

body {
	font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

body {

font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳＰゴシック", sans-serif;

}

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

body {
	font-family: Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

body {

font-family: Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳＰゴシック", sans-serif;

}

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

body {
	sans-serif;
}

body {

sans-serif;

}

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

ゴシック体と明朝体

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

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

body {
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho" serif;
}

body {

font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳＰ明朝", "MS PMincho" 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は「ＭＳＰゴシック」を使用します。
つまり、"メイリオ"、Meiryo、"ＭＳＰゴシック" を記述します。
なお、「ＭＳＰゴシック」は「ＭＳＰ明朝」と違って、XP用に日本語名表記だけでOKです。

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

【注意！】
游書体は Mac では medium ですが、Windows では regular になりますので文字が細くなり見づらくなります。
Windows でも medium の太さで表示したいときは、「font-weight: 500;」を指定します。
あるいは "游ゴシック Medium", "Yu Gothic Medium" と記述します。

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

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

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

font-familyの記述の作法

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

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

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

body {
	font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

body {

font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳＰゴシック", sans-serif;

}

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

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

Windows

【Windows 10】
https://helpx.adobe.com/jp/x-productkb/global/cq08041028.html

【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 / macOS

【macOS High Sierra】
https://support.apple.com/ja-jp/HT207962

【macOS Sierra】
https://support.apple.com/ja-jp/HT206872

【OS X v10.9 Mavericks】
https://support.apple.com/ja-jp/HT201375

【OS X v10.8 Mountain Lion】
https://support.apple.com/ja-jp/HT201344

特集記事

WordPress の基礎から応用まで

Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
jQuery Mobile を基本から覚える

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