デバイスフォント・WEBフォント大解剖　〜新人デザイナーのテキストフォント選び〜

先輩「このテキスト、デバイスでやってね」
新人「え？デバイスってなんですか？」
こんなやりとり、経験ありませんか？
今回は新人にありがちな、「デバイスフォントと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テキストと称します。

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に元々入っているフォントをここでは「OS標準フォント」とよんでいますが、サイトによっては「バンドルフォント」や「標準フォント」と表記しているところもございます。

メリット

どの環境でもある程度統一された表示が担保され、安定している
フォント自体をサーバーにアップロードするわけではないため、ライセンスを気にしなくて良い

デメリット

フォントの種類の選択肢が少ない
マシンの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書体