タイポグラフィはウェブサイト上でさまざまな目的に役立ちます。コンテンツの読みやすさを確保し、明確な情報の階層を作成し、ブランドのアイデンティティを確立します。
このレッスンでは、以下について学びます：
見出し（Headings）
見出しはコンテンツのガイドとして考えてください。誰でも見出しを一目見ればコンテンツの構造が理解できるように、見出しは明確で説明的であり、コンテンツの階層を伝えるために使用されるべきです。分かりやすく、説明的な見出しの付け方について、さらに詳しく学びましょう。
新聞の1面を想像してみてください。この文脈では、H1はページ上の大きな声明（目的）です。H2は大きな声明に収まるより小さな見出しであり、H3はさらに詳細なものです。
見出しを追加するには：
- Add panelを開く
- Typographyまでスクロールする
- headingをキャンバスにドラッグして配置する
クラス
個々の見出しごとにタイポグラフィのプロパティを設定する代わりに、CSSを使用してクラスを作成できます。クラスを使用すると、1つの見出しのスタイルを作成し、そのスタイルをサイト全体の他の見出しに適用できます。
クラスを作成するには：
- キャンバスで選択されていることを確認する
- Style panelのSelector fieldにクリックして入る
- クラスの名前を付ける（例：大見出し）
このクラスは、行ったスタイリングの変更を記憶します。フォントやウェイトを変更するかどうか、クラス（大見出し）はこれらの変更を記憶します。変更を取り消す場合は、そのプロパティをリセットできます。
クラスを再利用するには：
- 新しいheadingがキャンバスで選択されていることを確認する
- Style panelのSelector fieldにクリックして入る
- 再利用したいクラスの名前を入力し始める
- リストからクラスを選択する
これで、見出しを変更する際に（実際にはクラスをスタイリングしているため）、同じクラスを持つすべての見出しも変更されます。
Tags
タグを使用すると、見出し、段落、リンクなどのテキスト要素のデフォルトのスタイルを変更できます。タグまたはクラスに適用したスタイルの変更は、個々に更新する必要なく、関連するすべての要素に影響を与えます。HTML タグについて詳しく学ぶ。
タグにスタイルを適用するには：
- キャンバス上の任意のheadingを選択します
- Selector fieldにクリックして入ります（クラスを追加せずに）
- スタイルを適用したいtagをクリックします（例：All H1 Headings）
- フォントタイプ、色、ウェイトなどの設定を調整します。
ここで行うスタイルの変更は、そのタグを持つすべての要素に適用されます（例：すべての H1 見出し）。
テキストの塗りつぶし
テキストの塗りつぶしを使用すると、テキストの内部に色を適用するためにクリッピングが行われます。テキストの塗りつぶしは、デフォルトではフォントの色を使用します。
カスタムテキストの塗りつぶしを追加するには：
- Style panelにクリックして入ります
- Typography セクションまでスクロールします
- フォントの色を変更して、自動的にクラスを作成します
- Style panel内のSelector fieldにクリックして入り、そのクラスの名前を変更します（例：大きな見出し）
- Backgroundsまでスクロールし、Typeの横にグラデーションを設定します
- グラデーションバーの左端をダブルクリックして、最初のストップの色を選択します
- グラデーションバーの右端をダブルクリックして、第二のストップの色を選択します
- 角度(Angle)の横の円をクリックしてドラッグし、グラデーションの方向を調整します
- クリッピング(Clipping)の隣にあるドロップダウンをクリックし、背景をテキストにクリップ(Clip background to text)を選択します
グラデーションに変更を加えると、テキスト内のグラデーションがリアルタイムで更新されます。この方法を使用して、任意の背景を追加したり（または複数の背景を重ね合わせたり）することができます。背景がテキストにクリップされている場合、フォントの色を無視して、背景セクションの色が使用されます。
パラグラフとテキストの継承
親要素はテキストスタイル情報を子要素に伝達することができます。親要素にテキストスタイルを設定して、それを子要素に適用し、子要素の設定でこれらのスタイルをオーバーライドすることができます。
このテクニックは、bodyタグにグローバルなフォントスタイルを設定したり、セクション内のテキストや他の要素を整列させたり、デフォルトのリンクブロックスタイルをオーバーライドするためによく使用されます。
テキスト継承を使用するには：
- Body要素を選択します
- Style panelのSelector fieldにクリックして入ります
- Body (All pages) タグを選択します
- 好みに合わせて設定を調整します
Body (All Pages) タグは最上位のタグです。このタグ（フォントなど）に加えた変更は、すべてのテキストに伝達されます。これはサイトのデフォルトを設定するための優れた方法です。
デフォルトの継承スタイルをオーバーライドする
おそらく、段落のフォントをデフォルトのフォントとは異なるものにしたい場合があります。フォントにクリックすると、それがBody (All Pages) タグからの指針を受けているのがわかります。このフォント設定を変更すると、新しいクラスが適用されます。
クラスは、特定のプロパティをスタイリングするとすぐに自動的に作成されるものです。これがデフォルトの継承スタイルをオーバーライドする鍵です。スタイルプロパティアイコンのオレンジ色のインジケータは、そのプロパティに継承値があることを示しています。オレンジのテキストをクリックして、値がどこから継承されているかを確認できます。継承インジケータについて詳しく学ぶ。
デフォルトの継承スタイルをオーバーライドするには：
- スタイルを適用したい要素をクリックします。
- その要素のいずれかの設定を調整します（フォント、太さなど）。
- クラス名を変更するためにSelector fieldをクリックします（例：Special paragraph）。
これで、継承の階層全体を確認するためにクリックできるようになります。
スパン（Spans）
スパンは、個々の文字や単語など、テキスト要素の特定の部分にスタイルを適用するための書式オプションです。
スパンを使用するには：
- スタイルを適用したいテキストをハイライトします。
- Style panelのSelector fieldをクリックしてクラスを作成します。
- 好きなように設定を変更します（フォント、背景色など）。
スパンの書式をクリアするには：
- テキストをハイライトします。
- テキストツールバーのポップアップから**Clear formatting（書式をクリア）**をクリックします（Aのアイコンにxがついています）。
スパンとインラインテキストの書式設定について詳しく学ぶ。
単位（Units）
ウェブ上で使用される多くのテキストの単位はピクセルで設定されていますが、他にもいくつかのオプションがあります：
- Ems
- Rems（ルートems）
- パーセンテージ
- VW（ビューポートの幅）
- CH（文字ユニット）
Em
元々、emは大文字のMの幅に基づいていました。emは親要素に対して、フォントサイズを比例的にスケーリングするために使用されます。
例えば、フォントが16ピクセルの場合：
- 1 emは16ピクセル
- 2 emsは32ピクセル
- 1.5 emsは24ピクセル
また、段落の親要素（例えばDivブロック）でフォントサイズを設定することもできます：
- 親要素を選択します
- スタイルパネルのTypographyセクションでフォントサイズを変更します（例：20ピクセル）
親要素のフォントサイズが20ピクセルの場合：
- 1 emは今や20ピクセルです
- 2 emsは40ピクセル
- 3 ems — 60ピクセル
Rem（ルートem）
RemsはHTMLのフォントサイズに相対的です。
Remは、remの値をHTMLのフォントサイズ（ブラウザのフォントサイズを手動で変更しない限り、そのままになります）と乗算して計算されます。
これにより、ブラウザの設定（ブラウザのカスタムテキストサイズが設定されている場合）を尊重し、サイトの訪問者が快適な表示サイズに拡大することができる利点があり、アクセシビリティにも適しています。レスポンシブなテキストサイズにremsを使用する詳細を学ぶ。
パーセンテージ
emと同様に、パーセンテージは親要素のフォントサイズを指します。
VW（ビューポート幅）
VWは、ブラウザのビューポートの幅を測定し、ビューポートの幅に基づいて比例的にスケーリングされる測定単位です。
CH（文字ユニット）
CHは、段落や見出しのサイズを制限して、1行あたりの読む必要のある文字数を制限するのに適しています。
例えば、段落の最大幅が60chの場合、選択したフォント（段落の書体）を使用して、段落の境界（ボックス）を60のゼロの幅に設定します。
CHは、テキスト要素の幅を設定する際に使用することで、文字の数を制限するのに便利です（再び、フォントのゼロ文字の幅に基づいて）。
アクセシビリティと包括的なタイポグラフィ
ウェブデザインにおいて、アクセシビリティと包括的なデザインは重要な要素です。タイポグラフィに関するアクセシビリティと包括的なデザインを向上させるためのいくつかの簡単な方法を見てみましょう。
フォントの視認性
細いフォントは非常に読みにくいです。見出しでも読みにくいですが、特に段落内では読みづらさが増します。
また、フォント内の太さの配分が不均等な場合も同様で、一部の文字は読みにくいことがあります。
本文のフォントは16ピクセル以下にしてください。
テキストの整列
テキストが不揃いだど、読みにくく、ユーザー体験が悪くなる可能性があります。
たとえフォントが読みやすくても、文字がギザギザに並んでいると、読むのが大変です。
全て大文字
大文字と小文字を区別する言語は、多くの場合、センテンス・ケース（例：「Sentence case」）やタイトル・ケース（例：「Title Case」）で書いた方がはるかに読みやすくなります。基本的には、大文字を使う必要がある、あるいは使うことが予想される箇所でのみ大文字を使って文章を書き出します。
全て大文字のテキストは、読者にとって認知的負荷が増えることがあり、特に長い段落では難しくなります。スクリーンリーダーでは全ての大文字が個別の文字として発音され、流れが途切れて理解が難しくなります。長いテキストの文字列で全て大文字を使用しないことを検討してください。
下線付きテキスト
ウェブ上では、下線付きテキストはハイパーリンクを示すものとされています。強調を行いたい場合は、イタリック体や太字のテキストを使用するか、スパンでテキストを囲んでスタイルを変更することを検討してください。
強調を表すためにテキストに下線を引く代わりに（これはハイパーリンクと混同される可能性があります）、イタリック体（左）や太字（右）のテキストを使用してください。
色のコントラスト
コントラストは、背景と前景の違いの測定です。低いコントラストは、やや明るいグレーがやや暗いグレーに対して使用されるような場合です。または、栗色の文字が赤い背景に対して使用される場合です。または、紫色の文字がピンクの背景に対して使用される場合です。
高いコントラストは、フォントの太さなど他の要素を考慮しなくてもよいというわけではありません（高いコントラストを持つ超細いフォントでも背景との対比が高い場合、それは依然として非常に読みにくいです）。しかし、高いコントラストは通常、読みやすさを向上させることにつながります。これはWeb上で非常に重要なことです。
Webflowの組み込みカラーコントラストチェッカーを使用して、テキストと背景のコントラスト比を評価できます。また、以下の優れたカラーコントラストツールを使用して、デザインのカラーコントラストをチェックし、ベストプラクティスについて学ぶこともできます：
一行あたりの文字数
長い行のテキストは読者を混乱させ、疲れさせます — 目は左から右まで非常に遠くまで移動しなければなりません。コンテナを使用して、テキストがページを水平にどれだけ広がるかを制限します。一行あたりの文字数は60から80文字が推奨されています。
Stripeは、コンテナを使ってページ全体のコンテンツの範囲を制限することで、より読みやすくしています。
もしStripeがコンテナでテキストのスパンを制限しなければ、読みづらくなってしまいます。
前に説明したように、これを行う一つの方法は、テキスト要素の最大幅に、1行あたりの文字数を制限することです。覚えておいてください：60 CHは、選択したフォントにおいてゼロが60個並んだものと同じです。
行間の高さ（Line height）
適切な行間の高さを持つテキストは、非常に圧倒感が少なく、ページを水平方向や垂直方向に追跡するのが容易になります。
段落やテキストブロックの行間の高さは、少なくともフォントサイズの1.5倍以上であるべきです。
理想的な行の高さは、段落やテキスト・ブロックのフォント・サイズの少なくとも1.5倍であるべきです。
明確に定義されたリンク
リンクは意味があり、実行可能である必要があります。スクリーンリーダーはページ上のリンクの概要を訪問者に提供できます。リンクテキストが文脈から切り離されて読まれる場合、読者に以下の情報を提供する必要があります：
- リンクが何であるか
- リンクがどこへ連れて行くか
以下を行わないでください:
- "もっと見る"または "こちらをクリック" などの用語でリンクを埋め込む
- 生のURLをハイパーリンクとして使用する
以下を行ってください:
- リンクを明確で具体的な言葉で埋め込み、リンクが読者をどこへ連れて行くか、なぜそこへ行く必要があるかを伝える
- リンクテキスト内でPDFやビデオなどの高帯域幅メディアを開くかどうかを示す。
ナビゲーション
すべてのナビゲーションは、どのように見えるかだけでなく、スクリーンリーダーを使ってどのように操作できるかについてもテストする必要があります。これは、人々があなたのコンテンツをどのようにナビゲートできるかについて理解を深める方法です。
