最近（自分の中で）ホットなCSSのフォント指定 「游ゴシック」「游明朝」

最近（自分の中で）ホットなCSSのフォント指定「游ゴシック」「游明朝」

2016/03/21
12:00

日本語フォントの重要性

ハロー、みなさん。エジソンです。

WindowsからMacに乗り換えて、早２年。両者の違いとして最初に思うことは、Macの画面はきれいだなー、と言う事でしょうか。さすが、デザイナー御用達と言われただけはあるかなという事です。

きれいであるという要因を考えるに、MacはRetinaディスプレイで解像度が高くハードウェア的に有利であるという事が一つ。

さらには、Macにプリインストールされている日本語フォントがそもそも美しいからこそ、画面がきれいに見えるという事も大きな要因の一つでしょう。

Macにプリインストールされている日本語フォントは、OS Xのバージョンと共に変遷されています。最近のMacの日本語フォントと言えば、ヒラギノでしょうかね。

游ゴシックとは

Windows Vista以降、長らくメイリオという日本語フォントが標準になり、従来の画面がよりきれいに表示に見えるという評価を得たように記憶しています。

その数年後、Windows 8.1がリリースされ、標準でプリインストールされている新しい日本語フォントが、游ゴシック・游明朝です。メイリオよりさらに、きれいに表示されると話題の日本語フォントなのです。

余談ですが、メイリオの弱点は、上下の余白もフォントに含まれているため、Office製品（Word・Excel・Power Pointなど）やWebページや、Windowsフォームアプリで使用すると、上下の余白に悩まされる事になりがちです。

t-hom's diary - フォント界の異端児「メイリオ」。～なぜWordで本文にメイリオを選択すると行間が空きすぎるのか

游ゴシックをCSSで指定する

游ゴシック、游明朝フォントをCSSで指定するには以下のように行います。当該フォントが無い場合も想定して、他のフォントも指定します。

游ゴシック

font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;

游明朝

font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;

游ゴシックは他のフォントに比べると、字体が細いので薄く見えがちなのですが、それでもきれいに文字が表示されるという評価が多いようです。

個人的には、文字がとても滑らかに見えるので、皆さんにオススメしたいフォントです。

本ブログでも、游ゴシックを利用しています。ブラウザの開発ツールから、bodyのフォントを書き換えて、游ゴシックとメイリオの表示の違いを確かめてみると良いかと思います。