タイポグラフィ

WCAG は、1 行を 80 文字以内に、段落の中の行間を少なくとも 1.5 にすることをすすめています。この二つは CSS のプロパティで調整できます。

フォントを選ぶ

font-family には、コンマで区切ったフォントのリストを書きます。ブラウザーは、読者の端末で使える最初のフォントを使い、なければリストの次へ進みます。リストの最後にはかならず総称ファミリー（serif、sans-serif、monospace、system-ui）を書きましょう。そうすれば、何がインストールされていても無難な文字が表示されます。空白をふくむフォント名は、"Noto Sans KR" のように引用符で囲みます。system-ui はオペレーティングシステムの画面用フォントを使います。よくデザインされていて、すでに端末に入っており、多くの文字体系に対応しています。

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;          /* 16px unless the reader changed it */
  line-height: 1.6;         /* unitless: 1.6 times the font size */
  color: #222;
}
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
p  { max-width: 65ch; }     /* keeps lines a readable length */
.label { text-transform: uppercase; letter-spacing: 0.08em; }

@font-face ルールで自分のサーバーからフォントファイルを読み込んだり、フォントサービスから読み込んだりすることもできます。Web フォントはページに独自の雰囲気を与えますが、一つひとつがダウンロードなので文字の表示が遅れます。韓国語、中国語、日本語のフォントは何千もの字形をふくむため、数メガバイトになることもあります。読み込む太さは必要な数だけにし、リストにはよい代わりのフォントを残しておきましょう。

サイズ、太さ、行の高さ

font-size は大きさを決めます。「色と単位」の単元で説明したように、rem を使うと文字が読者の設定に合わせて変わります。font-weight は 100（細い）から 900（極太）まであり、400 がふつう、700 が太字です。キーワード normal と bold は 400 と 700 を表します。フォントにはデザイナーが作った太さしかないので、400 と 700 しかないフォントで 300 を指定すると、いちばん近い太さになります。

line-height は行と行の間隔を決めます。1.6 のように単位のない数だけを指定しましょう。すると、それぞれの要素のフォントサイズの 1.6 倍という意味になり、見出しにも小さな注記にも、それぞれに合った行間がつきます。24px のように単位つきの値は一度だけ計算され、固定の長さとして継承されるので、大きな見出しには狭すぎます。本文はふつう 1.4 から 1.7 のあいだが読みやすく、WCAG の達成基準 1.4.8 は段落の中で少なくとも 1.5 をすすめています。大きな見出しは 1.1 から 1.3 くらいに詰めたほうがきれいに見えます。

行の長さと文字そろえ

とても長い行は疲れます。次の行の頭にもどるとき、目がどこを読んでいたかわからなくなるからです。WCAG 1.4.8 は、1 行を 80 文字以内（中国語、日本語、韓国語は 40 文字以内）にすることをすすめています。これを守らせる簡単な方法は、段落に ch 単位で max-width を指定することです。たとえば max-width: 65ch とします。text-align は文字そろえを決めます。左から右へ書く言語の長い文章では left（または start）がいちばん読みやすく、center は短い見出しに向いています。justify は単語のあいだにふぞろいなすき間ができることがあります。

ちょっとした仕上げ

text-transform: uppercase は、HTML を変えずに文字を大文字で表示します。ソースはふつうのつづりのままなので、あとでスタイルを一か所で変えられます。MDN によると、大文字が長く続く文は、ディスレクシアの人をふくむ一部の人にとって読みにくくなります。短いラベルだけに使い、0.08em のように少し letter-spacing をつけましょう。text-decoration は線を引きます。underline、line-through、またはリンクの下線を消す none です（消すなら、リンクだとわかる別の目印を残しましょう）。もっと間隔が必要な読者は、あなたの指定を上書きすることがあります。WCAG 1.4.12 は、行の高さ 1.5、文字間隔 0.12em、単語間隔 0.16em、段落の間隔 2em にしてもページが使えることを求めています。文字が切れてしまう高さ固定のボックスは避けましょう。