4月はWindows XPのサポートが切れてWindows 8.1 が公開される。Windowsに関する大きいニュースが重なりましたね。これはいい機会だとWindows 8.1からバンドルされた游書体をウェブサイトに取り入れようか悩んでいます。

游書体とは

游書体は有限会社字游工房さんがデザインしているフォントで、Windows 8.1 とOS X Mavericksに游ゴシックと游明朝がインストールされています。iBooksなどにも採用されていて見慣れている方も多いのではないでしょうか?

ウェブサイトのフォントに採用すべきか・・・

一般的なOSに採用されたということで、ウェブサイトで使うフォントの選択肢にも挙げられますね。WindowsのIEでみるとこんな感じ。

游ゴシック
游ゴシック

メイリオと比べると細く柔らかい。日本語らしいフォント。何より文字のバランスがキレイで読みやすいのです。

CSSでは、font-familyにこう指定します。

※わかりやすさを考慮して游書体だけを書いています。游書体がプリインストールされているのは一部のOSなので、ヒラギノなりメイリオなりのこれまで通りの指定と合わせてつかってください。

font-familyの記述が”游ゴシック体”になっていました。正しい記述は”游ゴシック”です。

比較してみた

游ゴシック・メイリオUI・メイリオ・MS P ゴシックを比較してみました。
メイリオUIはボタンなどの狭い場所でも極力つめられるようにカタカナが半角と全角の中間程度の幅になっているメイリオの派生フォントです。

普通サイズ(本文14px)
游ゴシック メイリオUI メイリオ MS P ゴシック
大きめサイズ(本文20px)
游ゴシック メイリオUI メイリオ MS P ゴシック
小さめサイズ(本文11px)
游ゴシック メイリオUI メイリオ MS P ゴシック

游ゴシックは小さな文字は苦手か。ある程度の文字サイズが必要。
メイリオは明瞭の由来通りはっきりクッキリ。小さな文字でもそこそこ読めます。しかし文字が大きくなると重い。
大きい文字で比べると游ゴシックがいいな。
MS Pゴシックはどんな文字サイズでもブレない。

大きい文字のウェブサイトには採用してみよう

最近はウェブサイトの文字サイズも大きくなりましたし、游書体のバランスはかなり魅力的。
文字の大きいサイトやブログの本文など「読む」に重きをおいた部分に使いたいところ。

それに表示のされ方は全く違うけど、MacとWindowsと異なるOS間で同じフォントを使うってなんかスマートやん。

このブログにも記事ページの見出しと本文に使ってみよう。
記事一覧などタイトルが並ぶところはメイリオUIのつまり具合がいい感じやけど。