テキストにスタイルを指定しない場合、ブラウザでは独自のデフォルトのスタイルが適用されます。これはユーザー エージェント スタイルシートと呼ばれ、ブラウザによって異なる場合があります。ユーザーはテキストの表示方法を独自に設定することもできます。
行の長さを指定しない場合、ブラウザの端でテキスト行が改行されます。そのため、ウェブ上のテキストはデフォルトでレスポンシブになり、ユーザーのビューポートに合わせて流れます。
ただし、テキストが画面に収まるからといって読みやすくなるとは限りません。優れたタイポグラフィとは、テキストを適切な方法で表示するためのものです。タイポグラフィでは、使用する適切なフォントを選ぶだけでなく、ユーザーの好み、テキストのサイズ、行の長さ、テキスト行間の距離を考慮する必要があります。
テキストサイズ
ウェブ上のテキストのサイズを認識するのは困難です。
小さな画面を使っている人なら、画面の手を少し離したくらいに画面を少し近づけると安心です。
しかし、画面が大きくなればなるほど、その関係性を持たせることは難しくなります。ノートパソコン サイズの画面は閲覧者のかなり近くにあるかもしれませんが、ワイド画面のデスクトップ モニターはテレビの画面とほぼ同じサイズです。人々は、デスクトップ画面から腕の長さほど離れて座っていますが、テレビから離れて座っています。
画面からの距離は正確にわかりませんが、適切なテキストサイズを使用するようにしましょう。小さい画面には小さい文字サイズを、大きい画面には大きい文字サイズを使用します。
画面サイズが広くなったときに、メディアクエリを使用して 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 に追加します。rel 属性の値を preload にすると、そのファイルを優先するようブラウザに指示します。as 属性の値を font にすると、ファイルの種類をブラウザに伝えます。type 属性を使用すると、より具体的に指定することができます。
<link href="/fonts/roboto-regular.woff2" type="font/woff2"
rel="preload" as="font" crossorigin>
フォント ファイルを独自にホストする場合でも、crossorigin 属性を含める必要があります。
CSS の font-display プロパティを使用して、システム フォントからウェブフォントへの切り替え方法をブラウザに指示します。ウェブフォントが読み込まれるまでテキストをまったく表示しないようにすることもできます。システム フォントをすぐに表示し、読み込み後にウェブフォントに切り替えることもできます。どちらの戦略にも欠点があります。ウェブフォントのダウンロードが完了してからテキストを表示すると、ユーザーは長い間空白のページを見続けてしまう可能性があります。最初にシステム フォントでテキストを表示した後でウェブフォントに切り替えると、ユーザーがページのコンテンツがずれて表示される可能性があります。
しばらく待ってからテキストを表示することをおすすめします。この時間より前にウェブフォントが読み込まれた場合、テキストはウェブフォントを使用して表示され、コンテンツは変化しません。設定した時間が経過してもウェブフォントが読み込まれない場合は、少なくともユーザーがコンテンツを読むことができるように、テキストはシステム フォントを使用して表示されます。
ウェブフォントが最終的に読み込まれるたびにウェブフォントでシステム フォントを置き換える場合は、swap の font-display 値を使用します。
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 つの可変フォント ファイルは複数の通常のフォント ファイルよりも小さくなると考えられます。多種多様な太さを使用している場合は、可変フォントを使用するとパフォーマンスが大幅に向上します。
ウェブで優れたタイポグラフィを作れるかどうかは、デザイナーとしてどのようなタイプを選択するかということだけではありません。レスポンシブ タイポグラフィでは、ユーザーのデバイスとネットワーク接続も考慮されます。最終的なデザインは、見た目の良さに左右されずに済みます。
レスポンシブ テキストについて学んだところで、次はレスポンシブ画像について学びます。
理解度チェック
タイポグラフィに関する知識をテストする
ビューポート内でテキストを折り返すには、スタイルを追加する必要があります。
clamp() は、流体タイポグラフィに役立ちます。
calc() 関数を簡単に埋め込めるclamp() を使用するのは妥当な理由ではありません。clamp() を使用するのは妥当な理由ではありません。このガイドで推奨されている line-height の値のタイプはどれですか。
24pxline-height にピクセル値を使用しないことが明示的に記載されています。2rem1.52vwline-height としての表示位置単位は問題です。font-display の機能
block または inline-block に設定できます。