Webサイトのフォントは本文を判読でき拡大しても内容が残ることを軸に選ぶ
Webサイトのフォントは、実際の原稿を読むために選びます。見出しと本文を一つの書体で表現する方法も、役割に応じて別の書体を使う方法もあります。2種類という数だけで、文章の判読性やページの品質は評価できません。
料金の数字、メールアドレス、日本語と英語が混ざる文章を表示し、文字サイズ、太さ、行間を比較しましょう。装飾的な見出しが使える場合でも、本文や入力欄では読める表示を確保します。
Webサイトのフォントを選ぶ｜本文の判読性と拡大表示を点検
概要
Webサイトの文字設計では、書体の種類数に加えて、本文の太さやサイズ、拡大時の表示を評価します。この記事では、見出しと本文の役割、文字の点検方法、Webフォントの読み込み、代替書体と利用許諾の確認を解説します。
公開日
更新日
見出しと本文に使う書体の役割を決める
本文用の書体を選び、見出しはサイズと太さで差を付ける方法から検討できます。書体を追加するなら、見出し用など用途を記録し、同じ用途で設定を変えないようにします。
掲載する文字で形と太さを比べる
短い見本だけでなく、長い説明、価格、英数字、記号を使って点検します。日本語の書体には、掲載する漢字やかなが含まれるかも確認が必要です。強調は判断に必要な語句へ絞り、段落全体の太字を繰り返さない方法にします。
文字を拡大した状態で内容と操作を点検する
WCAG 2.2の文字サイズ変更では、原則として文字を 200% に拡大しても内容や機能を失わないことが求められます。字幕や画像化された文字には例外があります。通常の本文で200%拡大ができる方法を用意し、途中の倍率も含めて点検します。（W3Cの文字サイズ変更）
固定した高さで文字が欠ける箇所を修正する
ボタンの文言や説明欄が欠ける時は、高さを固定した設定、折り返し、周囲の配置を見直します。料金の注記だけを小さくして収める方法では、必要な説明を読む課題が残ります。行間や段落間隔の設計は ホームページの余白 でも説明しています。
Webフォントの読み込みと代替書体を確認する
Webフォントは、閲覧時に書体のファイルを読み込む方法です。web.devは、ファイルの配信と、読み込み前に文字を表示する方法が表示速度や配置の移動に関係すると説明しています。例えばfont-display: swapは代替書体で文字を表示した後に切り替えるため、文字幅の変化も点検します。（web.devのフォント表示）
掲載前に配信方法と利用許諾を確かめる
読み込む書体と太さを必要な範囲にし、フォントを取得できない時の代替書体でも文章と操作を点検します。無料という表示だけで判断せず、採用するファイルのWeb掲載や配信に関する利用許諾を読んでおきましょう。
テンプレートを使う場合も、実際の本文と長い見出しを入れて、表示と拡大を確認する工程が必要です。
SpreadSite は、Googleスプレッドシートで内容を管理し、テンプレートを使ってホームページを作成・公開・更新できるノーコードツールです。
本文の書体と掲載後の文字表示を点検するホームページづくりに、ぜひ使ってみてください！
よくある質問
Q: フォントは必ず2種類にしますか？
A: 一つの書体でも、サイズと太さで役割を表現できます。追加する書体は、用途と実際の原稿の判読性から判断します。
Q: 本文にはゴシック体しか使えませんか？
A: 書体の分類だけで判断せず、文字の形、太さ、サイズ、掲載する文章を評価します。英語版でも、その言語の文字で点検します。
Q: Webフォントを使えば表示が速くなりますか？
A: ファイルの量と配信方法、読み込み中の表示に関係します。代替書体での表示と、切り替えた際の配置の変化を点検します。
Q: 無料フォントは自由に配信できますか？
A: 採用するフォントの利用許諾によって判断します。Webへの掲載、ファイルの配信、改変に関する記載を確認します。
