Читаемый интерфейс держится на нескольких правилах: ограниченная шкала размеров шрифта, строка не длиннее 50–75 знаков, межстрочный интервал около 1,5 для основного текста и шрифт с качественной кириллицей. Цвет распределяется по ролям — нейтральные, фирменный, акцентный и смысловые — и проверяется на контраст: по WCAG не меньше 4,5:1 для обычного текста и 3:1 для крупного текста и элементов управления. Смысл никогда не передаётся одним только цветом.
После материала вы сможете
- собрать шкалу из 5–6 размеров шрифта и закрепить за каждым роль
- ограничить строку основного текста 50–75 знаками и задать межстрочный интервал около 1,5
- распределить цвета по ролям — нейтральные, фирменный, акцентный, смысловые — и проверить контраст по WCAG: 4,5:1 для текста, 3:1 для крупного текста и элементов управления
- проверить шрифт на качество кириллицы и наличие казахских букв
Что знать заранее
Содержание
Шкала шрифтов: меньше размеров — больше порядка
Типографика в интерфейсе — это не выбор «красивого шрифта», а система: какие размеры существуют, для чего каждый и как они соотносятся. Когда размеры подбирают под каждый блок отдельно, на сайте появляется десяток почти одинаковых заголовков, и иерархия рассыпается. Решение — шкала: небольшой набор размеров, каждый из которых получает свою роль.
Крупный заголовок
- Размер
- 48–64 px
- Где используется
- Первый экран, главный оффер
Заголовок раздела (H2)
- Размер
- 32–40 px
- Где используется
- Начало каждой смысловой секции
Подзаголовок (H3)
- Размер
- 20–24 px
- Где используется
- Карточки, подразделы, названия услуг
Основной текст
- Размер
- 16–18 px
- Где используется
- Описания, статьи, формы
Мелкий текст
- Размер
- 13–14 px
- Где используется
- Подписи, сноски, служебная информация
Длина строки и межстрочный интервал
Слишком длинную строку тяжело читать: глаз теряет начало следующей строки. Слишком короткая рвёт фразу на куски. Baymard Institute по итогам своих исследований рекомендует для основного текста 50–75 знаков в строке. Руководство WCAG в критерии 1.4.8 (уровень AAA) задаёт ширину не больше 80 знаков, межстрочный интервал внутри абзаца — не меньше полуторного и запрет на выравнивание текста по ширине.
50–7550–75
знаков в строке основного текста — рекомендация Baymard
8080
знаков — верхняя граница ширины строки в WCAG 1.4.8
1,51,5
межстрочный интервал внутри абзаца по WCAG 1.4.8
- Ограничьте ширину текстового блока: в CSS удобно задавать её в единицах ch, привязанных к ширине символа шрифта
- Основному тексту — интервал около 1,5, крупным заголовкам — плотнее, примерно 1,1–1,25: иначе строки заголовка разваливаются
- Выравнивайте текст по левому краю: выравнивание по ширине создаёт неровные просветы между словами
- Между абзацами оставляйте заметный отступ — он работает как пауза в речи
Пара шрифтов и качество кириллицы
Для большинства интерфейсов достаточно одного шрифта в нескольких начертаниях или пары: акцентный для заголовков и спокойный, хорошо читаемый для текста. Nielsen Norman Group советует сужать выбор, понимая классификацию шрифтов, отдавать предпочтение гарнитурам с несколькими начертаниями и хорошо различимыми знаками и сочетать их, думая о единстве стиля и читаемости.
Для сайтов в Казахстане добавляется проверка, о которой часто забывают: кириллица. Многие популярные шрифты проектировались вокруг латиницы, а русские буквы в них дорисованы позже и заметно уступают по качеству. Казахских букв может не оказаться вовсе — и браузер подставит их из другого шрифта, так что слово будет выглядеть «склеенным» из разных гарнитур.
- В шрифте есть все русские и казахские буквы: ә, ғ, қ, ң, ө, ұ, ү, һ, і
- Кириллица нарисована с той же тщательностью, что и латиница: проверьте «ж», «ф», «ы», «д», «л» в сплошном тексте
- Есть нужные начертания: обычное, полужирное и, если он нужен, настоящий курсив, а не наклонённый прямой
- Цифры читаются однозначно: «1», «7» и «l» не путаются в ценах и телефонах
- Шрифт проверен на реальном тексте сайта, а не на образце из каталога
Роли цвета: нейтральные, бренд, акцент, смысл
Палитра интерфейса — это не набор понравившихся оттенков, а распределение обязанностей. Каждый цвет отвечает на вопрос «зачем он здесь». Если фирменный цвет одновременно и фон шапки, и кнопка, и ссылка, и плашка «новинка», он перестаёт что-либо значить.
- 01НейтральныеФоны, текст, рамки, разделители — большая часть экрана
- 02ФирменныйУзнаваемость: логотип, крупные плоскости, иллюстрации
- 03АкцентныйГлавное действие: кнопка записи, оформления заказа, отправки
- 04СмысловыеСостояния: ошибка, успех, предупреждение, информация
Контраст и доступность: что требует WCAG
WCAG — руководство W3C по доступности веб-контента — задаёт измеримые требования к контрасту. Коэффициент 4,5:1, как поясняет web.dev, выбран потому, что компенсирует потерю контрастной чувствительности, типичную для людей со сниженным зрением. Это минимум: светло-серый текст на белом фоне, который так любят в «воздушных» макетах, часто его не проходит.
Обычный текст
- Минимум (уровень AA)
- 4,5:1
- Критерий WCAG
- 1.4.3 Контраст (минимальный)
Крупный текст: от 18 pt (около 24 px) или от 14 pt полужирного (около 18,5 px)
- Минимум (уровень AA)
- 3:1
- Критерий WCAG
- 1.4.3 Контраст (минимальный)
Элементы управления и значимая графика: рамки полей, иконки, индикатор фокуса
- Минимум (уровень AA)
- 3:1 к соседнему цвету
- Критерий WCAG
- 1.4.11 Контраст нетекстовых элементов
Информация, переданная цветом
- Минимум (уровень AA)
- Должна дублироваться другим способом
- Критерий WCAG
- 1.4.1 Использование цвета
Только цвет
- Поле с ошибкой просто становится красным
- Обязательные поля отмечены зелёным
- Ссылки в тексте отличаются только цветом
- На графике линии различаются лишь оттенком
Цвет плюс второй признак
- Красная рамка, иконка и текст «Укажите номер телефона»
- Звёздочка и подпись «обязательное поле»
- Ссылки подчёркнуты или выделены начертанием
- Линии различаются ещё и типом, и подписью
Тёмная тема
Тёмная тема — не обязательный атрибут «премиального» продукта, а настройка для тех, кому она удобнее. Nielsen Norman Group, разбирая исследования, отмечает: у людей с нормальным зрением результаты чтения обычно лучше на светлом фоне, а некоторым людям с катарактой и похожими нарушениями удобнее тёмный. Поэтому тёмную тему разумно давать как вариант, а не навязывать. Сайт может узнать, какую тему человек выбрал в системе, через медиазапрос prefers-color-scheme.
- Не переворачивайте палитру автоматически: тёмную тему проектируют отдельно, на тех же ролях цвета
- Избегайте чистого чёрного фона с чистым белым текстом — по нашему опыту, глубокий серый и слегка приглушённый белый читаются спокойнее
- Пересчитайте акценты: насыщенный цвет, который хорошо смотрелся на белом, на тёмном фоне может «светиться» и резать глаз
- Глубину показывайте светлотой поверхностей: на тёмном фоне тени почти не видны, поэтому приподнятые карточки делают чуть светлее фона
- Проверяйте контраст в обеих темах отдельно — пройденная проверка в светлой ничего не гарантирует для тёмной
Хорошая типографика и цвет незаметны: человек просто читает и нажимает то, что нужно, не задумываясь, почему ему легко.
Источники
- W3C — Understanding SC 1.4.3: Contrast (Minimum)
- W3C — Understanding SC 1.4.11: Non-text Contrast
- W3C — Understanding SC 1.4.1: Use of Color
- W3C — Understanding SC 1.4.8: Visual Presentation
- web.dev — Color and contrast accessibility
- Baymard Institute — Readability: The Optimal Line Length
- Nielsen Norman Group — The Dos and Don’ts of Pairing Typefaces
- Nielsen Norman Group — Dark Mode vs. Light Mode: Which Is Better?
- MDN — prefers-color-scheme