ウェブサイトでのタイポグラフィは多くの目的を果たします。コンテンツを読みやすくし、情報の階層を明確にし、ブランドのアイデンティティを確立します。
このレッスンでは、以下について学びます:
検索エンジンとアクセシビリティを考慮してテキストをフォーマットします。
ウェブサイトでのタイポグラフィは多くの目的を果たします。コンテンツを読みやすくし、情報の階層を明確にし、ブランドのアイデンティティを確立します。
このレッスンでは、以下について学びます:
見出しはコンテンツガイドと考えてください — 誰でも見出しを一目見ただけでコンテンツの構造を理解できるようにするため、見出しは明確で記述的であり、コンテンツの階層を伝えるために使用することが重要です。明確で記述的な見出しの書き方について詳しく学びましょう。
新聞の一面を想像してみてください。この文脈では、H1はページ上の大きな声明(目的)です。H2はその大きな見出しの中に入る小さな見出しで、H3はさらに詳細な見出しです。
見出しを追加するには:
個々の見出しのためにタイポグラフィのプロパティを設定する代わりに、CSS を使用してクラスを作成できます。クラスを使用すると、1 つの見出しのスタイルを作成し、サイト全体の他の見出しにそのスタイルを適用できます。
クラスを作成するには:
このクラスは、行ったすべてのスタイリング変更を記憶します。フォントを変更したり、太さを変更したりすると、このクラス(大きい見出し)もこれらの変更を記憶します。変更を取り消す場合、そのプロパティをリセットできます。
クラスを再利用するには:
これで、見出しを変更すると、実際にはクラスをスタイル設定しているため、同じクラスを持つすべての見出しも変更されます。
タグを使用すると、見出し、段落、リンクなどのテキスト要素のデフォルトのスタイリングを変更できます。タグまたはクラスに適用するスタイルの変更は、個々に更新する必要がなく、関連するすべての要素に影響を与えます。
タグにスタイルを適用するには:
ここで行ったスタイルの変更は、そのタグを持つすべての要素に適用されます(例:すべての H1 見出し)
タイポグラフィオプションを選択する方法について詳しく学ぶには、Webflow ブログの Web Typography 101 をチェックしてください。
テキストの塗りつぶしは、テキストの内部に色を適用するためにクリッピングを使用します。テキストの塗りつぶしは、デフォルトではフォントの色を使用します。
カスタムテキストの塗りつぶしを追加するには:
グラデーションに変更を加えると、テキスト内がリアルタイムで更新されます。この方法を使えば、どんな背景でも(複数の背景を重ねても)配置できます。背景がテキストにクリップされると、フォントカラーは無視され、Backgroundsセクションのカラーが使用されます。
親要素はテキストのスタイル情報を子要素に伝えることができます。親要素にテキストスタイルを設定し、これらのスタイルを子要素の設定で上書きすることができます。
このテクニックは、ボディタグにグローバルなフォントスタイルを設定したり、セクション内のテキストや他の要素を配置したり、デフォルトのリンクブロックスタイルを上書きしたりするためによく使用されます。
テキストの継承を使用するには:
本文(全ページ)タグは最上位のタグです。このタグへの変更(フォントなど)は、すべてのテキストに反映されます。これは、サイトのデフォルトを設定するのに最適な方法です。
おそらく、段落のフォントをデフォルトのフォントと異なるものにしたいと考えているかもしれません。フォントにクリックすると、それが「Body(すべてのページ)」タグからの情報を受けているのがわかります。このフォント設定を変更すると、新しいクラスが適用されます。
特定のプロパティをスタイル設定すると、その瞬間にクラスが自動的に作成されるため、これがデフォルトの継承スタイルを上書きする鍵です。スタイルプロパティアイコンに表示されるオレンジ色のインジケータは、そのプロパティに継承された値があることを意味します。オレンジ色のテキストをクリックして、値がどこから継承されているかを確認できます。。
デフォルトの継承スタイルを上書きするには:
これで、継承の階層全体を確認できるようになります。
スパンは、テキスト要素の特定の部分、例えば個々の文字や単語などをスタイル設定するための書式オプションです。
スパンを使用するには:
スパンの書式設定をクリアするには:
ウェブで使われるタイポグラフィの単位の多くはピクセルで設定されているが、他にも多くの選択肢がある:
Emsは元々、書体の大文字Mの幅に基づいていました。Emsは親要素を見て、フォントサイズを比例して拡大縮小します。
したがって、フォントが16ピクセルの場合:
また、段落の親要素、例えばDivブロックにフォントサイズを設定することもできます:
親要素が20ピクセルの場合:
RemsはHTMLフォントサイズに対して相対的です。
Remは、Remの値を取り、HTMLフォントサイズに乗じて計算されます(コードで手動で変更しない限り、ブラウザのフォントサイズを尊重します)。
これにより、ブラウザの設定に従う(ブラウザでカスタムテキストサイズが設定されている場合)と、サイト訪問者が快適な表示サイズに拡大できる利点があり、アクセシビリティ向上に適しています。レスポンシブテキストサイズにRemsを使用する詳細を学ぶ。
Emsと同様に、パーセンテージは親要素のフォントサイズを参照します。
VWはブラウザのビューポートの幅を測定し、ビューポートの幅に比例して拡大縮小します。
CHは、1行あたりの読むべき文字数を制限するために、段落や見出しのような要素のサイズを調整するのに適しています。
例えば、段落の最大幅が60chの場合、選択したフォント(段落の書体)を取り、段落の境界(そのボックス)を60のゼロの幅に等しく設定します。
CHを使用すると、文字の幅(フォントのゼロ文字の幅に基づく)を制限しようとする場合に、テキスト要素の幅を設定できます。
アクセシビリティとインクルーシブデザインは、ウェブデザインをする際に考慮すべき重要な要素です。タイポグラフィに関して、ウェブをよりアクセシブルでインクルーシブにするための簡単な方法をいくつか見てみよう。
見出しだけでなく、特に段落では、細いフォントは非常に読みにくい。
これはフォントのウェイト配分が不均等な場合も同様で、一部の文字はあまり読みやすくない。
本文のフォントは16ピクセル以下にしてください。
テキストの塊の垂直方向の揃えが不揃いだと(例えばテキストを中央揃えにした場合)、読みにくい文章になります。ギザギザの配置は、読者が行から行へとたどるのを困難にする。
フォントが読みやすくても、文字がギザギザに並んでいると、読者は次の行を追うのが大変です。
大文字と小文字を区別する言語は、多くの場合、センテンス・ケース(例:「Sentence case」)やタイトル・ケース(例:「Title Case」)で書いた方がはるかに読みやすくなります。基本的には、大文字を使う必要がある、あるいは使うことが予想される箇所でのみ大文字を使って文章を書き出します。
全角文字は、特に長い段落では、読み手にとってより重い認知的負荷をもたらす可能性があります。スクリーン・リーダーは大文字を個々の文字として認識するため、流れが妨げられ、理解しづらくなります。長い文字列では、全角文字の使用を制限することを検討しましょう。
全角文字は読み手にとってより重い認知的負荷となる可能性があります。長い文字列では全角文字の使用を制限することを検討してください。
ウェブ上では、下線付きのテキストはハイパーリンクを示すと考えられています。強調したい場合は、イタリック体や太字のテキストを使用することを検討してください(または、スパンで囲むことでスタイルを変更することもできます)。
強調するためにテキストに下線を引く(ハイパーリンクと混同される可能性がある)代わりに、イタリック体(左)または太字テキスト(右)を使用する。
コントラストとは、背景と前景の差の測定である。コントラストが低いとは、やや暗いグレーにやや明るいグレーのようなものだ。あるいは赤にマルーン。あるいはピンクに紫。
Colorableによる2色のコントラスト結果。左は薄紫の背景に濃い紫のテキスト。比率は7.06:1で、WCAGガイドラインに基づく評価はAAA。右側は、薄い紫色の背景に紫色のテキストで、比率は2.39:1。
コントラストが高いからといって、フォントの太さなど他のことを考慮しなくなるわけではありません(背景に対してたまたまコントラストが高い超細いフォントは、それでも超読めません)。しかし、コントラストを高くすることは、通常、可読性を高めることにつながり、ウェブでは素晴らしいことです。
Webflowに内蔵されているカラーコントラストチェッカーを使って、背景に対するテキストのコントラスト比を評価することができます。また、これらの優れたカラーコントラストツールを使用して、デザインのカラーコントラストをチェックし、ベストプラクティスについて詳しく学ぶこともできます:
長い行のテキストは読み手を混乱させ、疲れさせます。コンテナを使って、テキストがページの横方向にどこまで広がるかを制限しましょう。1行あたり60文字から80文字が推奨されます。
Stripeは、コンテナを使ってページ全体のコンテンツの範囲を制限することで、より読みやすくしている。
もしStripeがコンテナでテキストのスパンを制限しなければ、すぐに読みづらくなってしまうだろう。
先に説明したように、これを行う1つの方法は、テキスト要素の最大幅に制限を設け、1行に必要な文字数を設定することです。覚えておいてほしいのは、60CHはどんなフォントを選んだとしても、60個のゼロに等しいということだ。
適度な行の高さのあるテキストは、圧迫感を与えず、ページをまたいだり、下に移動したりしやすくなる。
段落やテキストブロックの行の高さは、フォントサイズの1.5倍以上にしてください。
理想的な行の高さは、段落やテキスト・ブロックのフォント・サイズの少なくとも1.5倍であるべきです。
リンクは意味があり、実行可能である必要があります。スクリーンリーダーはページ内のリンクの概要を訪問者に提供できます。リンクテキストが文脈から切り離されて読み上げられる場合、読者に次の情報を提供するべきです:
してはいけないこと:
行うべきこと:
ページ内の役立たないリンクをスクリーンリーダーがアナウンスする例については、WebflowのAdvanced web typographyビデオレッスンのリンクセクションをご覧ください。詳細なリンクについての情報は、WebAIMのハイパーテキストリンクの記事を参照してください。
ナビゲーション全体を、見た目だけでなく、スクリーンリーダーを使用してどのように対話できるかをテストする必要があります。これは、人々がコンテンツをどのようにナビゲートできるかを理解する素晴らしい方法です。
Webflow Universityでは、アクセシビリティと包括的なデザインに関する情報がますます増えていますので、定期的にチェックしてください!
一方、サイトをよりアクセスしやすくするためのレッスンをご覧いただくか、アクセシビリティコースに登録してみてください。