「なんとなく読みにくい」「なんとなくダサい」——Webサイトを見ていてそう感じるとき、その原因の多くはタイポグラフィにある。フォントの選択・サイズ・行間・文字間隔。これらをコントロールできるだけで、デザインのクオリティは段違いに変わる。本記事では、Webデザインにおけるタイポグラフィの基礎を体系的に解説する。
タイポグラフィ（typography）とは、文字を使ったコミュニケーションを視覚的に最適化する技術・技法の総称だ。単に「フォントを選ぶこと」ではなく、サイズ・行間・文字間隔・カラー・配置など、文字に関わるあらゆる視覚要素を統合的にコントロールする考え方を指す。
活版印刷の時代から始まったタイポグラフィの歴史は、デジタルの時代に入っても本質的には変わっていない。「読む人のために文字を整える」——その目的は一貫している。
日常会話ではほぼ同義に使われるが、厳密には区別がある。タイプフェイス（typeface）はデザインそのもの——つまり「Noto Sans JP」というデザインのこと。フォント（font）は、そのタイプフェイスの特定のウェイト・サイズの実装のことだ。「Noto Sans JP Bold 16px」が「フォント」に相当する。
現代のWeb開発では「フォント」と「タイプフェイス」を区別することはほとんどない。CSSの font-family プロパティもタイプフェイスを指している。混用して問題ない。
フォントには大きく分けてセリフ体・サンセリフ体・等幅フォント・手書き体の4種類がある。Webデザインで主に使うのは最初の3つだ。それぞれの特徴を理解することが、適切な選択の第一歩になる。
文字の端に「セリフ」と呼ばれる小さな飾りが付いているフォント。日本語の明朝体に相当する。伝統的・格調・信頼感といった印象を与え、長文の印刷物では可読性が高い。スクリーン表示では低解像度環境で読みにくくなることがあるが、Retinaディスプレイが普及した現在は改善されている。
代表例: Times New Roman、Georgia、游明朝、ヒラギノ明朝、Noto Serif JP
セリフのない、シンプルな字形のフォント。日本語のゴシック体に相当する。モダン・クリーン・読みやすいという印象を与え、スクリーン表示との相性が非常に良い。Webデザインではサンセリフ体が主流だ。
代表例: Helvetica、Roboto、Inter、Noto Sans JP、游ゴシック、ヒラギノ角ゴ
すべての文字が同じ横幅を持つフォント。コードや数値を並べたとき列が揃うため、プログラムのソースコードや技術文書に使われる。Webでは主に <code> や <pre> 要素に適用する。
代表例: Courier New、Fira Code、Source Code Pro、JetBrains Mono
Webフォントとは、ユーザーのデバイスにインストールされていなくても、サーバーから配信されて表示できるフォントのことだ。CSSの @font-face ルールによって実現される。
font-display: swap は重要な設定だ。フォントの読み込みが遅い場合に代替フォントを先に表示することで、ページがフォント読み込みでフリーズする現象（FOIT: Flash of Invisible Text）を防ぐ
現代ではWOFF2形式が標準となっており、高い圧縮率でファイルサイズを小さく保てる。ほぼすべてのモダンブラウザがサポートしている。
Google Fontsは無料で使えるWebフォントサービスで、1,500以上のフォントが揃っている。サーバーへの配信もGoogleが行うため、自前でフォントファイルをホストする必要がない。個人・商用問わず無料で利用できる点も大きな魅力だ。
日本語フォントは文字数が多い（数万文字）ため、英語フォントと比べてファイルサイズが格段に大きい。Google Fontsでは日本語フォントもサブセット化（必要な文字だけを含む）して配信されるが、それでも英語フォントよりは重い。使いたい場面を絞って採用するのがポイントだ。
Noto Sans JP
Noto Serif JP
M PLUS 1p
Zen Maru Gothic
Shippori Mincho
読みやすさと汎用性の最高バランス。最もよく使われる
格式ある印象の明朝体。ブログ・コラム向き
柔らかく親しみやすいゴシック体。カジュアルな場面に
丸みのある字形。子ども向け・ポップなデザインに
本文向けの美しい明朝体。長文読書体験を重視する記事に
Google Fontsを使う際は読み込みパフォーマンスへの配慮が必要だ。最適化されていないと、フォントの読み込みがページ表示をブロックしてしまう。
フォントのウェイトを必要以上に読み込まないよう注意してください。wght@100..900（全ウェイト）は非常に重くなります。実際に使うウェイトだけを指定しましょう。
タイポグラフィで最も影響が大きいのが、フォントサイズと行間の設定だ。この2つが正しく設定されているだけで、同じフォントでも「プロっぽい」印象になる。逆に言えば、ここがずれているとどんな高品質なフォントを使っても読みにくい。
長年の研究と実践から導き出された、読みやすさのためのガイドラインを紹介する。
font-size: 1rem（=16px）以上を設定するのが基本だ。長文を読ませる記事やブログでは 1.0625rem（17px）〜 1.125rem（18px）がより読みやすい。
1.6 〜 1.8 が適切とされている。日本語は漢字の密度が高いため、英語テキストよりやや広めの行間が読みやすい。見出しには 1.2 〜 1.4 が適切で、本文と同じ値を使うと間延びして見える。
max-width: 40em や max-width: 70ch などで制御できる。
複数のフォントを組み合わせるペアリングは、タイポグラフィの応用技術だ。見出しと本文に異なるフォントを使うことで、視覚的なリズムと階層感が生まれる。ただし組み合わせが多すぎると散漫な印象になる。1ページに使うフォントは2〜3種類までを原則とする。
一般的なペアリングのパターンは「コントラストを持たせる」か「同系統でまとめる」かの2種類だ。どちらが正解ということはなく、サイトの目的やトーンに合わせて選ぶ。
見出し: セリフ体（格調・個性）
本文: サンセリフ体（読みやすさ）
例: Noto Serif JP × Noto Sans JP
游明朝 × 游ゴシック
見出しに個性を出しつつ、本文は読みやすく保つ。メリハリのある紙面になる。
見出し + 本文: 同じファミリーのウェイト違い
例: Noto Sans JP 700 × Noto Sans JP 400
フォントを1種類に絞り、太さだけで階層を表現する。シンプルで失敗がない。
概念を理解したら、実際のCSSでどう実装するかを見ていこう。保守性と一貫性を保つための実装パターンを紹介する。
font-family プロパティには複数のフォントをカンマ区切りで指定できる。先頭から順に「このフォントが使えるか」を確認し、使えるものが適用される仕組みだ。最後に必ずジェネリックファミリー（serif、sans-serif）を指定しておく。
フォントに関する設定はCSS変数にまとめておくと、サイト全体の一貫性を保ちやすく、変更も容易になる。カラーパレットと同じ :root にまとめて定義するのが一般的だ。
タイポグラフィのCSS変数はカラーパレットと同じ :root にまとめて定義すると管理しやすい。色・サイズ・間隔・フォントを変数化してシステム化する手法は「デザイントークン」と呼ばれ、大規模プロジェクトでも標準的な考え方となっている。
バリアブルフォント（variable fonts）は、ウェイト・幅・斜体などの軸を連続的に変化させられる新しい形式のフォントだ。通常であれば Regular・Bold・Light と3ファイル必要なところを、1ファイルで対応できる。
Google Fontsの多くのフォントはすでにバリアブルフォント形式で配信されている。wght@400;700 と個別指定するより、wght@400..700 と範囲指定した方がキャッシュ効率が良くなる場合もある。
タイポグラフィはアクセシビリティに直接影響する。「すべてのユーザーに読みやすい文字を届ける」という意識が、良いタイポグラフィの根底にある。
font-size: 16px と書くと、ユーザーがブラウザの文字サイズを大きく設定しても反映されない。font-size: 1rem のような相対単位を使うことで、ユーザーの設定を尊重できる。px は使わない、という原則を守ろう。
0.75rem（12px）以下は避けたい。視力に不安のあるユーザーが読めなくなるだけでなく、モバイルでタップ操作もしにくくなる。
max-width: 70ch 程度の制限を本文コンテナに設けることで、すべてのユーザーに読みやすい行長を保てる。
Webタイポグラフィでよく見かける失敗パターンをまとめた。自分のサイトを見直すチェックリストとしても活用してほしい。
デフォルトの line-height: 1.2 程度では、日本語テキストは非常に詰まって見える。本文には最低でも 1.6、読み物コンテンツなら 1.75 〜 1.9 を設定しよう。
逆に見出しの行間が広すぎるケースも多い。見出しは 1.2 〜 1.4 で十分だ。
「カジュアルな部分にはポップなフォント」「コードにはモノスペース」「タイトルに英語フォント」……と増やしていくと、すぐに4〜5種類になる。原則として2種類までに絞り、ウェイトのバリエーションで階層を表現する方が整って見える。
フォントサイズを px で固定すると、ユーザーのブラウザ設定を無視することになる。rem を基本単位とし、レイアウトの都合で em を使い分けると良い。
フルワイドで横に長い文章は非常に読みにくい。本文コンテナには max-width: 40rem 〜 70ch 程度の制限をかけよう。ch 単位は「0の文字幅を1とした単位」で、文字数ベースで幅を指定できる。
日本語フォントには本来のイタリック体が存在しない。ブラウザが強制的に斜体に変換する「フェイクイタリック」は字形が崩れる。日本語テキストで強調したい場合は太字や色の変化を使おう。
タイポグラフィは地味に見えて、デザインの印象を決定的に左右する要素だ。今日紹介した内容を振り返ると:
@font-face と font-display: swap を正しく設定するタイポグラフィの目的は伝達だ。装飾は副産物に過ぎない。
最初から完璧を目指す必要はない。まず本文の行間とフォントサイズを見直すだけで、見違えるほど読みやすくなる。一つずつ整えていこう。
font-display: swap を使うと代わりにFOUT（Flash of Unstyled Text）が起きるが、コンテンツが読めるためユーザー体験は向上する。