- Coding Methodology
- 第82回 font-familyと設定フォントについて
第82回 font-familyと設定フォントについて
ユーザーの閲覧環境にとらわれず美しいフォントを再現するために、CSS3の新機能「@font-face」を利用して、ウェブフォントを採用するサイトが増えています。しかし、日本語のウェブフォントは欧文フォントに比べて、ファイルサイズが大きく読み込みに時間がかかるなど、いくつかの問題も同時に抱えています。
そんな中、OS X MavericksとWindows 8.1に標準搭載された「游ゴシック体」と「游明朝体」や、オープンソース化されたAndroidおよびChromeのシステムフォント「Roboto」など、新たなデバイスフォントも登場しています。今回はfont-familyの基本的なルールを振り返りながら、これらのフォントについて紹介します。
font-familyの基本設定
サイト内で使用する共通フォントは、CSSでbodyに対してソースコード1のような記述で指定をします。
ソースコード1
フォントのCSS記述例
body { font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3",
"Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }先（左側）に記述したフォントの優先度が高くなります。ソースコード1の場合、ユーザーの閲覧環境に游ゴシック体があれば、最優先で適用されます。また指定したフォントがいずれもない場合には、sans-serifを指定しておくことで、各OSで標準搭載されているsans-serif（ゴシック体系）のフォントが自動的に選択されます。
欧文フォントもあわせて指定できますが、日本語フォントには半角英数字も含まれているため、欧文フォントを先に記述しないと反映されません。
しかし和文サイトの場合、日本語フォントと欧文フォントが混在するような指定をすると（ソースコード2）、文字の大きさ、ウェイト、ベースラインが均等にならず、やや不自然な印象を与えてしまいます。
ソースコード2
日本語フォントと欧文フォントが混在している例
body { font-family: helvetica, arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic
ProN", "メイリオ", Meiryo, sans-serif; }「游ゴシック」の特徴
游ゴシック体は、これまで多くのサイトで使用されてきたゴシック体系であるMacの「ヒラギノ」、Windowsの「メイリオ」に比べて曲線が多く、細身の書体です。スペースがゆったりと確保されているため、繊細でやわらかい印象を与えます。サイトのイメージに合っているかなど、使うシーンを見極める必要はありますが、游ゴシック体と游明朝体がMacとWindowsの共通フォントとなったことにより、表示が統一化され、OSによる印象の違いを解消することができます。
AndroidやChromeのシステムフォント「Roboto」
Android（4.0以降）とChromeで標準使用されているRobotoは、ウェアラブル端末などでも見やすいフォントで、Googleのデザインガイドライン"Material Design"の推奨フォントにもなっています。今後、活躍の場面は増えそうですが、日本語には対応していません。 "Material Design"では、マルチバイト文字にはウェブフォントの「Noto Fonts」が推奨されています。デザイン面や視認性から新フォントを採用する場合には、あわせて対応デバイスや導入コストもしっかりと検討することが重要です。
