Настройки куки
Файлы cookie, необходимые для корректной работы сайта, всегда включены.
Другие файлы cookie можно настроить.
Другие файлы cookie можно настроить.
Чек-лист идеальной типографики для UX/UI-дизайнера
Чек-лист идеальной типографики для UX/UI-дизайнера. Базовые параметры, правила читаемости, микротипографика и технические советы. Сделайте ваш интерфейс понятным!
Типографика в интерфейсе — это не про красоту, а про ясность. Пользователь должен считывать информацию за доли секунды, не задумываясь о том, какой шрифт вы выбрали. Хорошая типографика незаметна. Плохая — заставляет пользователя напрягаться.
Этот чек-лист поможет вам превратить хаотичный набор стилей в системный инструмент, который работает на бизнес-задачи вашего продукта.
Этот чек-лист поможет вам превратить хаотичный набор стилей в системный инструмент, который работает на бизнес-задачи вашего продукта.
1. Базовые параметры (Фундамент)
- Размер текста (Base size): Минимум 16px для основного контента. Это стандарт комфортного чтения на любых экранах.
- Межстрочный интервал (Line height): Держитесь в диапазоне 1.4–1.6. Для заголовков этот показатель обычно меньше (1.1–1.2), для больших блоков текста — больше.
- Длина строки (Measure): Идеально — от 45 до 75 символов в строке. Если строка длиннее, глаз устает искать начало следующей.
- Иерархия: Четко разграничивайте H1, H2, H3 и основной текст за счет размера и веса (Bold, Regular, Medium).
2. Читаемость и контраст
- Коэффициент контрастности: Текст должен быть контрастным по отношению к фону. Проверяйте показатели по стандартам WCAG (минимум 4.5:1 для обычного текста).
- Выравнивание: Только по левому краю. Выравнивание по ширине (justify) в вебе создает «рваные» пробелы, которые мешают чтению.
- Отступы: Используйте margin-bottom для разделения абзацев. Не делайте «красную строку» — в вебе это выглядит неопрятно.
3. Микротипографика (Детали, которые выдают профессионала)
- Тире и дефисы: Используйте длинное тире (—) для пауз и среднее (–) для числовых диапазонов. Дефис (-) — только для сложных слов (например, «интернет-магазин»).
- Кавычки: Только «ёлочки» для внешних кавычек и „лапки“ для вложенных.
- Висячие предлоги: Не оставляйте союзы и предлоги в конце строки. Переносите их на следующую строку вместе со словами при помощи неразрывного пробела ( ).
- Цифры: В таблицах используйте моноширинные (табличные) цифры, чтобы они стояли ровно друг под другом.
4. Техническая часть
- Количество шрифтов: Не более 2–3 гарнитур на проект. Большое количество только замедляет загрузку сайта.
- Форматы: Используйте современные форматы WOFF2. Они весят меньше и поддерживаются всеми актуальными браузерами.
- Системный запас: Всегда прописывайте системный шрифт (например, sans-serif) в CSS на случай, если основной шрифт не загрузится вовремя.
ИИ-промпты в помощь
Чтобы не проверять всё вручную, делегируйте часть задач нейросети. Вот два промпта, которые помогут вам при работе с этим чек-листом:
Проверка иерархии:
«Рассчитай типографическую шкалу для интерфейса с базовым размером 16px и коэффициентом 1.25. Выведи размеры для H1, H2, H3 и Body, предложив для каждого оптимальный line-height».
Проверка контраста:
«Фон #[код цвета], цвет текста #[код цвета]. Проверь, соответствует ли это стандартам WCAG. Если нет, предложи цвет текста, который будет максимально близок к текущему, но обеспечит нужный контраст».
Другие промпты для эффективной работы читай в нашей статье: 6 промптов UX/UI-дизайнеру для работы с типографикой
Резюме
Идеальная типографика — это не про «поиграть со шрифтами», а про предсказуемость. Если вы соблюдаете базовые отступы, следите за длиной строки и убираете висячие предлоги, ваш интерфейс автоматически становится дороже и понятнее для пользователя.
Совет: Сделайте скриншот этого чек-листа и держите его в «избранном». Перед тем как отдать макет в разработку, просто пробегитесь по этим пунктам.
Совет: Сделайте скриншот этого чек-листа и держите его в «избранном». Перед тем как отдать макет в разработку, просто пробегитесь по этим пунктам.
Рады, что вы дочитали!