Сайт может выглядеть современно, но всё равно плохо работать, если текст на нём трудно читать. Пользователь не будет долго разбираться, где главный заголовок, почему цена почти сливается с фоном и куда нажимать дальше.
Типографика в веб-дизайне решает эту проблему: она делает текст понятным, читаемым и управляет вниманием пользователя. Это не просто выбор красивого шрифта, а часть UX, доступности, визуальной иерархии и конверсии.
Типографика в веб-дизайне — это система оформления текста на сайте: шрифты, размеры, интервалы, контраст, длина строки, иерархия и отступы. Она помогает пользователю быстрее читать страницу, понимать структуру интерфейса и выполнять целевые действия.
Что такое типографика в веб-дизайне
Типографика в веб-дизайне — это оформление и организация текста на сайте. Она включает выбор шрифта, кегль, начертания, межстрочный интервал, длину строки, цвет, контраст, выравнивание, отступы и типографическую иерархию.
Веб-типографика отличается от печатной тем, что текст читают на разных экранах: от смартфона шириной 360–430 px до монитора 1440 px и больше. Поэтому дизайнер должен учитывать адаптивность, скорость загрузки веб-шрифтов, поддержку кириллицы, fallback-шрифты и поведение текста в браузере.
| Критерий | Печатная типографика | Веб-типографика |
|---|---|---|
| Среда | Фиксированный формат: книга, журнал, буклет | Разные устройства, браузеры, ОС и размеры экранов |
| Размер текста | Задаётся один раз под макет | Должен адаптироваться под экран и контекст |
| Контроль результата | Высокий: дизайнер почти полностью контролирует вид | Зависит от браузера, системы, загрузки шрифта и плотности пикселей |
| Главная задача | Комфортное чтение в готовом носителе | Чтение, сканирование, взаимодействие с интерфейсом |
Хорошая типографика помогает пользователю сразу отличить заголовок от абзаца, основную информацию от второстепенной, ссылку от обычного текста и кнопку от декоративного элемента.
Зачем типографика нужна сайту
Типографика нужна сайту, чтобы текст не просто присутствовал на странице, а работал: объяснял, направлял, продавал, помогал сравнивать и принимать решение.
В интернет-магазине важны цена, название товара, характеристики и кнопка покупки. В блоге — размер основного текста, межстрочный интервал и комфортная длина строки. На лендинге — сильный H1, короткий подзаголовок, понятные преимущества и заметный CTA.
| Задача | Как помогает типографика | Что будет при ошибках |
|---|---|---|
| Читаемость | Настраивает размер, line-height, контраст и ширину блока | Пользователь быстро устаёт и закрывает страницу |
| Ориентация на странице | Разделяет H1, H2, H3, абзацы, подписи и кнопки | Страница выглядит плоской и плохо сканируется |
| Доверие | Создаёт аккуратный, цельный и профессиональный вид | Сайт кажется случайно собранным |
| Конверсия | Делает оффер, цену, выгоды и CTA заметнее | Пользователь не понимает, что важно и куда нажимать |
Типографика особенно важна для сайтов, где пользователь читает перед действием: покупкой, заявкой, подпиской, регистрацией или переходом в каталог.
Основы типографики в веб-дизайне
Основы веб-типографики строятся на системе: шрифты, размеры, интервалы, длина строки, контраст, иерархия, выравнивание и отступы. Один удачный шрифт не спасёт страницу, если текст слишком мелкий, строки длинные, а заголовки не отличаются от абзацев.
Ниже — базовые элементы, которые стоит настроить до финального дизайна страницы.
Шрифты и шрифтовые пары
Шрифт задаёт характер сайта. Нейтральный sans-serif делает интерфейс спокойным и технологичным, serif может добавить редакционного или премиального ощущения, декоративный шрифт подходит только для коротких акцентов.
Для большинства сайтов достаточно 1–2 шрифтов. Часто лучший вариант — один качественный шрифт с несколькими начертаниями: regular для основного текста, medium для акцентов, bold для заголовков.
- Один шрифт на весь сайт — надёжно для интерфейсов, блогов, SaaS и корпоративных сайтов.
- Выразительный шрифт для заголовков + нейтральный для текста — хорошо работает на лендингах и брендовых сайтах.
- Декоративный шрифт — только для коротких фраз, логотипов или промо-блоков.
Перед выбором шрифта проверьте поддержку кириллицы, цифры, знаки валют, кавычки и все нужные начертания. Если нужна отдельная подборка, можно опираться на материал про современные шрифты для сайта, а для тестирования начертаний использовать Google Fonts.
Практический ориентир: подключайте 2–3 веса шрифта, например 400, 500 и 700. Подключение 6–8 начертаний редко улучшает дизайн, но может замедлить загрузку.
Размер текста
Размер текста должен быть удобным без увеличения страницы. Для основного текста на сайте чаще всего используют 16–18 px. Для длинных статей обычно комфортнее 18 px, если ширина текстового блока не слишком большая.
| Элемент | Ориентир | Задача |
|---|---|---|
| H1 | 32–56 px на десктопе, 28–36 px на мобильных | Показать главный смысл страницы |
| H2 | 24–36 px | Разделить крупные смысловые блоки |
| H3 | 20–28 px | Структурировать подразделы |
| Body text | 16–18 px | Обеспечить комфортное чтение |
| Caption / note | 12–14 px | Показать подписи и вторичную информацию |
Ошибка новичков — делать основной текст 13–14 px ради «лёгкости» дизайна. На макете это может выглядеть аккуратно, но на реальном смартфоне такой текст часто читается хуже.
Межстрочный интервал
Межстрочный интервал, или line-height, определяет расстояние между строками. Если строки стоят слишком плотно, текст выглядит тяжёлым. Если интервал слишком большой, абзац распадается.
Для основного текста обычно подходит line-height 1.4–1.7. Например, для 16 px это примерно 22–27 px, а для 18 px — около 26–30 px.
- Для длинных статей лучше использовать больше воздуха.
- Для кнопок, labels и коротких интерфейсных подписей интервал может быть плотнее.
- Для многострочных заголовков line-height обычно меньше, чем для body text.
Пример: текст 18 px с line-height 1.6 читается спокойнее, чем текст 16 px с line-height 1.2, особенно в статье или описании услуги.
Длина строки
Длина строки влияет на скорость чтения. Слишком длинная строка утомляет: глазу сложно возвращаться к началу следующей строки. Слишком короткая строка создаёт много переносов и делает чтение рваным.
Для длинных текстов удобно держать строку примерно в диапазоне 60–80 символов. На практике это часто означает текстовый контейнер около 640–760 px, но точное значение зависит от шрифта и размера текста.
| Тип страницы | Как работать с длиной строки |
|---|---|
| Блог / статья | Ограничить текстовый контейнер, не растягивать абзацы на всю ширину |
| Лендинг | Использовать короткие блоки и подзаголовки, которые легко сканировать |
| Карточка товара | Держать название, цену и характеристики компактными |
| Интерфейс | Писать короткие labels, подсказки и сообщения об ошибках |
Если статья растянута на весь экран 1440 px, она может выглядеть «просторно», но читать её будет сложнее.
Контраст и читаемость
Контраст показывает, насколько текст отделяется от фона. Низкий контраст часто выглядит стильно в макете, но плохо работает на реальных устройствах: на солнце, старом экране, при сниженной яркости или у пользователей с ослабленным зрением.
Для доступности стоит ориентироваться на WCAG: обычный текст должен иметь контраст не ниже 4.5:1, крупный текст — не ниже 3:1. Проверять это лучше не «на глаз», а через рекомендации WCAG по контрасту и contrast checker.
- Тёмно-серый или чёрный текст на белом фоне — безопасный базовый вариант.
- Белый текст поверх фотографии требует затемнения, градиента или подложки.
- Акцентный цвет лучше использовать для ссылок, кнопок и ключевых деталей.
- Серый текст на светло-сером фоне нужно проверять особенно внимательно.
Ограничение: высокий контраст не должен превращаться в визуальный шум. Например, чисто чёрный текст на чисто белом фоне может быть слишком резким для больших текстовых полотен, поэтому часто используют тёмно-серый.
Иерархия текста
Иерархия текста показывает, что главное, что второстепенное и куда смотреть дальше. Она строится через размер, вес, цвет, отступы, расположение и ритм.
Пользователь обычно не читает страницу сверху вниз полностью. Он сначала видит H1, затем сканирует H2 и H3, замечает выделения, списки, цены, кнопки и только потом углубляется в нужные фрагменты.
| Уровень | Элемент | Роль |
|---|---|---|
| 1 | H1 | Главная тема страницы |
| 2 | Lead / подзаголовок | Контекст и польза |
| 3 | H2 | Крупные смысловые разделы |
| 4 | H3 | Подразделы внутри темы |
| 5 | Body text | Основная информация |
| 6 | Caption / note | Пояснения и вторичные детали |
Если всё выделено жирным, пользователь перестаёт понимать, что действительно важно. Акценты должны быть редкими и осмысленными.
Выравнивание и отступы
Выравнивание делает страницу аккуратной. Для длинного текста чаще используют выравнивание по левому краю: глаз всегда знает, где начинается следующая строка.
Центрирование подходит для коротких заголовков, hero-блоков, цитат и промо-секций. Выравнивание по ширине в вебе часто создаёт неравномерные пробелы, особенно в узких колонках и на мобильных экранах.
- Отступ между заголовком и связанным текстом должен быть меньше, чем между разными блоками.
- Абзацы не должны слипаться: пользователю нужны визуальные паузы.
- CTA-кнопка должна быть связана с оффером, а не висеть отдельно.
- Отступы в карточках, формах и списках должны быть единообразными.
Отступы работают вместе с белым пространством. Если сайт перегружен, стоит отдельно проверить белое пространство в веб-дизайне: оно часто сильнее влияет на восприятие, чем новый шрифт.
Основные правила веб-типографики
Правила веб-типографики помогают собрать текстовую систему, которая работает на разных страницах: главной, лендинге, блоге, карточке товара, форме заявки и личном кабинете.
Главные правила в 7 пунктах
- Используйте 1–2 шрифта. Больше нужно редко, иначе появляется визуальный шум.
- Делайте body text не мельче 16 px. Для статей часто лучше 18 px.
- Настройте H1, H2 и H3 как систему. Заголовки должны отличаться по роли и визуально.
- Ограничивайте ширину длинного текста. Не растягивайте статью на весь экран.
- Проверяйте контраст. Особенно на кнопках, баннерах, карточках и формах.
- Тестируйте мобильную версию. Макет в Figma не равен реальному чтению на смартфоне.
- Проверяйте кириллицу. У популярного латинского шрифта кириллическая версия может быть слабой.
| Что подтверждено практикой | Что часто преувеличивают |
|---|---|
| Читаемый текст, контраст и иерархия улучшают UX | Один модный шрифт сам по себе не делает сайт премиальным |
| Адаптивная типографика нужна для разных экранов | Не каждому сайту нужны огромные заголовки «как у стартапов» |
| Кириллицу нужно проверять отдельно | Популярность шрифта не гарантирует хорошую русскую версию |
| Контраст лучше проверять численно | Оценка «на глаз нормально» часто ошибается |
Эти правила особенно важны при создании дизайн-системы, где текстовые стили должны повторяться на десятках страниц и интерфейсных состояний.
Типографика для мобильной версии сайта
Мобильная типографика — это не уменьшенная десктопная версия. На смартфоне меньше ширина строки, другие расстояния, другое поведение заголовков и чаще используется чтение «на ходу».
Если на десктопе H1 в 56 px выглядит эффектно, на экране 390 px он может занять весь первый экран и вытолкнуть важный текст вниз. Поэтому для мобильных нужно отдельно настраивать размеры, line-height, переносы и отступы.
| Элемент | На десктопе | На мобильном |
|---|---|---|
| H1 | Крупный, может быть 40–56 px | Чаще 28–36 px, без слишком длинных строк |
| Body text | 16–18 px | 16–18 px, не стоит уменьшать до 13–14 px |
| Line-height | 1.4–1.7 | Обычно 1.45–1.65, с учётом плотности интерфейса |
| Отступы | Можно давать больше воздуха | Нужен баланс: не сжимать текст, но не тратить весь экран на пустоты |
Для адаптивной типографики можно использовать CSS-функцию clamp(): она задаёт минимальный, предпочтительный и максимальный размер. Например, заголовок может плавно меняться между 28 px и 48 px без набора отдельных media queries.
h1 {
font-size: clamp(1.75rem, 4vw, 3rem);
line-height: 1.1;
}Подробнее о принципах адаптации интерфейса можно посмотреть в материале про принципы адаптивного дизайна.
Технические нюансы веб-шрифтов
Веб-типографика зависит не только от дизайна, но и от реализации. Один и тот же шрифт может выглядеть хорошо в макете, но создавать проблемы на сайте: долго загружаться, мигать при подмене, не иметь нужных символов или ломать высоту строк.
- Fallback-шрифты. Указывайте запасные шрифты, чтобы текст оставался читаемым, если основной не загрузился.
- font-display. Свойство помогает управлять тем, как шрифт отображается во время загрузки.
- rem и em. Относительные единицы удобны для масштабирования и доступности.
- Variable fonts. Один файл может содержать несколько осей начертаний, но его всё равно нужно тестировать по весу и поддержке.
- Дизайн-токены. Размеры, интервалы и веса лучше хранить как системные значения, а не задавать случайно на каждой странице.
Для технической реализации полезно сверяться с MDN по font-display: это помогает снизить риск FOIT, когда текст временно невидим, и FOUT, когда сначала показывается fallback-шрифт, а потом основной.
@font-face {
font-family: "Inter";
src: url("/fonts/inter.woff2") format("woff2");
font-display: swap;
}Типографика должна быть не только красивой, но и быстрой. Если ради одного декоративного заголовка сайт загружает тяжёлый набор шрифтов, это плохой обмен.
Частые ошибки в типографике сайта
Ошибки в типографике редко выглядят критичными по отдельности. Но вместе они ухудшают чтение, ломают иерархию и снижают доверие к сайту.
| Ошибка | Почему это плохо | Как исправить |
|---|---|---|
| Основной текст 13–14 px | Пользователь напрягается при чтении | Поднять body text до 16–18 px |
| Line-height 1.1–1.2 в длинном тексте | Строки слипаются | Использовать 1.4–1.7 |
| Строка 100–120 символов | Глаз устаёт при переходе на новую строку | Ограничить контейнер до 60–80 символов |
| Серый текст на светло-сером фоне | Низкий контраст ухудшает доступность | Проверить contrast ratio и усилить цвет |
| 4–5 шрифтов на странице | Появляется визуальный шум | Оставить 1–2 шрифта |
| H2 почти не отличается от абзаца | Страница плохо сканируется | Развести заголовки по размеру, весу и отступам |
| Текст поверх фото без затемнения | Читаемость зависит от картинки | Добавить подложку, градиент или сменить композицию |
| Нет мобильной проверки | Заголовки ломаются, текст становится плотным | Проверить реальные экраны 360–430 px |
Самая опасная ошибка — отсутствие системы. Когда каждый блок оформлен отдельно, сайт быстро превращается в набор случайных решений.
Примеры хорошей типографики в веб-дизайне
Хорошую типографику проще понять через сравнение. Ниже — типовые ситуации, где видно, как одно изменение влияет на восприятие страницы.
| Ситуация | Плохо | Хорошо |
|---|---|---|
| Статья в блоге | Текст 14 px, line-height 1.2, строка 110 символов | Текст 18 px, line-height 1.6, строка 65–75 символов |
| Hero-блок лендинга | H1, подзаголовок и кнопка визуально почти одинаковые | H1 крупный, подзаголовок спокойнее, CTA контрастный |
| Карточка товара | Цена, описание и кнопка конкурируют между собой | Название читаемое, цена заметная, CTA сильнее описания |
| Текст на изображении | Белый текст поверх светлой фотографии | Добавлено затемнение или однотонная подложка |
| SaaS-интерфейс | Длинные labels, мелкие подсказки, нет единого стиля | Короткие подписи, единый размер, понятные состояния |
Пример: блог
Плохо: основной текст 14 px, ширина блока 1000 px, абзацы по 6–8 строк, подзаголовки отличаются только жирностью.
Хорошо: основной текст 18 px, контейнер около 700 px, line-height 1.6, абзацы по 1–3 предложения, H2 и H3 заметно отличаются от body text.
Пример: лендинг
Плохо: первый экран перегружен текстом, H1 занимает четыре строки, кнопка теряется рядом с описанием, преимущества оформлены одинаково.
Хорошо: H1 короткий, подзаголовок объясняет ценность, преимущества вынесены в список, CTA-кнопка контрастная и находится рядом с оффером.
Пример: интернет-магазин
Плохо: цена меньше описания, скидка не выделена, кнопка покупки похожа на вторичную ссылку.
Хорошо: название товара читается с первого взгляда, цена заметнее описания, характеристики легко сравнить, кнопка покупки визуально сильнее вторичных действий.
Хорошая типографика не обязана быть эффектной. Её главная задача — убрать лишнее усилие между пользователем и смыслом страницы.
Инструменты для проверки веб-типографики
Типографику нужно проверять не только визуально. Часть проблем видна только через инструменты: контраст, загрузку шрифтов, поведение на мобильных экранах, размеры и CSS-стили.
| Инструмент | Что проверять | Когда использовать |
|---|---|---|
| Contrast checker | Соотношение цвета текста и фона | Перед запуском кнопок, баннеров, форм и карточек |
| Figma typography styles | Единую систему H1, H2, body, captions, buttons | На этапе дизайн-системы и макета |
| Chrome DevTools | Реальные font-size, line-height, fallback, загрузку шрифтов | После вёрстки |
| Lighthouse | Производительность, доступность, проблемы интерфейса | Перед публикацией и после изменений |
| Type scale / modular scale | Логичную шкалу размеров заголовков и текста | Когда нужно избежать случайных размеров |
Для дизайнера полезно собрать собственный набор инструментов и регулярно проверять не только шрифты, но и сетку, цвета, графику и UI-состояния. В этом помогает отдельный обзор про инструменты веб-дизайнера.
Типографика и SEO
Типографика не является прямой «магической кнопкой» для роста позиций. Но она влияет на качество страницы: пользователю проще читать, сканировать материал, находить нужные блоки и взаимодействовать с сайтом.
Для SEO важны не только ключевые слова, но и структура контента. Корректные H1, H2 и H3 помогают поисковым системам и AI-поиску понимать логику страницы, а пользователю — быстро переходить к нужному разделу.
- Читаемость снижает лишнее усилие при изучении страницы.
- Заголовки H1–H3 помогают структурировать тему.
- Списки и таблицы улучшают сканирование и подходят для AI-ответов.
- Доступность делает сайт удобнее для большей аудитории.
- Быстрые веб-шрифты помогают не ухудшать производительность.
Если сайт тяжело читать, пользователь может уйти до того, как увидит сильный оффер или полезный блок. Поэтому типографика связана с улучшением пользовательского опыта напрямую, даже если не является отдельным фактором ранжирования.
Как улучшить типографику на сайте
Начинать улучшение типографики лучше не с поиска нового шрифта, а с аудита текущей страницы. Часто самые сильные изменения — это размер текста, ширина контейнера, line-height, контраст и порядок заголовков.
- Проверьте основной текст. Если он меньше 16 px, начните с увеличения.
- Настройте line-height. Для длинного текста попробуйте диапазон 1.4–1.7.
- Ограничьте ширину контейнера. Не растягивайте статьи и описания на весь экран.
- Разведите H1, H2 и H3. Заголовки должны отличаться по роли и визуально.
- Уберите лишние шрифты. Оставьте только те, которые нужны системе.
- Проверьте contrast ratio. Особенно в кнопках, формах и баннерах.
- Добавьте отступы между блоками. Текст должен дышать, но не разваливаться.
- Проверьте мобильную версию. Смотрите реальные экраны, а не только макет.
- Сделайте ссылки заметными. Ссылка не должна выглядеть как обычный текст.
- Разбейте длинные абзацы. В вебе удобнее 1–3 предложения в абзаце.
| Если у вас… | Что проверить первым |
|---|---|
| Пользователи быстро уходят со статьи | Размер текста, длину строки, абзацы, подзаголовки |
| Плохо кликают CTA | Контраст кнопки, подпись, отступы и близость к офферу |
| Сайт выглядит непрофессионально | Единую систему шрифтов, заголовков и отступов |
| Проблемы на мобильных | Размеры H1/H2, переносы, line-height и внутренние отступы |
После правок проверьте страницу на десктопе, планшете и смартфоне. Типографика считается рабочей только тогда, когда текст удобно читать в реальных условиях.
Краткий чек-лист по веб-типографике
Этот чек-лист можно использовать перед публикацией сайта, лендинга, статьи или карточки товара.
- Основной текст читается без увеличения страницы.
- Body text не меньше 16 px.
- H1, H2 и H3 отличаются по размеру, весу и роли.
- На странице есть понятная визуальная иерархия.
- Используется не больше 1–2 шрифтов.
- Длина строки комфортна для чтения.
- Line-height не слишком плотный и не слишком рыхлый.
- Контраст текста достаточный на всех фонах.
- Ссылки визуально отличаются от обычного текста.
- Кнопки читаются и выглядят как элементы действия.
- Текст хорошо выглядит на мобильных экранах.
- Декоративные шрифты не используются для длинных текстов.
- Шрифт поддерживает кириллицу, цифры и нужные символы.
- Текст поверх изображений имеет подложку, затемнение или достаточный контраст.
- В CSS есть fallback-шрифты и продумана загрузка web fonts.
FAQ по типографике в веб-дизайне
Что такое типографика в веб-дизайне простыми словами?
Это оформление текста на сайте: шрифты, размеры, интервалы, отступы, контраст и порядок заголовков. Хорошая типографика делает страницу понятной и удобной для чтения.
Какой размер шрифта использовать на сайте?
Для основного текста чаще всего подходит 16–18 px. Для длинных статей обычно комфортнее 18 px, для интерфейсных подписей можно использовать 14–16 px, но мелкий текст нужно проверять на реальном устройстве.
Сколько шрифтов можно использовать в одном дизайне?
Обычно достаточно 1–2 шрифтов. Большее количество оправдано редко, потому что усложняет стиль, ухудшает единообразие и может замедлить загрузку сайта.
Как подобрать шрифтовую пару?
Пара должна быть контрастной, но гармоничной. Например, выразительный шрифт для заголовков можно сочетать с нейтральным sans-serif для основного текста.
Почему нельзя использовать декоративный шрифт для длинного текста?
Декоративные шрифты быстро утомляют, хуже читаются в абзацах и плохо работают на мобильных экранах. Их лучше использовать только для коротких акцентов.
Как сделать типографику адаптивной?
Используйте отдельные размеры для мобильных экранов, проверяйте переносы, line-height и отступы. Для плавного изменения размеров можно применять CSS-функцию clamp().
Как типографика влияет на UX?
Она помогает пользователю быстрее понять структуру страницы, найти важную информацию и выполнить действие. Плохая типографика создаёт лишнее усилие при чтении.
Как проверить читаемость текста?
Проверьте размер шрифта, contrast ratio, длину строки, межстрочный интервал, отступы и мобильную версию. Дополнительно откройте страницу на реальном смартфоне.