Webフォントについて

フラットデザインではフォントが大切

前回はフラットデザインについて紹介しました。リッチデザインに比べてデザイン要素が少ないフラットデザインでは、表現においてフォントが及ぼす影響が大きくなります。

それだけフォントの使い方や選び方が大切になるわけです。

幸い、今ではフリーで使用できるフォントが数多く存在します。数多くというよりは選ぶのに困るという方が適切なほどの種類のフォントがあります。

2016年用、日本語のフリーフォント219種類のまとめ

これらのフリーフォントを使用するのは多くの場合見出し文字やボタンなど目立つところにポイント的に使用します。なぜなら画像として使用するので、本文などボリュームが多いところには使いにくいからです。印刷物の場合は問題ないのですが、ウェブの場合はそれがデメリットとなります。画像として作成すると、重要なキーワードにもかかわらず、テキストでないのでSEOの観点からはよろしくありません。またユーザーが選択してコピーすることもできません。

Webフォントとは

それを解決するのがWebフォントです。WebフォントとはWebサーバに置かれたフォントです。Webブラウザがユーザーのローカル環境にあるフォントを利用して表示するのに対して、Webサーバにあるフォントをダウンロードして表示するのです。これにより、ユーザー環境により異なるフォントが表示され、デザイナーが意図しない見え方をしていたWebページが、ある程度(*)デザイナーがイメージしたとおりにユーザーに見せることができるようになるのです。

*ブラウザによって文字のインデントなどが違うため、若干の差異が生じることがあります。

基本的なWebフォントの導入方法はとてもシンプル、つぎの３ステップで完了です。