この投稿はWebflow社が提供する「Advanced web typography」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/advanced-typography-styles
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
検索エンジンとUXを考慮して、テキストをスタイリングします。
タイポグラフィは、コンテンツの可読性を高め、情報の階層を明確にし、ブランドのアイデンティティを確立するなど、ウェブサイトにおいて多くの役割を担っています。
レッスン概要
見出しは、コンテンツのガイドガイド役です。誰でも見出しを見れば、コンテンツの概要と構成がわかるようにする必要があります。
ブログを想像してください。この場合、H1はそのページの一番大きな文字（目的）です。H2は、その大きな文に合わせたサイズの小さな見出しで、H3はさらに細かい見出しです。
見出しを追加する方法
個々の見出しにもCSS を使用してクラスを作成し、スタイリングすることができます。クラスを使用すると、1つの見出しに対してスタイルを作成し、そのスタイルをサイト全体の他の見出しに適用することができます。
クラスの作成方法
このクラスは、スタイリングの変更のすべて記憶します。フォントやウェイトを変更すると、このクラス（H1）はその変更を記憶します。もし、変更を削除したい場合は、その設定をリセットすることができます。
クラスの再利用方法
クラスを再利用した見出しのスタイルを変更すると、同じクラスを持つすべての見出しも変更されます。
タグを使用すると、見出し、パラグラフ、リンクなどのテキスト要素のデフォルトのスタイルを変更することができます。タグやクラスに適用したスタイルの変更は、関連するすべての要素に反映され、個別に更新する必要はありません。HTMLタグについて詳しくは、こちらをご覧ください。
タグのスタイリング方法
ここで変更したスタイルは、そのタグを持つすべての要素に適用されます。
テキストの塗りつぶしは、クリッピングを利用してテキストに色をつけます。テキストフィルは、デフォルトではフォントカラーを使用します。
テキストフィルを設定する方法
グラデーションに変更を加えると、リアルタイムにテキスト要素内が変更されます。この方法を使えば、どんな背景も置くことができ、複数の背景を重ねることもできます。背景がテキストにクリッピングされると、フォントカラーは無視され、バックグラウンドセクションにあるカラーが使用されます。
パラグラフのフォントをデフォルトのフォントと違うものにしたい場合の方法を解説します。タイポグラフィセクションの「font」をクリックすると、Body（ALL Pages）タグの設定を引きついていることが分かります（その要素の上位要素から継承されている場合もあります）。このフォントの設定を変更すると、新しいクラスが作られると共に、変更した設定がその要素に適用されます。
クラスは、特定のプロパティにスタイルを設定した瞬間に、自動的に作成されます。これが、デフォルトの継承スタイルを上書きするということです。スタイルプロパティのアイコンにあるオレンジ色の印は、そのプロパティに継承された値があることを意味します。オレンジ色のテキストをクリックすると、その値がどこから継承されているかを確認できます。継承インジケータの詳細については、こちらをご覧ください。
デフォルトの継承スタイルを上書きする方法
スパンは、個々の文字や単語など、テキスト要素の特定の部分にスタイルを設定するための書式オプションです。
スパンの使い方
スパンを解除する方法
ウェブで使われるタイポグラフィの単位の多くはピクセルで設定されていますが、それ以外にもさまざまな選択肢があります。
エム（em）はもともと書体の大文字のMの幅を基準にした単位でした。emは親要素のフォントサイズを参照して値に応じて、対象のフォントサイズを比例させます。
例えば、フォントサイズが16pxの場合のemは下記の通りになります。
また、Divブロックのようなパラグラフの親要素にフォントサイズを設定することもできます。
親要素のDivブロックが20pxの時のemは下記の通りになります。
レム（rem）は HTMLのフォントサイズに対する相対値です。
remは、remの値にHTMLのフォントサイズを乗じて計算されます。
これは、ブラウザの設定を基準とし（ブラウザでカスタムテキストサイズが設定されている場合はそれを参照。デフォルトは16px。）、サイト閲覧者に合わせてサイトをより快適な表示サイズに拡大できるという利点があり、アクセシビリティの観点からも好ましいとされています。
emと同様、パーセンテージは親要素のフォントサイズを参照します。
VWは、ブラウザのビューポートの幅に比例して拡大縮小されるフォントサイズの単位です。
CHは、パラグラフや見出しなど、1行に収まらせなければならない文字数を制限するための設定に最適です。
たとえば、パラグラフの最大横幅が60CHの場合、パラグラフをいれているボックスの横幅いっぱいに文字を入力した際に、60文字分（正確には「0」60文字分）が入り切るようにフォントサイズを設定します。（ただし、CHは半角数字「0」を1CHとしているため、全角だと文字数が合わないことがあります。ご注意ください。）
つまり、CHでは1行の文字数を制限したい場合に、ボックスの幅に合わせて文字の大きさを制限することができます。
アクセシビリティとインクルーシブデザインは、ウェブデザインの際に考慮すべき重要な要素です。タイポグラフィに関して、ウェブをよりアクセシブルでインクルーシブなものにするためにやるべきことをいくつか見てみましょう。
薄いフォントは、見出しだけでなく、特にパラグラフの中で非常に読みにくいです。
フォントのウェイトが不均一な場合も読みづらさを助長するので、これもお勧めしません。
また、特別な事由が無い限り、本文のフォントサイズは16px以下にしましょう。
なお、本文の最小フォントサイズは14pxがおすすめです。それ以上小さくすると、人によっては読みづらいサイズになってしまいます。近年では、フォントサイズを下げて、余白を作るようなデザインも流行っていますが、やりすぎると、読みづらいサイトとなり本末転倒ですので気を付けましょう。
テキストの塊に不均一な垂直方向の配置があると（テキストが中央に配置されている場合など）、読みにくさが生じます。ギザギザの配置は、読者が行から行へとたどるのが難しくなります。
モバイルデザインでは、本文を中央ぞろえにする風潮が日本にはありますが、個人的には一パラグラフあたりの行数が増えるモバイル時のデザインこそ、左ぞろえで表示するべきだと思います。
たとえ読みやすいフォントであっても、文字がギザギザに配置されていると、読者は次の行を追うことができません。
ウェブ上では、下線付きのテキストはハイパーリンクを示すと考えられています。単にテキストを強調したい場合は、斜体や太字のテキストを使用することを検討してください（スパンで区切ることで、パラグラフの一部のテキストのスタイルを変更できます）。
強調するためにテキストに下線を引くのではなく（ハイパーリンクと混同されることがあります）、斜体または太字を使用します。
コントラストとは、背景と内容の色の差のことです。コントラストが低いとは、やや暗いグレーの背景にやや明るいグレーのテキストを載せるようなものです。または、赤の上に茶色を載せたり、ピンクの上に紫色を載せるようなものです。
コントラストが高いからといって、フォントの太さなど他のことを考慮しなくていいわけではありません（背景に対してコントラストが高くても、かなり細いフォントは、やはり読みにくいです）。しかし、コントラストが高いということは、通常、可読性を高めることにつながり、ウェブ上では素晴らしいことです。
Webflowに内蔵されているカラーコントラストチェッカーを使って、背景に対するテキストのコントラスト比をアセスメントすることができます。また、これらの優れたカラーコントラストツールを使用して、デザインのカラーコントラストをチェックし、ベストプラクティスについて学ぶことができます。
長い一文は、読み手を混乱させ、疲れさせます。読み手の目は、左から右へ大きく移動しなければなりません。パラグラフが左右に長くなると、読者は混乱し、疲れてしまいます。1行の文字数は30～40文字程度を目安にするとよいでしょう。
こうした制限を掛けるときに有効なのが「CH」です。例えば、1行の文字数を全40文字に収めたい場合は、パラグラフ自体の横幅のサイズを80CHにすることでボックスの横幅いっぱいにテキストを入力した場合に、全角40文字に収めることができます。（ただし、CHは半角数字「0」を1CHとしているため、全角だと文字数が合わないことがあります。ご注意ください。）
ラインハイト
適切な行の高さを持つテキストは、サイト閲覧者にページ全体を見通してもらうのに非常に有効です。
パラグラフやテキストブロックの行の高さは、フォントサイズの少なくとも1.5倍が適正です。
リンクは、そのテキストにリンクが貼られていることをサイト閲覧者が認識できるものでなければなりません。
また、スクリーンリーダーは、訪問者にページ上のリンクについて次のことを伝えることができます。
下記は非推奨です。
リンク先がどこなのか、なぜそこへ行くのかがわかるような、明確で具体的な表現でリンクを貼ることが重要です。
PDFやビデオなどの高帯域幅のメディアを開く場合は、リンクのテキストでそれを明示しましょう。
すべてのナビゲーションは、どのように見えるかだけでなく、スクリーンリーダーを使ってどのように操作できるかをテストする必要があります。これは、人々がコンテンツをどのようにナビゲートできるかを理解するための推奨事項です。
いかがでしょうか。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営