タイポグラフィ

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

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

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

テキストサイズ

ウェブ上のテキストのサイズを把握するのは困難です。

画面が小さければ、画面は手の届くところに近くなるので安全です。

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

それでも、ユーザーが画面からどのくらい離れているかは正確にはわかりませんが、うまくいけば適切なテキストサイズを試してみましょう。小さい画面には小さいテキストサイズ、大きい画面には大きいテキストサイズを使用します。

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

行の長さ

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

ロバート ブリングハーストは著書『タイポグラフィ スタイルの要素（Elements of Typographic Style）」の中で、線の長さ（または尺度）について次のように述べています。

45 文字から 75 文字であれば、テキストサイズのセリフ体のテキストの面に 1 列ページを設定するのに満足のいく行長と広く考えられています。文字とスペースの両方を含む 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 つの可変フォント ファイルは複数の標準フォント ファイルよりも小さくなる傾向があります。太さのバリエーションが多い場合は、可変フォントを使用するとパフォーマンスが大幅に向上します。

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

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

理解度をチェックする

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