HTML & CSS

レシピ

フォント

どの環境でも綺麗なゴシック体、明朝体のフォントを指定する

ブラウザやOSによって異なるフォントですが、どの環境でも綺麗に表示されるゴシック体/明朝体を指定する方法について解説します。

この記事のポイント

  • 様々な閲覧環境におけるフォントの表示を確認する
  • どの環境で閲覧しても近い見た目のフォントを選ぶ
  • Windows環境でも綺麗な明朝体を表示する

目次

閲覧者の環境によって見え方が異なるフォント

HTMLのフォントはfont-familyプロパティで指定することができますが、サイトを閲覧する人のOSやブラウザによって表示はかなり異なります。

それでも制作の都合上、可能な範囲で表示を同じように見えるよう整えたいものです。
そこで今回は、環境ごとのフォントの見え方を確認しつつ、ゴシック体や明朝体に整える方法について解説していきます。

Webフォントについては、別記事「Webフォントを使う」をご覧ください。

環境ごとのフォントの表示例

まずは、font-familyプロパティで指定できるフォントを、それぞれのOS&環境でどのように表示されるか確認していきます。
次のHTMLを表示させて確認を行います。

フォントの表示確認用HTML

<style>
.text2 {
	font-family: sans-serif;
}
.text3 {
	font-family: serif;
}
.text4 {
	font-family: cursive;
}
.text5 {
	font-family: fantasy;
}
.text6 {
	font-family: monospace;
}
</style>
<p class="text1">あいうえお 寿限無 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="text2">あいうえお 寿限無 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="text3">あいうえお 寿限無 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="text4">あいうえお 寿限無 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="text5">あいうえお 寿限無 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="text6">あいうえお 寿限無 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

font-familyプロパティが標準で用意している次のフォントを試します。

  • sans-serif – ゴシック体、サンセリフ体
  • serif – 明朝体、ローマン体
  • cursive – 草書体
  • fantasy – 装飾的フォント
  • monospace – 等幅フォント

上記HTMLを、次の10通りの組み合わせで表示してみした。

macOS High Sierra 10.13.5 / Chrome 67.0.3396.99

macOS High Sierra 10.13.5 / Chrome 67.0.3396.99

macOS High Sierra 10.13.5 / Safari 11.1.1

macOS High Sierra 10.13.5 / Safari 11.1.1

macOS High Sierra 10.13.5 / Firefox 61.0.1

macOS High Sierra 10.13.5 / Firefox 61.0.1

macOS High Sierra 10.13.5 / Opera 54.0.2952.54

macOS High Sierra 10.13.5 / Opera 54.0.2952.54

Windows10 Pro 1803 / Edge 42.17134.1.0

Windows10 Pro 1803 / Edge 42.17134.1.0

Windows10 Pro 1803 / IE11 11.165.17134

Windows10 Pro 1803 / IE11 11.165.17134

Windows10 Pro 1803 / Firefox 60.0.1

Windows10 Pro 1803 / Firefox 60.0.1

Windows10 Pro 1803 / Chrome 67.0.3396.98

Windows10 Pro 1803 / Chrome 67.0.3396.98

iOS 11.4 / Safari 11.0

iOS 11.4 / Safari 11.0

iOS 11.4 / Chrome 67.0.3396.87

iOS 11.4 / Chrome 67.0.3396.87

MacとWindowsでは全く見え方が異なっていることは明らかですが、日本語/英数字でもスタイルのバリエーションが全然異なることも分かりました。
日本語は3種類か2種類、英数字はしっかりスタイル通りに適用されることが多い印象です。

また、日本語の明朝体はMacやiOSだと総じて綺麗に表示されますが、Windowsだと公式ブラウザであるEdge、IE11はアンチエイリアスがかからずガタガタです。
ゴシック体だといずれの環境も問題なさそうです。

以上のことから、日本語を扱う際に閲覧環境を問わず、できるだけ等しい表示にするには「sans-serif」がベストと言えそうです。

ゴシック体を指定するコード例

<style>
p {
	font-family: sans-serif;
}
</style>
<p>あいうえお 寿限無 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

厳密にゴシック体を指定する

標準の「sans-serif」とは別に、システムフォントを値に指定し、より厳密にゴシック体を指定することがあります。

厳密なゴシック体の指定コード

<style>
p {
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
</style>
<p>あいうえお 寿限無 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

大きく分けて3つのシステムフォントを指定しています。

  • ヒラギノ(Hiragino) – Appleの日本語フォント
  • メイリオ(Meiryo) – 現在のWindowsの日本語フォント
  • MS Pゴシック(MS PGothic) – 以前のWindowsの日本語フォント

上記HTMLをWindows10 Proの各ブラウザで表示すると次のようになります。
上からIE11、Edge、Firefox、Chromeの順で表示しています。

Windows10 Proで各種ブラウザでのゴシック体の表示例
Windows10 Proで各種ブラウザでのゴシック体の表示例

Windowsでも綺麗な明朝体を指定する

先述の通り、標準の「serif」はWindowsのEdge、IE11共に微妙な表示となっていましたが、「游明朝」を指定すると綺麗な明朝体が表示されるようになります。

明朝体の指定コード

<style>
p {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
}
</style>
<p>あいうえお 寿限無 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

大きく分けて3つのシステムフォントを指定しています。

  • 游明朝(YuMincho) – Windows8以降の明朝体フォント
  • ヒラギノ明朝(Hiragino Mincho) – Appleの明朝体フォント
  • HG明朝E、MS P明朝、MS 明朝 – 以前のWindowsの明朝体フォント

上記HTMLをWindows10 Proの各ブラウザで表示すると次のようになります。
上からIE11、Edge、Firefox、Chromeの順で表示しています。

Windows10 Proで各種ブラウザでの明朝体の表示例
Windows10 Proで各種ブラウザでの明朝体の表示例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。