タイポグラフィ

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

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

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

テキストサイズ

ウェブ上のテキストのサイズをどの程度にするかは難しい問題です。

画面が小さい場合は、画面が目の近くにある可能性が高いと考えられます。腕の長さほど離れているでしょう。

しかし、画面が大きくなるにつれて、その関連性を把握することが難しくなります。ノートパソコンサイズの画面は視聴者に近い可能性がありますが、ワイドスクリーンのデスクトップ モニターはテレビ画面とほぼ同じサイズです。デスクトップ画面から腕の長さほど離れて座る人もいますが、テレビからはもっと離れて座ります。

それでも、画面からどのくらい離れているかは正確にはわかりませんが、適切なテキストサイズを使用してみることはできます。画面が小さい場合はテキストサイズを小さく、画面が大きい場合はテキストサイズを大きくします。

メディアクエリを使用すると、画面サイズが広くなるにつれて 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 より大きくなったりすることはありません。

線の長さ

ウェブは印刷物ではありませんが、印刷の世界から教訓を得て、ウェブに適用することができます。

Robert Bringhurst は、古典的な著書 『 _The Elements of Typographic Style_ 』で、行の長さ（または測定）について次のように述べています。

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;
}

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

フォントの読み込み

ブラウザにフォント ファイルをできるだけ早くダウンロードするようリクエストできます。ウェブフォント ファイルを参照する link 要素をドキュメントの head に追加します。値が preload の rel 属性は、そのファイルを優先するようブラウザに指示します。値が 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 つの可変フォント ファイルは複数の通常のフォント ファイルよりも小さくなる可能性があります。さまざまな太さを使用している場合は、可変フォントを使用するとパフォーマンスが大幅に向上する可能性があります。

ウェブ上の優れたタイポグラフィは、デザイナーとして選択する書体だけではありません。レスポンシブ タイポグラフィは、ユーザーのデバイスとネットワーク接続を尊重することでもあります。最終的には、どのように表示されても適切に感じられるデザインになります。

レスポンシブ テキストを習得したので、レスポンシブ画像について詳しく見ていきましょう。

理解度をチェックしましょう

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