Kurotei Databook

高専でデザインを専攻してる人のwebやデザインの備忘録的なもの。

どの環境でも「きれいなフォント」をCSSのfont-familyで指定するにはどうすべきか？

はじめに

こんにちは、くろていです。先日、TwitterにてWindows/Mac間の違いにおいてのフォントの表示、内蔵しているフォントについて少し話し合いをしました。その内容を受け、「様々な環境の視点から」どう「きれいなフォント」を表示するかを考え、それをまとめ、みなさんに知って欲しいと思い、記事を書きました。

実装案

各OSに入っているデフォルトのフォントを把握する

様々な環境の視点からフォントを考え、指定するときには、もちろんそれぞれの環境のデフォルトに内蔵されているフォントを知ることが最重要です。それをまとめ、整理してみました。(ゴシック体のみ)

  • Android: Droid Sans Japanese, モトヤLシーダ3等幅(4.0以降)
  • Adobe系ソフトウェアをインストールしている: 小塚ゴシックProN EL~H

となっています。游ゴシックは日本語フォントの中でも癖があまり強くない上、美しいフォントです。Windows-Mac間での搭載は非常にありがたい限りですが、最新バージョンだけでの搭載なので、今後に期待したいところです。

自分がサイトのfont-familyを変えることにした理由

実際どう指定するかだけ知りたい人は読み飛ばしてもかまいません。

前までの指定方法

以前、僕のサイトではWebフォントを使い小塚ゴシックProN Lightを指定していました。
実際の指定の仕方としてはこんな感じ。

@font-face{
    font-family: "kozL";
    src: url(KozGoPr6N-Light.otf);
}
body{
    font-family: "kozL";
}

といった感じです。これは、どの環境においても細字で美しいフォントを表示したかった故です。(小塚ゴシックに関しては様々な意見があり、あまり好きではない人もいるそうですが、自分のサイトのコンセプト上こうしていました)
しかし、とあるWindowsユーザーのフォロワーからの意見やkazoo04から様々な問題を指摘され、直す次第となりました。

問題点

小塚ゴシックをWebフォントで使用する上で、二つの問題点がありました。

  • Windows機でつぶれたり、汚くなったりする。

これは、自分がMacしか持っていなかった故の過ちといったところでしょうか。一応bootcampでwindowsは持っていましたが、ディスプレイがretinaだったこと、MacTypeを使用していたことで一般的なWindowsの環境からサイトを見ることができず、Webフォントだったら大丈夫だろう、という慢心が原因です。



彼のツイートを見れば分かるとおり、綺麗どころがむしろ読みづらくなっています。これなら標準のMS Pゴシックの方が良いとわかります。

  • ロードが遅い

自分のサイトはロードに応じてロード画面を表示していますが、3G環境などあまり早くない回線ではめちゃくちゃロードが長いです。これは日本語フォントをWebフォントとして使っているからで、欧文フォントをWebフォントとする場合にはロードはあまり問題在りませんが、日本語フォントは非常に文字数が多く、ロードに多大な時間を要します。UXが悪いのは大問題で、これはkazoo04から36894回くらい注意されました。ごめんなさい。

新しい表記方法

これらの原因をうけ、新しくfont-familyを指定し直すことにしました。
指定し直すのにあたって、それぞれの環境での「きれいなフォント」を見直す必要があると考え、整理しました。

「きれいなフォント」の整理

全般

自分のサイトは小塚ゴシックがコンセプトフォントなので、できれば小塚を利用したいと思っています。

Mac

デフォルトのヒラギノ角ゴシックで十分でしょう。游ゴシックも良いですが、ヒラギノの次と言った感じでしょうか。

Windows

できるなら游ゴシックが良いですが、バージョンの関係上メイリオも仕方ないと言った感じです。XPユーザーはサポートが切れたとはいえ一定数いるので、MS Pゴシックが使用される可能性もあります。

Linux

完全に忘れていましたが、Sans-serifで大丈夫でしょう。

iOS

ヒラギノ

Android

Sans-serifでよい

このようになりました。これを元に、font-familyで記述する優先度を考え、実装していきます。

表記の優先度


表記の優先度をkazoo04と考えた結果、こうなりました。こんなかんじ→
まず、僕のサイトの場合は何度も記述しているとおりできれば小塚ゴシックを使いたいので、小塚ゴシックが一番となります。

  • 小塚ゴシック

次にヒラギノ もしくは游ゴシックを指定しますが、Mavericksではどちらもあるため、先にヒラギノを指定し、次に游ゴシックを指定します。

  • 小塚ゴシック>ヒラギノ角ゴシック>游ゴシック

游ゴシックが入っていないWindows機のため、メイリオを指定します。

これでだいたい良いでしょう。Android,Linux,WindowsXP以前の環境では、この後にsans-serifを付ければ自動でデフォルトのゴシックフォントを割り振ってくれます。(わざわざMS Pゴシックを指定する必要はありません。自動で設定される上、OfficeがはいっているMacでの表示を防ぐためです。)

となります。これをCSSで書いていきます。

実際のCSS

CSSを書いていきます。
font-familyの指定の方法としては、

  1. 優先度順に指定する
  2. スペースがある場合や全角文字がある場合はシングル/ダブルクオーテーションで囲む

ということに留意しておきましょう。

一般的なサイトにはこれを使うと良いでしょう。

font-family:  "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;

となります。英語表記をすればiOSでもヒラギノで対応できます。
しかし、古いバージョンのブラウザでは英語表記のフォントでは認識してくれない場合があるため、古いバージョンのブラウザのために日本語のフォント名を記すのも良いでしょう。

font-family:  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;

こうなります。

なお、自分のサイトは小塚ゴシックを加え、こうしました。

font-family: "KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;

めでたしめでたし。

欧文フォントは？？？

と思う人もいるでしょう。欧文フォントだけArialにしたり、Helveticaにしたい人も居るでしょう。ですが、欧文と和文でフォントが違うと問題が発生するんですよね。
萌えないごみの日: 【CSS】font-familyを指定するな。ユーザー選択に任せよ。
この記事をみて、「あ、こんな違いが出てしまうんだ。」と思ったのであえて僕は表記しないことにしました。ここは個人個人の判断に任せるべきだと思います。
印刷物ならば、欧文フォントを分けていても調整して印刷し、それを近くで見ようと遠くで見ようとウェイトが変わる、なんてことはあり得ませんが、webならあり得うることなんですね。Webと印刷物の違いを大きく感じさせられます。

おわりに




ありがたい

CSSでのフォント指定について考える（2014年） - DTP Transit（Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント）