先輩「このテキスト、デバイスでやってね」
新人「え？デバイスってなんですか？」
こんなやりとり、経験ありませんか？
今回は新人にありがちな、「デバイスフォントとWEBフォントって何？」「WEB上のテキストで使えるフォントってどんな種類があるの？」という疑問にお応えします。
目次
- HTMLテキスト・画像テキストとは？
- HTMLテキストで使えるフォント４分類！
- 1.パソコンやスマホのOSに元々入っているフォント（＝OS標準フォント）
- 2.ユーザーが個別にパソコンにインストールしたフォント
- 3.外部のWEBフォントサービスが提供するフォント
- 4.自分でサーバーにアップしWEBフォント化したフォント
- 番外：OS標準フォントでいいんだけど結局何を使えばいいの？
HTMLテキスト・画像テキストとは？
WEB上で表示されるテキストは、大きく「HTMLテキスト」と「画像テキスト」の２つに分けられます。
「HTMLテキスト」とは、画像ではなく、ユーザーがテキスト情報としてコピペできる文字のことです。
さらに、HTMLテキストで使えるフォントは「デバイスフォント」と「WEBフォント」と2種類に分けて考えられます。
HTMLテキストのメリット
- 画像を使わないので容量が軽く、サイトの読み込みが速くなる
- ユーザーがテキスト情報としてコピペできる
- cssで装飾できたり、文字列を一括置換できたり管理しやすい
- 文字要素なので検索エンジンにひっかかりやすくSEOに有利
- レスポンシブにしやすい
- 高解像度デバイスへの対応がしやすい
など！
HTMLテキストで使えるフォント４分類！
HTMLテキストに含まれる「デバイスフォント」と「WEBフォント」は、「どこからフォントファイルを読み込むか」が異なります。デバイスフォントは「パソコンやスマホなどマシンにインストールされているフォント」で、WEBフォントは「WEBサーバーやクラウド、ホスティングサーバー等に置かれたフォント」です。さらにその場合ごとにフォントを２種類にわけることで、使えるフォントの種類は計４種類に分類できると考えられます。
上記パターンによってそれぞれ、使えるフォントの種類やメリット・デメリットが異なってきます。
【１，OS標準フォント】を使う方法が最もポピュラーですが、
特殊なフォントを使いたい場合や、デザイン性をより高めたい場合などは場合２，３，４の方法を使う場合もあります。
前提知識１．WEBフォントとは？
WEBフォントとはWEBサーバーやクラウド、ホスティングサーバー等に置かれたフォントであり、それを読み込ませてサイト上に表示することができます。アクセスしたユーザーはサーバー上のフォントファイルを参照するため、パソコンやスマホといったデバイスやOSに依存しない表示が可能になります。
前提知識２．HTMLテキストのフォントの指定方法とは？
HTMLテキストのフォントはCSSのフォントファミリーで指定します。その場合、たいてい複数のフォントファミリーを指定します。
▼例
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
前に書いたフォントから順番に「優先順位が高いフォント」になります。
優先順位の高いものがマシンで表示できない場合は、その次のフォントを表示させます。
上記の場合「游ゴシック」が優先順位が最も高く、「游ゴシック」が読み込めない環境の人は「ヒラギノ角ゴ Pro W3」を、
それも読み込めない環境の人は「メイリオ」を表示する･･･という処理になります。
以下、４分類のフォントについてそれぞれのメリット・デメリットをご説明します。
1.パソコンやスマホのOSに元々入っているフォント（＝OS標準フォント）
概説
Macの「ヒラギノ」や Windowsの「メイリオ」のようにパソコンに元々入っているフォントのことです。例えばMac(OS X以降)のパソコンなら、「ヒラギノ角ゴ Pro」というフォントが標準で入っているため、それをCSS上で表示させるように指定していればHTMLテキストはヒラギノ角ゴ Proで表示されます。しかしWindowsには「ヒラギノ角ゴ Pro」は入っていないため、同じ見た目では映りません。OS標準フォントはマシンのOSやそのバージョンによって違ううえ、iOSやAndroidなどでもちょこまかと異なります。
【参考】フォントカタログ・標準の日本語フォント
メリット
- どの環境でもある程度統一された表示が担保され、安定している
- フォント自体をサーバーにアップロードするわけではないため、ライセンスを気にしなくて良い
デメリット
- フォントの種類の選択肢が少ない
- マシンのOSやバージョンによって入っているフォント、入っていないフォントがある
2.ユーザーが個別にパソコンにインストールしたフォント
概説
ユーザーがそれぞれ自分のマシンにインストールしたフォントのことです。
種類としては全てのフォントが該当します。
メリット
- デザイン意図通りのフォントが自由に使える
- フォント自体をサーバーにアップロードするわけではないため、ライセンスを気にしなくて良い
デメリット
- そもそも、そのフォントがインストールされていないマシンでは表示されない
- 一部のフォントはChromeでやたら掠れて見えるなど環境差異が起こる可能性が高い
デメリットが大きいですが、例えばOS標準フォントでは種類が少なめの明朝体や丸ゴシック体などは、Excelをインストールすれば付属するフォントを指定しておくなどすれば比較的多くのユーザーの環境で表示されるなど工夫が可能です。
【参考】Office の各バージョンに付属するフォント
3.外部のWEBフォントサービスが提供するフォント
概説
他社（他者）が提供しているWEBフォントサービスを利用する方法です。
欧文は無料で提供されているものも多く、
アルファベットは文字数が少なく読み込みに時間がかからないため一般化されてきています。
WEBフォントサービスの例（一部）
▼Google提供の欧文WEBフォント、種類豊富で無料
Google Fonts
▼Google提供の和文WEBフォント、無料
Google Noto Fonts
▼モリサワ提供の和文/欧文WEBフォント
価格 | TypeSquare [タイプスクウェア]
▼Adobe提供の和文/欧文WEBフォント
料金プラン | Typekit
▼こちらも参考にどうぞ
あなたは見分けられる！？定番フォント代わりに使えるGoogle Fonts 27書体
メリット
- サーバーにあがっているものを読み込ませるため、マシンにフォントが入っているか否かは関係なくほとんどの環境で表示できる
- サービスによってはフォントファイルの読み込み速度を高速化する技術が使われており、和文でもストレス無く読み込める
- 有料の美しい和文フォントを、WEBフォントサービスのライセンスに則りさえすれば正しく利用できる
デメリット
- 和文は利用にお金がかかるものがほとんどなうえ、年いくらなど維持費がかかる形態がほとんど
- 和文はやはり読み込み速度が遅くなったり、OS標準フォントからWEBフォントに切り替わる際のカタつきなどが発生する場合がある
- 一部のフォントはChromeでやたら掠れて見えるなど環境差異が起こる可能性が高い
4.自分でサーバーにアップしWEBフォント化したフォント
フリーフォントや自作フォントをWEBフォント化し、サーバーに置いて読み込ませる方法です。
メリット
- サーバーにあがっているものを読み込ませるため、マシンにフォントが入っているか否かは関係なくほとんどの環境で表示できる
- 好きなフリーフォントや自作フォントを使用できる
デメリット
- ライセンス・権利関係は自分で明らかにしておく必要があり、使用は自己責任
- サブセット化など高速化の工夫は自力で行う必要がある
- 和文はやはり読み込み速度が遅くなったり、OS標準フォントからWEBフォントに切り替わる際のカタつきなどが発生する場合がある
- 一部のフォントはChromeでやたら掠れて見えるなど環境差異が起こる可能性が高い
サブセット化とは、使う文字列のみ抽出してそれだけをファイル化する手法です。
なお、フリーフォントをWEBフォント化する際は「商用フリーかどうか」だけでなく「サーバーへファイルそのものをアップロードしてよいか」などの確認事項がありますのでご注意ください。
▼【参考】webフォント化の権利についてと使えるフリーフォントまとめ
日本語フリーフォントをwebフォント化する4ステップ
番外：OS標準フォントでいいんだけど結局何を使えばいいの？
角ゴシック編
Mac
きれいなヒラギノ角ゴがあるのでそれを使いましょう。
ヒラギノ以外がよい、もしくはWindows環境との統一性を図りたいのなら游ゴシック体（OS10.9〜）を視野に入れましょう。
Windows
メイリオ、もしくは昔からある粗めのMS Pゴシックの２つがシェアを考えると無難ですが、Windows8.1から游ゴシック体が追加されたのでそれを優先して表示させるのも良いでしょう。
注意点として、游ゴシック体のウェイトはOSにより異なります。
Mac：２ウェイト（Medium/Bold）
Win8.1：３ウェイト（Light/Regular/Bold）
Win10：４ウェイト（Light/Regular/Medium/Bold）
明朝編
Mac
きれいなヒラギノ明朝があるのでそれを使いましょう。
Windows
Windowsの明朝体はちょうどよいフォントがなく、基本粗めのMS P明朝か、Win8.1以上のみ搭載されている游明朝しか選択肢としては無い現状です。
丸ゴシック編
Mac
OS Xからきれいなヒラギノ丸ゴが搭載されているのでそれを使いましょう。
Windows
どのOSにも標準搭載されている丸ゴシック系の書体はありませんが、どうしても指定したいならOffice付属のHG丸ゴシックM-PROを指定するのがよいかもしれません。