01 Ошибки со шрифтами #
Слишком много шрифтов
Один для заголовка, второй для текста, третий для кнопок, четвёртый для цитат. Страница выглядит несобранной. Обычно достаточно одного-двух шрифтов.
Декоративный шрифт в основном тексте
Акцидентный шрифт хорош в заголовке, но статью им набирать нельзя — читать невозможно.
Слишком много начертаний
Regular, Medium, SemiBold, Bold, ExtraBold, Black — сразу все. Страница становится визуально тяжёлой. Оставь 2–3 начертания.
02 Размеры и интервалы #
Мелкий текст
Кажется, что так поместится больше информации. На практике — наоборот. Основной текст не меньше 16px.
Длинные строки
Текст на всю ширину экрана — глаз не может найти начало следующей строки. Оптимум: 60–80 символов.
Слишком узкие колонки
15–20 символов в строке — чтение становится дёрганым. Глаз слишком часто перескакивает.
Нет отступов
Текст прилипает к другим элементам и краям экрана. Воздух — часть дизайна, а не пустота.
03 Контраст и акценты #
Плохой контраст
Светло-серый на белом выглядит модно в презентации, но не читается на улице, в транспорте и на дешёвом экране.
Много жирного
Когда выделено всё — не выделено ничего. Жирный — только для действительно важного.
Много капслока
КАПСЛОК БЫСТРО УТОМЛЯЕТ. Используй только для коротких акцентов.
04 Структура и мобильная версия #
Нет визуальной иерархии
Когда все тексты выглядят одинаково, пользователь не понимает, куда смотреть. Заголовок должен быть заметнее подзаголовка, а подзаголовок — отличаться от основного текста.
Нет структуры
Огромная простыня без подзаголовков, списков и блоков. Такие материалы редко дочитывают.
Игнорирование мобильной версии
На компьютере всё отлично, на телефоне — мелкий текст, короткие строки, заголовки не помещаются. Проверка мобильной версии обязательна.
Неправильное выравнивание
Для большинства сайтов лучше выравнивание по левому краю. Выравнивание по ширине без настройки создаёт «дыры» между словами.
Нет проверки перед сдачей
Даже опытные дизайнеры перепроверяют текст. Пара минут — и десяток ошибок можно избежать.
Если убрать всё лишнее и оставить только эти правила — уже получится работающая типографика. Остальное — нюансы.
Найди ошибку
В каждом описании — либо ошибка, либо норма. Определи.
