執筆

タイポグラフィとウェブについて

·6 min read

このページはAIの支援を受けて翻訳されました。正文は英語の原文です。

変わらずそこにある活字

タイポグラフィは、ウェブにおける最も根源的なデザイン上の意思決定です。色よりも、レイアウトよりも、モーションよりも先に——まずテキストがあります。そして、そのテキストの組み方が、誰かに読んでもらえるかどうかを決めるのです。

これは新しい観察ではありません。しかし、抽象化の層の下に埋もれ続けている観察です。デザインシステムはトークンを与えてくれます。ユーティリティフレームワークはクラスを与えてくれます。AIツールはレイアウトを与えてくれます。そしてそのスタックのどこかで、活字を組むという本来の技芸——サイズ、ウエイト、行長、行間、階層を意図をもって選ぶこと——が、デフォルト値を差し込むだけの作業に切り詰められていきます。

デフォルトが悪いわけではありません。しかし、理解を伴わないデフォルトは、凡庸な結果しか生みません。

ウェブの良い組版に必要なもの

ウェブの良いタイポグラフィに必要なのは、少数の事柄に、一貫して注意を払うことです。

  • 行長 — 1行の長さは、多くの開発者が思っている以上に重要です。1行あたり45〜75字(欧文)というのは提案ではなく、読むことが快適になる範囲そのものです。これを超えると理解度は落ちます。
  • 行間 — 行間は行長に応じて変える必要があります。長い行には広めの行間が要り、短い行は詰められます。唯一の正解値というものはありません。
  • スケール — タイポグラフィのスケールは、声を張り上げることなく視覚的な階層をつくります。本文、小見出し、見出しの関係は、恣意的ではなく必然に感じられるべきです。
  • ウエイト — ボールドは強調そのものではありません。強調のための道具のひとつです。イタリック、サイズ、色、字間、位置のすべてが強調に寄与します。階層の問題に対して真っ先にfont-boldへ手を伸ばすのは、断ち切る価値のある習慣です。
  • 余白 — テキストの周りの空間は、テキストそのものと同じくらい重要です。ゆとりあるマージン、考え抜かれたパディング、セクション間の呼吸の間合いは、品質の証であり、読むことへの誘いです。

アクセシビリティとしてのタイポグラフィ

良いタイポグラフィとは、アクセシブルなタイポグラフィです。十分なコントラスト、読みやすいサイズ、適切な行間、適切な行長——これらは美的な好みではありません。あなたの作ったものを人々が使えるかどうかを左右する、機能要件です。

「見た目が良い」と「誰にとっても機能する」の重なりは、多くの人が思っているよりも大きいものです。可読性のために最適化すると、ほとんどの場合、視覚的なデザインも同時に良くなります。

技芸は生き続ける

フレームワークは変わります。デザインのトレンドは巡ります。しかし、良い組版の技芸を支える原則は、何世紀ものあいだ安定してきました。それを理解することに投資すること——ただ適用するのではなく、なぜそれが機能するのかを理解すること——は、ウェブのデザイナーや開発者にできる、最もレバレッジの高い営みのひとつです。

ウェブは、その核心において、タイポグラフィの媒体です。そのように扱うことは、ひとつのデザイン上の立場であると同時に、あなたの公開するものを読んでくれる人々への敬意の表明でもあります。