Типографика

WCAG предлагает строки не длиннее 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, или из сервиса шрифтов. Веб-шрифты придают странице свой характер, но каждый из них приходится скачивать, что задерживает показ текста, а корейские, китайские и японские шрифты могут весить несколько мегабайт, потому что содержат тысячи глифов. Загружай столько начертаний, сколько нужно, и оставляй в списке хорошую замену.

Размер, насыщенность и высота строки

font-size задаёт размер; как объяснено в уроке о цвете и единицах, rem держит текст в согласии с настройками читателя. font-weight идёт от 100 (тонкий) до 900 (сверхжирный), где 400 обычный, а 700 жирный; ключевые слова normal и bold означают 400 и 700. У шрифта есть только те начертания, которые сделал его дизайнер, поэтому если попросить 300 у шрифта, где есть только 400 и 700, получишь ближайшее.

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 предлагает не больше 80 символов в строке (40 для китайского, японского и корейского). Проще всего добиться этого, задав абзацам max-width в единицах ch, например max-width: 65ch. text-align задаёт выравнивание: left (или start) легче всего читать в длинном тексте на языках с письмом слева направо, center подходит для коротких заголовков, а justify может создать неровные промежутки между словами.

Последние штрихи

text-transform: uppercase показывает текст заглавными буквами, не меняя HTML, поэтому в исходном коде сохраняется обычное написание, а стиль потом можно поменять в одном месте. MDN отмечает, что длинные куски заглавными некоторым людям, в том числе людям с дислексией, читать труднее, поэтому оставь это для коротких меток и добавь немного letter-spacing, например 0.08em. text-decoration рисует линии: underline, line-through или none, чтобы убрать подчёркивание ссылки (оставь другой признак того, что это ссылка). Читатели, которым нужно больше места, могут переопределить твои интервалы; WCAG 1.4.12 требует, чтобы страницы работали и при высоте строки 1.5, межбуквенном интервале 0.12em, интервале между словами 0.16em и интервале между абзацами 2em, поэтому избегай блоков с фиксированной высотой, которые обрезали бы текст.