<プロが教えるコーディング:第62回>font-familyと設定フォントについて | 東京IT新聞

<プロが教えるコーディング:第62回>font-familyと設定フォントについて

エンタープライズ ベンチャー/スタートアップ

株式会社モノサス「コーディングファクトリー」
  • 株式会社モノサス「コーディングファクトリー」
  • <プロが教えるコーディング:第62回>font-familyと設定フォントについて
  • <プロが教えるコーディング:第62回>font-familyと設定フォントについて
CODING FACTORYです。2010年6月から月1回のペースでお届けしている「Coding Methodology」は、1985案件のHTMLコーディング案件を納品した中から生み出された、今すぐ役立つ実践的コーディングノウハウです。ちょっとした工夫や発想の転換など、コーディングの手法やスムーズに進めるコツを紹介します。

ユーザの閲覧環境にとらわれず美しいフォントを再現するために、CSS3の新機能「@font-face」を利用して、ウェブフォントを採用するサイトが増えています。
しかし、日本語のウェブフォントは欧文フォントに比べて、ファイルサイズが大きく読み込みに時間がかかるなど、いくつかの問題も同時に抱えています。

そんな中、OS X MavericksとWindows 8.1に標準搭載された「游ゴシック体」と「游明朝体」や、オープンソース化されたAndroidおよびChromeのシステムフォント「Roboto」など、新たなデバイスフォントも登場しています。今回はfont-familyの基本的なルールを振り返りながら、これらのフォントについて紹介します。

▼font-familyの基本設定

 サイト内で使用する共通フォントは、CSSでbodyに対してソースコード1のような記述で指定をします。

 先(左側)に記述したフォントの優先度が高くなります。ソースコード1の場合、ユーザーの閲覧環境に游ゴシック体があれば、最優先で適用されます。また指定したフォントがいずれもない場合には、sans-serifを指定しておくことで、各OSで標準搭載されているsans-serif(ゴシック体系)のフォントが自動的に選択されます。

 欧文フォントもあわせて指定できますが、日本語フォントには半角英数字も含まれているため、欧文フォントを先に記述しないと反映されません。

 しかし和文サイトの場合、日本語フォントと欧文フォントが混在するような指定をすると(ソースコード2)、文字の大きさ、ウェイト、ベースラインが均等にならず、やや不自然な印象を与えてしまいます。

▼「游ゴシック」の特徴

 游ゴシック体は、これまで多くのサイトで使用されてきたゴシック体系であるMacの「ヒラギノ」、Windowsの「メイリオ」に比べて曲線が多く、細身の書体です。

 スペースがゆったりと確保されているため、繊細でやわらかい印象を与えます。サイトのイメージに合っているかなど、使うシーンを見極める必要はありますが、游ゴシック体と游明朝体がMacとWindowsの共通フォントとなったことにより、表示が統一化され、OSによる印象の違いを解消することができます。

▼AndroidやChromeのシステムフォント「Roboto」

 Android(4.0以降)とChromeで標準使用されているRobotoは、ウェアラブル端末などでも見やすいフォントで、Googleのデザインガイドライン“Material Design”の推奨フォントにもなっています。今後、活躍の場面は増えそうですが、日本語には対応していません。 “Material Design”では、マルチバイト文字にはウェブフォントの「Noto Fonts 」が推奨されています。

デザイン面や視認性から新フォントを採用する場合には、あわせて対応デバイスや導入コストもしっかりと検討することが重要です。

【執筆者プロフィール】
松原 恵(まつばら・めぐみ)
コーディングファクトリー
コーディングチーム
班長/コーダー
《株式会社モノサス》

編集部のおすすめ

page top