フォント設定の参考に。MacとWinと明朝体とゴシック体とそれぞれの違い。

一つ前の記事でメイリオとMS Pゴシックの関係を書きましたが、そこからもう少し進めてMacとWinで他のフォントも見え方がどうちがうのかを見てみようと思います。

今回は、「Mac（Firefox）とWin（IE9）で見たヒラギノ明朝とMS P明朝」「Macで見たMS Pゴシックとメイリオ」などでどのような違いがあるのかという内容です。

ヒラギノ明朝とMS P明朝

明朝体を設定する場合は、以下のように設定することが多いかと思います。

.sample {font-family:"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝","MS PMincho",serif;}

この場合、Macではヒラギノ明朝が表示され、WinではMS P明朝が表示されます。

さて。早速ですが右の画像をご覧下さい。

基本的に前回のゴシック体と同じような違いですが、MS Pゴシックに比べてMS P明朝の方が、boldにした際の差は小さいようです。幅の安定感がありそうです。

反面、ヒラギノ明朝とMS P明朝の差はboldにしても埋まりようがなく、ヒラギノ明朝との差を小さくする用途では使えません。

漢字に関しては、MS Pゴシックと同様に幅が大きくなります。

MacとWinで見るMS Pゴシックの違い

ついでにMacとWinで見るMS Pゴシックの違いもご紹介します。私のMacにはMS Pゴシックが入っていますので、Macだとどう見えるのか？がご覧いただけます。

が、実際の所は幅にはほとんど違いがありません。MacでもWinでもMS Pゴシックならばほぼ同じ幅に見えます。

とはいえさすがに見た目の違いは顕著で、特にboldにしたときの見映えが大きく違います。

文章の幅が同じで字が太く見えるという事は、それだけ字間が詰まっていることになります。この意味では可読性はMacの方が低いかもしれません。

MacとWinで見るメイリオの違い

同様にMacとWinでメイリオがどう見えるかの違いです。

さすがメイリオ。幅は安定しています。

漢字もひらがなもカタカナも全て同じ幅に見えますし、ある意味非常に安定感の高いフォントといえます。

ゴシック体は明朝に比べるとWebサイトではよく使われますから、メイリオがすべてのOSやバージョンで使えるようになれば、文字幅の違いによるレイアウト崩れは解消されます。今よりももっと気軽に、かつ思い通りにテキストナビゲーションが使えようになるかもしれません。

今回の調べた中で痛感しましたが、メイリオとMS Pゴシックの字幅の差は大きなものです。こういった差異を完全に吸収することは非常に難しいので、フォントの幅が揃うだけでも安心感が違います。

こう考えると、メイリオはやはり安定しているといえます。

Macでのレイアウト崩れ

たまに見かけますが、Macで見るとナビゲーションのレイアウトが崩れていることがあります。

右の画像は前回の記事でつかったメイリオとMS Pゴシックの違いを表したものですが、これが原因ではないでしょうか？

例えばfont-familyにMS Pゴシックとserifのみを指定してレイアウトの調整を行っていた場合、macではデフォルトだとヒラギノ角ゴが表示されます。ヒラギノ角ゴはメイリオと同じような文字幅ですので、MS Pゴシックよりは広くなりやすいフォントです。

ここを無視してラベルやナビゲーションを包含する要素のwidthを決めたため、レイアウト崩れが起きるのだと思います。

「Macは除外」というのは判断としてありだと思いますが、せめてナビゲーションは対応された方がよいかなと。

それにしても。いい加減ゴシック明朝ともに一種類ぐらい同じフォントを組み込んでくれませんかね？

結び

ようやくフォント関連の記事が完成。

といっても読みやすく書けたとはいい難いので、とりあえず画像だけを見ていただく形でよいかなと思います。見ていただけましたらそこからお分かりいただけるでしょうから。

なお、今回も調査用にサンプルページを作りましたので、前回の分も含めてリンクを作りました。実際に差が見たい方はご覧くださいませ。

• フォント差異確認用ページ 明朝体編
• フォント差異確認用ページ ゴシック体編