フォントブログ

Fonts & Typography Blog – since 1998.

1. WebフォントでWebデザインそのものが大きく変わる

“すげーだろ！Webフォントを使っているんだぞ！”感を出すために、見出しやタイトルの文字がデザインのポイントになったり、要素として文字が増えるデザインがトレンドになる傾向があります（後述の“2. 本文のフォントサイズは大きくなる傾向に”を参照）。
周知の通り、Webフォントは画像を使わないテキストデータであるため、どんなに大きく使ってもファイルサイズを気にする必要がありません。
もちろん一時的なトレンドかもしれないですが、既存のWebデザインの概念を一旦忘れる良いきっかけになるのかもしれません。

海外のWebフォントが使われているサイトには文字が大きく配置されたものが多い

2. 本文のフォントサイズは大きくなる傾向に

1990年後半から2000年初頭のWebデザインは、9pxや10pxは当たり前で、小さいフォントサイズであることが「かっこいい」とされていたような気がします。徐々にその考え方も見直され、最近だと12px–16pxあたりが標準でしょうか。
本文にWebフォントを使うとなると、何の書体なのか認識させるためには、それなりに大きいフォントサイズが必要になってきます。

もちろん書体のデザインにもよるのですが、せっかくWebフォントを適用しているのに、小さいフォントサイズで潰れてしまったり、MSゴシックやメイリオ、ヒラギノ等と大して変わらない、むしろそれ以下のクオリティになってしまうのであれば、そもそもWebフォントを使う必要があるか？という話になってしまいます。
ちなみにEmigreはその書体の特徴を出すには28px以上がベストだとしています。

オロナインの公式サイトは全体的にフォントサイズが大きめ

3. 書体の選択以上に悩ましい“ウェイト（太さ）”の選択

人気の書体はUL/EL/L/R/M/DB/B/H/Uなど豊富にファミリー展開されています。
Webフォントの場合、閲覧環境によってレンダリングが異なるため、また現状Webフォントとして使える日本語フォントは、特別スクリーン用に最適化されていないため、ウェイトの選択がどの書体を選ぶか以上に重要なポイントとなります。

本文であれば、UL/ELが本文に合わないことは想像がつきますが、ではL/R/Mからどれを選択するかとなったとき、やはり複数の環境で表示確認をする必要が出てきます。
例えばMac環境ではLがちょうど良くても、Winでは潰れてしまう可能性もあります。iPhoneやiPad、Androidではどうでしょうか？できるだけ多くの環境で確認してみることをおすすめします。

FONT+で提供されているフォントワークスの筑紫ゴシックL/R/Mで検証

4. 画像ファイルがとにかく減る！リキッドデザインにも対応可能に

Webフォントを用いてサイトをリニューアルすると分かるのですが、とにかく画像が減ります。
例えばナビゲーションに画像文字を使っていた場合、通常用、ロールオーバー用、現在地用の3種類×個数分の画像が不要になります。もちろん修正はHTML側で変えるだけ。

また画像文字が無くなると、必然的にリキッドデザインに対応できるため、スマートフォン向けのサイト構築も柔軟に対応できるようになります。つまり、Webフォントの導入タイミングは、「サイトリニューアル時が絶好のチャンス」と言えます。

管理する画像が一気に少なくなるため、作業が円滑になるかも