Web fontは見た目をそろえる前に読み込み失敗時の文字と本文の読め方を決める

Web fontを使うと、利用者のcomputerへ入っていない書体でも、siteの文字をある程度そろえて表示できます。ただし、font fileが読み込めない画面、文字を持たないfont、通信が遅い画面でも、本文と連絡先は読めなければなりません。Web fontを決める前に、fallback fontでどの文字がどう読めるかを確認してください。

CSS Fonts Module Level 3は、font resourceをlocalのsystem fontまたはdownloadできるresourceとして扱い、font-familyへ優先順位を持つfont familyの一覧を指定できると説明しています。指定したfontが使えない場合、browserは次の候補を探します。最後の候補を決めずに、最初の書体の見え方だけでdesignを決めません。

Web fontの採用と本文を読めることは別である

Web fontは、company name、見出し、数字、英文を特定の印象へそろえるために役立ちます。しかし、書体が美しく見えることと、利用者が内容を読めることは別です。問い合わせpageの電話番号や、料金の条件、営業時間がfontの読み込みを待つ間に読みにくくなれば、siteの役割を果たしにくくなります。

まず、どこへWeb fontを使うかを分けます。logoに近い短い見出しだけへ使うのか、本文やformの入力欄にも使うのかで、確認すべき範囲が変わります。本文まで同じfontを使うなら、日本語、英数字、記号、住所、phone numberが全て読めるかを確認します。見出しだけなら、本文のfontと混ざったときに文字の大きさや行間が不自然にならないかを見ます。

説明用の仮例として、店舗のsiteで見出しだけにWeb fontを使う場合を考えます。「ご予約はこちら」というbuttonの文字にも同じfontを使うと、fontの読み込み失敗時に文字幅が変わり、buttonからはみ出すことがあります。buttonへは本文と同じfallbackを使い、見出しだけをWeb fontにする方が、利用者の行動を止めにくい場合があります。

逆に、articleの本文へWeb fontを使うなら、一段落だけを見て決めません。長い日本語の本文、箇条書き、table、外部link、強調した語、数字の並ぶ料金表を確認します。書体によっては、同じfont-sizeでも文字の高さや幅が変わります。PCで一行に収まっていた見出しがsmall screenで三行になり、本文を押し下げることもあります。

fallbackはfont fileの代替ではなく読者への表示である

CSSのfont-familyは、使いたいfont familyだけを一つ書く場所ではありません。優先順位を持つ候補を並べることで、最初のfontが使えないときにもbrowserが次のfontを選べます。W3Cは、generic familyを最後の代替として加えることを勧めています。具体的なfont nameが使えない環境でも、browserがserifやsans-serifのような一般的な分類から文字を選べるためです。

たとえば、本文で特定の日本語fontを最初に指定するなら、そのあとにsystem fontの候補とgeneric familyを置きます。ここで大切なのは、CSSの書式を埋めることではありません。最初のfontがない場合にも、文字の幅、太さ、行間が大きく崩れず、文章が読める候補を選ぶことです。

fallbackを確かめるときは、font fileのURLを一時的に読み込めない状態にしてpageを開きます。browserの開発用機能でnetworkを止める、またはtest用のCSSで最初のfontを外す方法があります。通常の表示と並べ、次を見ます。

1. company name、電話番号、email address、住所が欠けずに読めるか。
2. h1とh2の文字量が変わっても、段落やimageへ重ならないか。
3. menuとbuttonの文字が折り返され、押せない状態にならないか。
4. article本文の行間と文字sizeが、長く読んでも苦しくないか。
5. 日本語、英数字、記号、外部linkの文字に欠けがないか。

font fileが読み込めないときにsiteの印象が変わることはあります。しかし、印象が少し変わることと、必要な案内を渡せないことは違います。fallbackで読める状態を保てば、通信やbrowserの違いがあっても、利用者は営業時間や問い合わせ先へ進めます。

font resourceを増やす前に使う場所を減らす

書体を増やすほど、見出しの太さ、英文、数字、本文、icon用の文字などを細かく調整できます。一方で、font resourceごとに読み込み先、license、更新、表示確認が増えます。siteを更新する担当者が変わったとき、どのfontをどのpageで使い、どこから取得しているかが分からなければ、文字化けや表示崩れを直しにくくなります。

最初は、本文用のfont familyを一つ、見出し用のWeb fontを必要なら一つに絞ります。太字用、斜体用、英字用を追加するのは、表示する文章とfallbackでの見え方を確認してからです。fontを多く使うことはdesignの完成度を保証しません。読者が読む量、更新する人の手間、licenseを守って使えるかを先に考えます。

外部の制作者へfontの選定を頼む場合は、書体名だけで依頼を終えません。本文に使うか、見出しだけに使うか、fallback、font fileの置き場所、licenseの名義、更新時に確認するpageを渡します。designを制作会社へ任せても、siteが使い続けるfont resourceとlicenseの扱いはsite側で把握します。

確認は通常の表示とfallbackの二つで行う

Web fontを入れたあと、通常の表示だけを見て公開しません。fontが読み込める状態と、fallbackだけで表示する状態を同じpageで比べます。文章の内容を変えずに、見出し、本文、menu、button、formを開けば、fontによる文字幅や行間の差を見つけられます。

tableで料金や対応地域を見せるpageは、特に確認します。文字幅が変わると、列が横へはみ出したり、項目名と金額がずれたりします。small screenで横へスクロールさせる設計なら、その説明と操作が読めるかも見ます。fontの読み込みを速くする工夫より前に、fallbackでも意味が壊れない画面を作ります。

最初の一手は、siteの本文、menu、buttonで現在使っているfont familyを書き出し、各場所の最後のfallbackを確認することです。Web fontのdesignを決める前に、読める状態を正本にします。