OSによってインストールされている書体が違う
ページの雰囲気に合わせて書体を選びたいですよね。
CSSを使って、書体を変える事ができますので、色々な書体を指定できます。
但し機械にインストールされている書体しか使えません・・・
特にスマートフォンのOSは顕著で、Andoroid端末では明朝体を表示できません。
明朝体が最初からインストールされていないんですね。
iOSには下記の書体がインストールされています。
・ヒラギノ角ゴ ProN W3
・ヒラギノ角ゴ ProN W6
・ヒラギノ明朝 ProN W3
・ヒラギノ明朝 ProN W6
Andoroid OSの場合はメーカーによって違うフォントがインストールされている場合がありますが、大体はこんな感じです。
・Roboto
・モトヤフォント
・モトヤマルベリ
・モトヤシーダ
・Noto Sans CJK
角が丸くなっていたりと若干の違いはありますが、どれもゴシック体です・・・
CSSでいくら書体に「ヒラギノ明朝」を指定しても、その書体がインストールされていない場合は、その端末が持っている他の書体で代替されてしまいます。
せっかく指定したのに、これでは見る端末によって雰囲気や印象が変わってしまいますね。
「情報を読み取る」という根本は問題なく機能しますが、Webページ全体の雰囲気や、パッと見た時の印象ではかなりの違いが出てしまいます。
もちろん文字を画像として作ってあげれば、どの端末でも表示する事ができます。
ですが文字を入れなおしたり、ブログの様に更新するようなコンテンツの場合は対応が難しい部分でしょう。
こういった事を防ぐ為にも、あらかじめゴシック体で作り込んだ方がベターなのかもしれません。
どうしても書体を指定したい場合は「Webフォント」
ゴシック体で作ればいい！！と思っても、なかなか思う通りにはいきませんね。
「どうしても明朝体を使いたい」という要望もあるでしょう。
そういった場合にはWebフォントを使いましょう。
Webフォントは、機械に書体がインストールされていなくても、インターネット上にアップされた書体を読み込んで、それを使って思い通りの書体を表示する方法です。
なのでどの環境でも、同じ書体を使えるんです。
ですが日本語はアルファベットと違い、文字数が半端なく多いです。
ひらがな・カタカナ・漢字・・・総数を数えようと思ってもなかなかできませんね。
そういった背景もあって、日本語に対応したWebフォントはまだまだ少ない状況です。
ですがGoogleが日本語に対応したフォントを試験的に無料で公開しています！！
https://googlefonts.github.io/japanese/
全部で9種類の書体を使う事ができます。
ですがこれらの書体はまだ完全にはサポートされていません。
それは「膨大な数の文字をデザインしなければならないから」
なので特殊文字や利用頻度の少ない漢字は表示できないかもしれません。
それでも日常的に使われる文字については利用できるかと思われますので、一度試してみてはいかがでしょうか。
その他有料でのサービスも
Googleが用意してくれている書体の他にも、こだわったものを使いたい！
という場合には有料サービスでの提供もいくつもあります。
1書体何円、というプランもあれば、月間何円、というプランもあります。
利用する状況に合う物を選んでみましょう。
Webフォントの読み込み容量も考慮しよう
Webフォントを使えばいろいろな書体が使える事がわかりました。
これで「この部分はこの書体！」「こっちはこの書体！！」と色々な書体を使いたくなってしまうかもしれませんが、それはちょっと待ってください！
複数の書体を使う事で、Webサイト全体の雰囲気に一貫性がなくなってしまうことはもちろん、Web上にあるフォントを読み込みに行くので、そこに通信が発生します。
つまりページの表示までに若干の時間がかかるという事です。
日本語の文字数は膨大です。そんな沢山の情報を持つ書体たちをいくつも読み込みに行ったらどうなるでしょうか・・・
・・・ギガを使い果たしてしまいますね・・・通信制限待ったなしです。
1サイトを見るだけで1G読み込む！！なんてことは今のところありえませんが、塵も積もれば山となるように、どんどん読み込み量が増え、通信量の制限が少なくなっていきます。
またスマートフォンの回線を使って読み込む場合、回線速度がだいぶ改善されてきましたが、固定回線と比べると安定感に欠けます。
速度が出る時もあれば、出ない時もあるので、いつでもサクサク閲覧できる環境にはなかなかなりません。
なのでページを見てくれる方のことも考えて、多用のしすぎには注意してみてください。
まとめ
・OSによってプリインストールされている書体が異なる
・機械が持っていない書体を使うにはWebフォントを使う
・いくつもWebフォントを読み込むとデータ量が多くなってしまう
