レシピ

フォント

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

最終更新日：2023-08-18
公開日：2018-07-21

ブラウザや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を、macOS Catalina、High Sierra、Windows10Pro、iOSの各ブラウザで表示をしてみした。

macOS Catalina 10.15.1 / Chrome 78.0.3904.108

macOS Catalina 10.15.1 / Safari 13.0.3

macOS Catalina 10.15.1 / Firefox 70.0.1

macOS Catalina 10.15.1 / Opera 65.0.3467.48

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 / Firefox 61.0.1

macOS High Sierra 10.13.5 / Opera 54.0.2952.54

Windows10 Pro 1803 / Edge 42.17134.1.0

Windows10 Pro 1803 / IE11 11.165.17134

Windows10 Pro 1803 / Firefox 60.0.1

Windows10 Pro 1803 / Chrome 67.0.3396.98

iOS 11.4 /

iOS 13.2.3 / Safari 13.0.3

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

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

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

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

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

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

標準のゴシック体「sans-serif」とは別に、MacやWindowsのシステムフォントであるゴシック体を明示的に指定することがあります。
そこで、どの環境でも綺麗なゴシック体が表示されるfont-familyプロパティの指定を紹介します。

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

<style>
p {
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "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の順で表示しています。

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

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

明朝体の指定コード

<style>
p {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 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の順で表示しています。

記事一覧