タイポグラフィ

テキストのスタイルを指定しない場合、ブラウザは独自のデフォルト スタイルを適用します。これらはユーザー エージェント スタイルシートと呼ばれ、ブラウザによって異なる場合があります。ユーザーはテキストの表示に関する独自の設定も行えます。

行の長さを指定しない場合、ブラウザは画面の端でテキスト行を折り返します。そのため、ウェブ上のテキストはデフォルトで応答性が高く、ユーザーのビューポートに合わせて流れます。

ただし、テキストが画面に収まるからといって、読みやすいとは限りません。優れたタイポグラフィとは、テキストを適切に表示することです。タイポグラフィとは、適切なフォントを選択することだけではありません。ユーザーの設定、テキストのサイズ、行の長さ、テキストの行間を考慮する必要があります。

テキストサイズ

ウェブ上のテキストのサイズを決めるのは難しいものです。

小さい画面を使用している場合、画面は目のかなり近く（手のひら 1 枚分）にあると考えられます。

しかし、画面が大きくなるにつれて、そのつながりを維持することが難しくなります。ノートパソコンサイズの画面は視聴者にかなり近い位置にあることが予想されますが、ワイドスクリーンのデスクトップ モニターはテレビ画面とほぼ同じサイズです。パソコンの画面は腕を伸ばしても届かない位置に置くが、テレビはもっと離れた位置に置く。

ただし、ユーザーが画面からどの程度離れているかは確実にはわかりませんが、適切なテキストサイズを使用することで、小さい画面には小さいテキストサイズを、大きい画面には大きいテキストサイズを使用します。

メディアクエリを使用すると、画面サイズが広がると font-size プロパティを変更できます。

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

テキストの拡大縮小

特定のブレークポイントで固定テキストサイズを切り替えると、かなりの混乱が生じます。レスポンシブなアプローチは、ユーザーのデバイスの幅がテキストサイズに影響を与えるようにすることです。

CSS の vw 単位は「ビューポートの幅」を表します。フォントサイズをビューポートの幅に接続すると、テキストはブラウザの幅に比例して拡大または縮小されます。そのため、特定の幅でテキストサイズがどうなるかを予測することは困難ですが、ユーザーのブラウザの幅に適したテキストサイズになることはわかります。

フォントサイズの宣言で vw のみを使用しないことが重要です。

html {
  font-size: 2.5vw;
}

ロックすると、ユーザーはテキストのサイズを変更できなくなります。em、rem、ch などの相対単位を混在させると、テキストのサイズを変更できるようになります。この場合、CSS の calc() 関数は最適です。

html {
  font-size: calc(0.75rem + 1.5vw);
}

計算はブラウザに任せます。特定の幅でテキストサイズがどのくらいになるかを正確に予測することは困難ですが、テキストサイズは適切な範囲内に収まることがわかっています。正確なテキストサイズはユーザーのブラウザが計算します。

ただし、狭い画面ではテキストが小さすぎる可能性があり、広い画面では大きすぎる可能性があります。

テキストの制限

おそらく、テキストを極端に縮小したり大きくしたりすることは望ましくありません。CSS の clamp() 関数を使用して、スケーリングの開始位置と終了位置を制御できます。これにより、スケーリングが特定の範囲に「クランプ」されます。

clamp() 関数は calc() 関数に似ていますが、3 つの値を取ります。中央の値は、calc() に渡す値と同じです。開き値には最小サイズを指定します。この場合は 1rem で、ユーザーが指定したフォントサイズを下回らないようにします。閉じ括弧の値は最大サイズを指定します。

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

これで、テキストサイズはユーザーの画面に比例して縮小または拡大されますが、テキストサイズは 1rem を下回ることも 2rem を超えることもありません。

行の長さ

ウェブは印刷ではありませんが、印刷の世界から学び、ウェブに応用することはできます。

ロバート ブリングハーストは、古典的な書籍『The Elements of Typographic Style』で、行の長さ（または測定値）について次のように述べています。

セリフ付きのテキスト フェイスでテキストサイズの 1 列ページに設定する場合、45～75 文字程度の行長が適切とされています。66 文字（文字とスペースの両方を含む）の行が理想的と広く見なされています。複数の列を使用する場合は、平均 40～50 文字が適しています。

CSS で行の長さを直接設定することはできません。line-length プロパティはありません。ただし、コンテナの幅を制限することで、テキストが広くなりすぎないようにすることができます。max-inline-size プロパティは、この目的に最適です。

px などの固定単位で線の長さを設定しないでください。ユーザーはフォントのサイズを拡大または縮小できるため、行の長さはそれに応じて調整する必要があります。相対単位（rem、ch など）を使用します。

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

幅に ch 単位を使用すると、そのフォントサイズの 66 番目の文字で改行が改行されます。

行の間隔

CSS には line-length プロパティはありませんが、line-height プロパティがあります。

テキストの行が短い場合は、line-height 値を大きくできます。ただし、長い行のテキストに大きな line-height 値を使用すると、読者の視線が 1 行の末尾から次の行の先頭に移動しにくくなります。

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

line-height 宣言には単位のない値を使用します。これにより、行の高さが font-size を基準に設定されます。

line-height: 24px;

line-height: 1.5;

組み合わせとスケール

ユーザー インターフェースを作成する際は、明確さとページフローを確保するために、階層を優先してください。そのためには、デザインシステムに組み込まれたタイポグラフィ スケールを使用するのがおすすめです。

ウェブフォント

書体は、言葉の声のようなものです。ウェブで最も長い間、フォント オプションはほとんどありませんでした。システム フォントのみを選択できました。コンテンツの雰囲気に合ったウェブフォントを選択できるようになりました。

@font-face を使用して、ウェブフォント ファイルの場所をブラウザに指示します。ウェブフォント形式として woff2 を使用します。十分にサポートされていて、パフォーマンスが大幅に向上しています。

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

ただし、追加するウェブフォント ファイルごとにページの読み込み時間が長くなるため、ユーザー エクスペリエンスが低下する可能性があります。デザインは、最終的なピクセルの外観だけではありません。これらのピクセルがどれだけ速くペイントされるかは、ユーザー エクスペリエンスの重要な要素です。高速に感じられるエクスペリエンスは、優れたユーザー エクスペリエンスです。

フォントの読み込み

ブラウザに、できるだけ早くフォント ファイルのダウンロードを開始するようリクエストできます。ウェブフォント ファイルを参照するドキュメントの head に link 要素を追加します。rel 属性に preload の値を指定すると、ブラウザに対してそのファイルを優先するよう指示できます。値が font の as 属性は、ファイルの種類をブラウザに伝えます。type 属性を使用すると、さらに詳細に指定できます。

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

フォント ファイルを自分でホストする場合でも、crossorigin 属性を含める必要があります。

CSS の font-display プロパティを使用して、システム フォントからウェブフォントへの切り替えの管理方法をブラウザに指示します。ウェブフォントが読み込まれるまでテキストをまったく表示しないようにすることもできます。システム フォントをすぐに表示し、読み込まれた後にウェブフォントに切り替えることもできます。どちらの戦略にもデメリットがあります。ウェブフォントがダウンロードされるまで待ってからテキストを表示すると、ユーザーは長い間空白のページを見つめ続けることになります。最初にシステム フォントでテキストを表示してからウェブフォントに変換すると、ページ上のコンテンツが急激に変化してユーザーに違和感を与える可能性があります。

妥協案として、テキストを表示する前に少し待つ方法があります。この時間切れになる前にウェブフォントが読み込まれた場合、テキストはウェブフォントを使用して表示され、コンテンツが移動されることはありません。時間切れになってもウェブフォントが読み込まれなかった場合は、少なくともユーザーがコンテンツを読めるように、システムフォントを使用してテキストが表示されます。

ウェブフォントが最終的に読み込まれたときに、ウェブフォントでシステム フォントを置き換えたい場合は、font-display 値を swap にします。

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

テキストのレンダリング後にシステム フォントを使用する場合は、font-display の値を fallback にします。

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

可変フォント

同じ書体のさまざまな太さやスタイルを使用している場合、多くの個別のフォント ファイル（太さやスタイルごとに個別のフォント ファイル）を使用することになります。

可変フォントでは、1 つのファイルを使用することでこの問題を解決できます。通常、太字、超太字などの別々のファイルを使用する代わりに、可変フォント ファイルはレスポンシブです。さまざまな太さやスタイルで表示するために必要な情報がすべて含まれています。

つまり、1 つの可変フォント ファイルは 1 つの通常のフォント ファイルよりも大きくなりますが、1 つの可変フォント ファイルは複数の通常のフォント ファイルよりも小さくなる可能性があります。太さの異なるさまざまなフォントを使用する場合は、可変フォントを使用するとパフォーマンスが大幅に向上します。

ウェブにおける優れたタイポグラフィとは、デザイナーとして書体を選ぶことだけではありません。レスポンシブ タイポグラフィでは、ユーザーのデバイスとネットワーク接続も考慮する必要があります。最終的な結果は、どの角度から見ても違和感のないデザインです。

レスポンシブ テキストについて学んだところで、次はレスポンシブ画像に進みましょう。

理解度を確認する

タイポグラフィに関する知識をテストする