Типографика — это 90% веб-дизайна, остальное — просто украшение.
Типографика — искусство расположения текста — является наиболее важным элементом веб-дизайна, поскольку текст — это то, как большая часть информации передается в Интернете. Хорошая типографика невидима; читатели сосредотачиваются на содержании, а не на шрифте. Плохая типографика сразу заметна и подрывает доверие. Согласно исследованию Adobe, проведенному в 2025 году, 73% потребителей говорят, что не стали бы покупать на сайте с плохой типографикой.
В x13apps мы считаем типографику краеугольным камнем каждого дизайна. Вот принципы, которыми мы руководствуемся при выборе шрифтов.
Ограничьте выбор шрифтов
Используйте максимум 2-3 шрифта на любом сайте. Один для заголовков, один для основного текста и, возможно, один для акцентов или специальных целей. Использование слишком большого количества шрифтов создает визуальный хаос. Выбирайте шрифты, которые контрастируют друг с другом: засечки для заголовков и без засечек для основного текста создают четкую иерархию и визуальный интерес.
Google Fonts предлагает сотни бесплатных шрифтов, оптимизированных для Интернета. Популярные пары включают Playfair Display с Source Sans Pro или Inter с Merriweather. Для профессиональных проектов рассмотрите лицензионные шрифты от Typekit или Hoefler&Co.
Отдавайте приоритет читабельности
Размер основного текста должен быть не менее 16 пикселей (лучше 18–20 пикселей для удобства чтения на современных экранах). Для удобства чтения высота строки должна быть в 1,5–1,8 раза больше размера шрифта. Длина строки должна составлять 50–75 символов в каждой — более длинные строки утомляют глаза, а более короткие нарушают поток текста. Используйте достаточный интервал между абзацами, чтобы визуально разделить идеи.
Стремитесь к сильному коэффициенту контрастности между текстом и фоном — не менее 4,5:1 для обычного текста и 3:1 для крупного текста (WCAG AA). Избегайте светло-серого текста на белом фоне, как бы модно это ни выглядело. Если пользователям будет трудно читать ваш контент, они уйдут.
Установите четкую типографскую иерархию
Пользователи сканируют, прежде чем читать. Четкая иерархия с использованием разных размеров, насыщенности и цветов шрифтов направляет взгляд и сообщает об относительной важности информации. Заголовки должны быть заметно крупнее и жирнее основного текста. Используйте модульную шкалу для обеспечения единообразных соотношений размеров.
Учитывайте производительность и доступность
Пользовательские шрифты влияют на время загрузки страницы. Используйте font-display: swap, чтобы текст оставался видимым во время загрузки шрифта. Поднабор шрифтов, включающий только те символы, которые вам нужны. Рассмотрите переменные шрифты, которые сочетают в себе несколько насыщенностей в одном файле. Убедитесь, что размер всего текста можно изменить на 200 %, не нарушая макет. Для размеров шрифта используйте относительные единицы (бэр, эм), а не пиксели. В x13apps мы выбираем и реализуем типографику, которая улучшает эстетику и читабельность. Подробнее читайте в нашемруководство по психологии цвета.