Типографика и цвет

Типографика — правила набора, при которых текст легко читать: шрифт, размер, интерлиньяж и ширина строки. Цвет текста и фона проверяют по контрасту WCAG.

Текст это интерфейс

Большая часть любого сайта это текст, и от того, как он набран, зависит, дочитают ли до конца. Типографика вовсе не про красоту: это правила, по которым текст перестаёт мешать читать. Несколько слов, которыми мы будем пользоваться:

• гарнитура (typeface): семейство шрифтов вроде Georgia; шрифт это её конкретное начертание (жирное, курсив);
• кегль: размер букв;
• интерлиньяж: расстояние между строками (в CSS line-height);
• мера: длина строки в знаках;
• засечки (serif): маленькие «ножки» у букв в одних шрифтах; шрифты без них называют гротесками (sans-serif).

Размер, интерлиньяж и мера

Три числа, которые делают текст читаемым:

• Размер основного текста от 16 пикселей (1rem и больше). Меньше нельзя: на телефоне читатель будет увеличивать пальцами. Многие берут 1.125rem (18px).
• Интерлиньяж 1,4–1,7 от размера букв, и задавайте его числом без единиц: line-height: 1.6. Тогда он растёт вместе с текстом. У заголовков он меньше, около 1,2: короткие строки не нуждаются в воздухе.
• Ширина строки 45–75 знаков. Роберт Брингхерст в «Основах стиля в типографике» называет идеалом 66. Слишком длинная строка теряет читателя на возврате, слишком короткая рвёт фразу. В CSS это max-width: 65ch (единица ch ширина нуля в текущем шрифте, то есть приблизительно знак).

Покрутите ползунки на схеме. Это ваш собственный текст.

Размер: 18px Интерлиньяж: 1.60 Ширина строки: 65ch

С засечками (Georgia) Без засечек (system-ui)

Пятнадцать лет измеряю землю и объясняю суду, где на самом деле проходит граница. Сначала инженер, потом юрист: поэтому вижу спор и в координатах, и в законе. Хорошая строка читается без усилий: глаз не теряет начало следующей.

Строка 65 знаков: комфортная: от 45 до 80 знаков. Интерлиньяж: хорошо: примерно от 1,4 до 1,7.

Контраст текста и фона

Цвет текста Цвет фона

Аа #4a5560 на #ffffffАа #8a8f94 на #ffffffАа #1f2a33 на #f6f4eeАа #ffffff на #2b7a84Аа #e8ecf2 на #11161d

Так выглядит обычный текст этой пары цветов, а ниже крупный.

Крупный текст

Контраст: 7.61 к 1. Обычный текст: AA проходит, AAA проходит. Крупный текст (от 24px, или от 19px жирным): AA проходит, AAA проходит.

Проверьте себя: почему интерлиньяж задают числом без единиц?

Число без единиц умножается на размер шрифта элемента, поэтому интерлиньяж растёт и сжимается вместе с текстом. Значение в пикселях осталось бы прежним.

Шрифты

Шрифт задаётся списком: font-family: Georgia, "Times New Roman", serif;. Браузер берёт первый, который есть у читателя, а если нет ни одного, обращается к последнему пункту, общему семейству (serif, sans-serif, monospace или system-ui, шрифт самой системы). Последнее нужно всегда: иначе текст останется без шрифта.

В 1990-х на всех компьютерах было несколько одинаковых шрифтов (Arial, Times, Courier), и авторы пользовались только ими, поэтому их называли «безопасными». Georgia и Verdana нарисовал в 1996 году Мэттью Картер специально для экрана, и они оставались любимцами веба десять лет.

Сегодня можно подключить любой шрифт через @font-face:

@font-face {
  font-family: "Литера";
  src: url("litera.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

Что здесь важно для русского сайта:

• кириллица: в шрифте должны быть русские буквы, иначе вместо них подставится запасной шрифт, и текст станет «лоскутным». Проверяйте набор знаков до выбора;
• woff2: сжатый формат, который понимают все современные браузеры;
• font-display: swap: пока файл не загрузился, показывается запасной шрифт, а потом заменяется. Иначе до загрузки текста не видно (а вы помните про белый экран из первой части);
• unicode-range позволяет загружать только нужные знаки, например кириллицу;
• свои файлы, а не чужой сервер: подключение шрифтов с Google Fonts означает запрос к стороннему серверу при каждом посещении, что для российских сайтов связано и со скоростью, и с правом на обработку данных (подробнее в части 15). Файл рядом с сайтом работает быстрее и независимо.

В нашем предпросмотре сети нет, поэтому шрифты в упражнении системные. Это не потеря: хороший системный набор (Georgia, system-ui) выглядит отлично и не весит ни байта.

Проверьте себя: зачем в конце font-family общее семейство вроде serif?

Чтобы у текста всегда был шрифт: если нет ни одного из перечисленных, браузер возьмёт любой подходящего вида.

Цвет

Цвет в CSS можно записать несколькими способами, и все они означают одно и то же:

• #1d5c63: hex, шестнадцатеричная запись, самая распространённая;
• rgb(29 92 99): доли красного, зелёного и синего;
• hsl(186 55% 25%) это оттенок (угол на цветовом круге), насыщенность, светлота. Удобнее для подбора: чтобы получить оттенок темнее, меняют третье число;
• oklch(45% 0.07 200) это современная запись, в которой светлота «честная»: одинаковые числа светлоты выглядят одинаково светлыми. Её понимают все современные браузеры; она хороша для палитр.

Цветов в палитре много не нужно. Хватит четырёх ролей: текст, фон, поверхность (карточки, шапка) и акцент (кнопка, ссылка), плюс нейтральные. Три оттенка хорошо, пять много.

Контраст

Контраст это отношение яркости текста к яркости фона. Он меряется числом от 1 (одинаково) до 21 (чёрное на белом), и стандарт WCAG требует для уровня AA:

• 4,5 к 1 для обычного текста;
• 3 к 1 для крупного (от 24px, или от 18,66px жирным) и для значков и рамок полей;
• уровень AAA строже: 7 к 1 и 4,5 к 1.

На глаз контраст оценить нельзя: пара #767676 на белом проходит (4,54), а #777777 нет (4,48), хотя вы их не различите. Поэтому считайте. Самая частая ошибка доступности в сети, по ежегодному исследованию WebAIM, это светло-серый текст на белом. Калькулятор на схеме выше поможет подобрать пару.

И ещё: не передавайте смысл одним цветом. Примерно каждый двенадцатый мужчина по-другому различает красный и зелёный; «обязательные поля отмечены красным» для него не работает. Добавляйте звёздочку или подпись.

Проверьте себя: каков минимальный контраст обычного текста по WCAG AA?

4,5 к 1. Для крупного текста достаточно 3 к 1.

Практика

Ваша страница 2005 года из прошлого урока: две колонки на float. Нужно сделать текст читаемым: размер, интерлиньяж, мера и контраст. Шрифт выбирайте по тону проекта: для делового тона засечки в заголовках, для смелого гротеск покрупнее. Главное: чтобы после ваших правок проверки по контрасту прошли.

Цвета записывайте как удобно: hex, rgb() или hsl(). Если вы хотите попробовать oklch(), его тоже понимает браузер, но проверка контраста в упражнении умеет читать только привычные записи, и нестандартный формат вызовет сообщение об неизвестном цвете.

Что было не так с 2005 годом

Текст набирали мелко: Verdana в 10–11px считалась нормой, потому что экраны были маленькие, и каждый пиксель берегли. Серый на сером выглядел утончённо. Заголовки и логотипы часто делали картинками, чтобы получить любимый шрифт, и тогда их не мог прочитать ни диктор, ни поисковик, а увеличить значило получить размытую картинку. Обо всём этом вам напомнят тесты на контраст.