1. TOP
  2. デザイン
  3. 【2019】おすすめの明朝体のCSS(font-family)設定ときれいで読みやすくい書体の比較

【2019】おすすめの明朝体のCSS(font-family)設定ときれいで読みやすくい書体の比較

 2018/11/15 デザイン
この記事は約 5 分で読めます。 6,671 Views

どのようなフォントを設定するかで文章の読みやすさはずいぶんと変わってきます。
今回はWEBブラウザできれいで読みやすいCSSでの明朝体のフォント設定をご紹介します。

またデフォルトフォントでどの書体が読みやすいかも比較していきたいと思います。

おすすめの明朝体のCSS(font-family)設定

まずは結論から。

font-familyは手前に書いた書体から優先して表示されます。

游明朝→ヒラギノ角ゴシックProN→ヒラギノ明朝ProN→→ヒラギノ明朝Pro→HGS明朝E→メイリオ→その他セリフ書体

というように設定しています。

ちなみにセリフ書体とは明朝体のことです。

Mac、Windows、iOS、Android…OS別、フォント表示設定

上記の設定の場合、OSごとにどのフォントが表示されるかを解説します。

Macの日本語フォント

游明朝 / MacOS10.9以降
ヒラギノ明朝 ProN / Mac OS 10.5以降、iOS6以降
ヒラギノ明朝 Pro / Mac OS X以降

Windowsの日本語フォント

游明朝 / Windows8.1以降
HGS明朝 / MicrosoftOfficeをインストール済のPCに表示
メイリオ / Windows Vista以降
MS 明朝 / Windows95以降

メイリオは明朝体ではなくゴシック体なのですが、MS 明朝が汚すぎるので、それよりはゴシック体に変更してでもメイリオのほうがマシだろう。ということで設定しています。

iOSの日本語フォント

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

Androidの日本語フォント

Androidには明朝体のフォントが入っていないので、デフォルトの以下のゴシック体フォントが表示されます。

Droid Sans Japanese/Android 3.x 以前
モトヤフォント/Android 4.0

どうしても明朝体で表示したい場合はWebフォントで対応する必要があります。

各書体の比較

上から順番に「游明朝」、「ヒラギノ明朝」、「HGS明朝E」です。
それではそれぞれのフォントについて解説していきます。

游明朝

windows8以降、MacOSX以降に付属されています。
クセのない美しい書体です。

字面が小さいので、字間がゆったりとしていて落ち着いた印象を与えます。
また、丸みもすこしあるので、優しい印象も与えます。

MacとWindowsの見た目事情を共通化できるというのが何よりのメリットです。

ヒラギノ明朝

こちらのフォントはMac/iOSのみ搭載。
癖が少なく汎用的に使用できるフォントです。

やや大きめの字面に対し、フトコロを少し締めることで、現代的な明るさを残しつつもオーソドックスな印象を与える書体です。

読みやすさと存在感を両立している使いやすく美しい印象です。

HGS明朝E

こちらはMicrosoftOfficeをインストール済のPCに搭載されているフォントです。
古いWindowsの場合、Windows95以降に搭載されているMS 明朝がデフォルト表示されますが、このフォントは微妙すぎるのでこちらを指定しています。

MS 明朝はアンチエイリアスという機能がなくギザギザとしたピクセル表示がされてしまうので、汚く見えてしまうのですが、
HGS明朝であれば13pxからアンチエイリアスがかかるので、すっきりと見えます。

ちなみに、アンチエイリアスとはギザギザとしたピクセル表示をなめらかにしてくれる機能です。

その他の設定

最後には「serif」も設定しておきましょう。
こちらはその他の明朝体を表示するという指定になります。

英字の指定について

日本語フォントの前に欧文フォントを指定をすると、英数字のみ指定した欧文フォントが優先されます。
日本語と英数字が混ざる文章ではフォントの太さが不揃いになったり、字面の大小の密度の違いなど、違和感がでてくる場合もあります。

色々と設定すれば回避もできますが、煩雑になるので個人的にはあまり指定していません。

サイトの文章構成や要素によっては指定したほうがいい場合もあるので、必要に応じてカスタマイズしてみてください。

欧文書体も指定する場合

Georgiaを先頭に加えた形になります。

Georgia

WindowsにもMacにも搭載されているフォントです。
ふところを深く取ってあり、スクリーン上でつぶれにくい設計になっています。
数字の書体がオールドスタイルなため本文との調和性がとりやすい書体です。

まとめ

いかがだったでしょうか。

現状の環境では游明朝がマック、ウインドーズ両方で搭載されていて、汎用性も高く使いやすいかなという印象なのです。

サイトのデザインによってはヒラギノのほうがマッチすることもあるかと思うので、順番が変わることはありますが、迷ったときはこちらの指定がおすすめです。

【2019】おすすめのゴシック体のCSS(font-family)設定ときれいで読みやすくい書体の比較

CSSでも字詰ができる!font-feature-settingsで美しい日本語フォントのカーニング

[font-smoothing] cssでフォントをきれいでなめらかに見せる方法

制作のご依頼・ご相談はこちら

dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。

今すぐご相談・問い合わせをする

\ SNSでシェアしよう! /

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

エリー

エリー

dainamoで企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

この人が書いた記事  記事一覧

  • ボタンの2重クリックや連打を防止するJavaScript

  • IoT時代のデザインはどうあるべきか

  • コピペでOK!ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]

  • [EC-CUBE 3.0]商品購入画面でお届け日とお届け時間を非表示にする方法

関連記事

  • WordPressを簡単にhttps化するReally Simple SSLプラグインの使い方

  • デザイン導入の役割と効果と価値

  • 【2019年最新版】ai,PSDデータのデザイン素材サイトまとめ。今すぐ現場で使えて編集も楽ちん

  • 【2019年最新版】無料で商用利用可!フリー画像素材サイトまとめ8選!

  • 【超簡単】WordPress移管プラグイン、「All-in-One WP Migration」の使い方。

  • 記事をコピー複製できるWordPressプラグイン「Duplicate Post」の使い方