ホームページで日本語フォントのデザインが汚い！ とくにWindowsで！ｗ いままでのように、リッチデザインやスキューモーフィズムで採用されがちなリアルな質感や立体感などは排除し、デザインを引き算していくと、更に日本語フォントの汚さが目立ちます。
そこで、CSSでのフォント指定について考えてみました。
いままで筆者は、下記のようなフォント指定をしていました。これを見直そうと思います。
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'ＭＳ Ｐゴシック',sans-serif;
MacOSXから考えてみる
「OS X：Mavericks に組み込まれているフォント」で見ると、当然、MacOSXで使用されているユーザーインターフェイス書体’Lucida Grande’があります。’Lucida Grande’は英数のフォントセットですので日本語の部分はヒラギノ角ゴになるようにしてみようと思います。
iPhone/iPadから考えてみる
「iOS 7: Font list」で見ると、’Hiragino Kaku Gothic Pro’は見当たりません。’Hiragino Kaku Gothic ProN’となっていますので、これを指定します。
Androidから考えてみる
下記のような状態で、現状が把握できないので無視ｗ
- Android4.0より前のバージョンでは、’Droid Sans Japanese’ (ゴシック体)か、またはメーカ独自のものが入っている
- Android4.0以降のバージョンでは、下記のモトヤフォントに統一された？
英数 ‘Roboto’
モトヤLシーダ3等幅（ゴシック体）’MotoyaLCedar’
モトヤLマルベリ3等幅（丸ゴシック体） ‘MotoyaLMaru’
Windowsから考えてみる
Windows 8.1から「游ゴシック体・游明朝体」が追加されたので、試しにCSSを下記のようにして確認してみました。Windows7の方は、「Windows Phone SDK 7.1」を入れると’Yu Gothic’が入るようですが、いろんなデベロッパーツールがインストされますので、ご注意ください。
font-family: '游ゴシック体', 'Yu Gothic', YuGothic;
実際に游ゴシック体(正確には’Yu Gothic’)を適用してみました！
酷いですねｗ フォントサイズを20pxくらいにすればスマートな感じとして使えるケースもあるかもしれませんが、フォントサイズ13px~16pxくらいだと。。。
※このフォントのような感じが好きな方もいらっしゃるかもしれませんので、全否定ではありませんので予めご了承ください。
ってことで、やっぱり、「メイリオ」しかないですねｗ どうもWindowsのアンチエイリアスはいまいちで、綺麗な感じがしないのでなんとかしたいのですが。。。
ちょっと味付けで、Windowsアプリでよく利用され、フラットデザインにもよく合う英数フォント’Segoe UI’に、英数部分だけ適用したいと思います(日本語と英数のバランスがおかしくなるかもしれませんが)。
結果、下記のようになりました。
font-family: 'Lucida Grande','Segoe UI','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo,'メイリオ',sans-serif;
あんまり変わってないですねｗ ちなみに、実験的にこのサイトへ上記のCSSを適用しています(12/10時点)。
Web-fontって手もあるのですが、日本語でそれをやってしまうと「FONTPLUS」さんのようにフォントをサブセット化しないと実用が難しそうです。Googleさんのような英数のみのWeb-Fontであれば、ダウンロード量も抑えられOKだと思います。
いまいちな結果でしたが、何かよい方法がありましたら情報交換いただけましたら幸いです。