WindowsでもMacでも綺麗な明朝体を表示したい

WEBサイトを制作していていつも悩むのがフォント。格式高い雰囲気に仕上げるには明朝体を使いたいですが、Windowsの場合、明朝体にアンチエイリアスがかからずギザギザになってしまうケースがあります。画像を使いたくない場合の最善策を探ります。

スポンサーリンク
レクタングル大

WindowsとMacのフォント一覧(OSバージョン別)

バージョン搭載フォント(明朝体)搭載フォント(ゴシック体)備考
XPMS 明朝
MS P明朝
MS ゴシック
MS Pゴシック
MS UI Gothic
VistaMS 明朝
MS P明朝
MS ゴシック
MS Pゴシック
MS UI Gothic
メイリオ
ゴシック体にメイリオ登場
Windows7MS 明朝
MS P明朝
MS ゴシック
MS Pゴシック
MS UI Gothic
メイリオ
Windows8MS 明朝
MS P明朝
游明朝
MS ゴシック
MS Pゴシック
MS UI Gothic
メイリオ
游ゴシック
明朝体に游明朝、ゴシック体に游ゴシック登場。Macにも標準搭載。
Windows8.1MS 明朝
MS P明朝
游明朝
メイリオ
游ゴシック
※OfficeフォントHG明朝

Windowsの場合

MS系は、フォントが小さいとアンチエイリアスがかかりません

WindowsのMS系の場合、ゴシック体は24px(or 25px)以下、明朝体は22px以下でアンチエイリアスがかかりません。

Vistaでメイリオ登場

Windows Vistaでメイリオが登場し、ゴシック体はアンチエイリアスがかかったフォントが標準になりました。でもこの時点で明朝体はMS明朝ですのでフォントが小さいとギザギザのままです。

Officeがインストールされている場合、HGS明朝が綺麗

OfficeがインストールされているWindowsの場合、HGS明朝というフォントがインストールされます。これは13px以上でアンチエイリアスがかかりますので、小さいフォントを指定しなければ(もしくは小さいフォントの場合はギザギザで良しとすれば)比較的綺麗に表示できます。

ただし、当然ながらOfficeがインストールされていないWindowsマシンもありますので注意が必要です。

MS系にCSS3でアンチエイリアスをかける

CSS3のtransformを使ってアンチエイリアスをかけたように見せる方法です。IE9以上で使えます。(出典:“MS Pゴシック” をメイリオみたいにアンチエイリアスさせるCSS3ハック

最善策を考える

  • SEOを考えると明朝体もテキストで表示したい(画像は使いたくない)
  • フォントサイズで調整するのはデザイン的に難しい場合が多い
  • IE8やXPでも綺麗に見せたいけど、優先度としては低い

という条件下でしたら、

という指定をし、Windows7以下でCSS3のtransformによるアンチエイリアス化を施すというのがいいのではないでしょうか。

ちなみに游明朝とMS明朝は文字間(ピッチ)が違うので改行位置などに注意が必要です。また、上記フォントファミリーで100%完全にカバーできるものではないことをクライアントさんにご理解いただきましょう。

Macの場合

Macの場合は、ヒラギノ明朝か游明朝か?という選択肢がありますが、どちらも綺麗に表示されますのでそういう点では問題ありません。Windowsで明朝体を綺麗に表示するために游明朝を使うのでしたら、それにあわせてMacも游明朝にするという手もあると思います。

WEBフォント

ちなみにですが、GoogleWEBフォントや有料日本語WEBフォントを使うという選択肢もあります。こちらはまた別の機会に記事にしたいと思います。

まとめ

個人的には游ゴシックが明朝体とゴシック体の中間くらいに見えるので、クライアントには最初に游ゴシックを勧めています。游ゴシックって明朝体ほど堅苦しくなく、ゴシック体よりは品があるように感じているのですが、皆さんはいかがでしょうか?個人の感覚によるところもありますし、デザイナーの意向もあるでしょうから、よく話し合って決めるのがいいですね。

関連書籍

スポンサーリンク
レクタングル大
レクタングル大

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください