main

どのブラウザでもキレイに文字を表示するfont-familyの指定方法とは?


Webサイト制作で細心の注意が必要なフォントの指定。
ユーザーのデバイスに指定したフォントがインストールされていなければ、指定
したフォントは表示されません。
サイトのイメージやフォントの流行もあるため、どうしたらよいか悩んでいる方
も多いのではないでしょうか。
今回は、どのブラウザでもきれいに文字を表示できる方法をご紹介します。

 

どのフォントを使用するか

デバイスごとにデフォルトでインストールされているフォントは異なります。
これは、搭載されているOSがデバイスごとに異なるためです。
まずは、 各OSでデフォルトでインストールされているフォントの中からよく使
用されているフォントを把握していきましょう。

 

【Windows】
欧文フォント:Arial,Times New Roman
和文フォント:メイリオ(vista以降), 游ゴシック体(8.1以降)

 

【Mac】
欧文フォント:Arial
和文フォント:ヒラギノ 角ゴシックProN W3,W6,W8, 游ゴシック体(10.9以降)

 

【iOS】
欧文フォント:Helvetica
和文フォント:ヒラギノ角ゴ ProN W3,W6

 

【Android】
欧文フォント:Droid Sans,Roboto(Android 4.0以降)
和文フォント:Droid Sans Japanese,モトヤフォント(Android 4.0以降)

 

フォントサンプル:

font_sample

 

どれもシンプルで読みやすいフォントですね。

 

ゴシック書体は、 一般的に読みやすさ等の観点からWebサイト制作で最も標準
的に利用されている書体です。

 

反対に、 明朝書体は落ち着いた印象があるため、 雑誌や新聞などの文書に多く
利用されています。

 

上記をふまえてきれいに見えるフォントをまとめてみましょう。

 

ゴシック書体:
Helvetica,Arial, Roboto, Droid Sans, 游ゴシック,ヒラギノ角ゴ ProN W3,メイリオ

明朝書体:
Times New Roman, 游明朝, ヒラギノ明朝 ProN W3,メイリオ

 

 

CSSでFont-Familyを指定する

Font-Familyを指定する際には、以下の点に注意が必要です。

Font-Familyの注意点

・先に記述したフォントが優先される。
・スペースや全角文字のあるフォントはダブルクオーテーションで囲む。
・欧文フォントと日本語フォントでは、欧文フォントを先に記述する。
・日本語フォント名は英語名も併記可能。日本語名を先に記述する。
・最後にsans-serif,serifを記述し、該当フォントがない環境にも対応する。

 

Font-Familyの指定方法

CSSを記述していきましょう。

 

【ゴシック書体の場合】

 

【明朝書体の場合】

 

このように記述することで、 先頭から順に使用デバイスにインストールされて
いるフォントが表示されるようになります。

そして、該当フォントがない場合に備えて、 各sans-serif,serifを設定すること
で各ブラウザ標準のゴシック体・明朝体のフォントで表示されます。

 

まとめ

いかがでしたでしょうか。
各デバイスのOSごとに表示できるフォントとブラウザの標準フォントを指定す
ることでどのブラウザでもきれいにフォントを表示することが可能になります。
フォントについては時代によってサポートの種類や流行に違いがあるため、 時
々チェックしてみると良いですね。

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleフラットデザインに合う無料アイコン素材まとめ