Экранная типографика (англ. web typography, screen typography) — раздел дизайна, изучающий правила и приёмы отображения текста на экранах компьютеров, смартфонов, планшетов с учётом особенностей цифрового медиа.
Что такое экранная типографика в веб-дизайне и UX — основа читаемости сайтов: правильный подбор шрифтов, размеров, междустрочного интервала, кернинга (kerning), контрастности напрямую влияет на время чтения, понимание контента и поведенческие сигналы для SEO. В англоязычной литературе используются термины web typography, screen typography, digital typography — обозначающие одно и то же направление дизайна.
Экранная типографика принципиально отличается от печатной. На экране пиксельная сетка, разные размеры мониторов, разное освещение, динамичный контент. На бумаге — фиксированный размер, статичная подача, контролируемое освещение. Решения, идеальные для печати (мелкие засечки, плотная вёрстка, минимальный междустрочный интервал), плохо работают в браузере.
Основа современной экранной типографики заложена в работах Эдварда Тафти, Робера Брингхёрста, Эрика Шпикермана и развита веб-дизайнерами 2000–2020-х годов. Стандарты воплощены в спецификациях CSS — свойства font-family, font-size, line-height, letter-spacing, font-weight определяют поведение шрифтов на любом современном сайте. Технология Web Fonts позволяет подключать произвольные шрифты через CSS и сервисы вроде Google Fonts.
Что такое экранная типографика
Экранная типографика — система правил и приёмов оформления текста для цифровых носителей, обеспечивающая удобное чтение, передачу акцентов и стилистическую целостность контента. Включает выбор гарнитуры, размера, начертания, межстрочного и межбуквенного интервалов, контрастности, длины строки, организации текста в блоки.
Принципиальное отличие от печатной типографики — динамичность медиа. Один и тот же сайт открывается на 4K-мониторе, на ноутбуке с матовым экраном, на смартфоне с OLED-дисплеем, в браузере с увеличенным масштабом. Все эти ситуации требуют адаптивных решений: размеры в относительных единицах, эластичная вёрстка, шрифты с хорошей читаемостью на любом DPI.
Среди дисциплин дизайна экранная типографика занимает центральное место. По данным исследований, 90% контента сайтов — это текст. Удобство его восприятия определяет, останется ли пользователь на странице. Плохая типографика повышает отказы на 30–50%, хорошая — увеличивает время на сайте в 1.5–2 раза.
Основные понятия экранной типографики
| Термин | Описание | CSS-свойство |
|---|---|---|
| Гарнитура | Семейство шрифтов одного дизайна (Arial, Roboto, Inter) | font-family |
| Кегль | Размер шрифта в пикселях, пунктах, em или rem | font-size |
| Начертание | Жирность и наклон (regular, bold, italic) | font-weight, font-style |
| Интерлиньяж | Расстояние между строками текста, обычно 1.4–1.7 от кегля | line-height |
| Кернинг | Регулировка расстояния между парами букв | font-feature-settings |
| Трекинг | Общее расстояние между всеми буквами в тексте | letter-spacing |
| Длина строки | Количество символов в одной строке, 45–75 знаков | max-width |
| Высота прописной | Высота больших букв относительно строчных | Свойство шрифта |
| Засечки (serif) | Декоративные элементы на концах штрихов букв | Свойство шрифта |
| Гротеск (sans-serif) | Шрифт без засечек, более современный вид | Свойство шрифта |
Для экранной типографики критичны 4 параметра: font-family, font-size, line-height, letter-spacing. Правильная настройка этой «четвёрки» решает 80% задач по читаемости текста.
Выбор шрифта для сайта
Выбор шрифта для веб-проекта строится по нескольким критериям:
- Категория шрифта. Sans-serif (без засечек) — основной выбор для экранов: Arial, Roboto, Inter, Open Sans, Montserrat. Serif (с засечками) — для длинных текстов и брендовой презентации: Georgia, Merriweather, PT Serif. Display — для заголовков и акцентов, но не для основного текста.
- Поддержка кириллицы. Не все шрифты поддерживают русский и белорусский язык. Проверка обязательна — например, многие декоративные шрифты с Google Fonts работают только с латиницей.
- Веса начертаний. Минимум 2 веса (regular + bold), оптимально 3–4 (regular + medium + bold + light). Для брендовых сайтов — 6–9 весов для гибкой иерархии.
- Лицензия. Шрифты с Google Fonts, Adobe Fonts (коммерческая лицензия включена в подписку), Yandex Fonts — лицензионно чистые для коммерческого использования. Скачивание платных шрифтов без лицензии — нарушение авторских прав.
- Скорость загрузки. Каждый дополнительный шрифт добавляет 50–200 КБ к весу страницы. Оптимально — 1–2 гарнитуры на весь сайт.
- Совместимость с устройствами. Не все шрифты одинаково хорошо рендерятся на разных ОС и браузерах. Проверка на Windows, macOS, iOS, Android обязательна перед запуском.
Топ современных шрифтов для веб-сайтов с поддержкой кириллицы: Inter, Roboto, Open Sans, Montserrat, Manrope, PT Sans, Golos Text. Все доступны бесплатно через Google Fonts с подключением одной строкой <link>.
Основные правила экранной типографики
Базовые правила для правильной типографики на сайте:
- Размер основного текста — 16–18 пикселей. Меньше — сложно читать на мобильных, больше — занимает много места. Стандарт индустрии — 16px для десктопа, 17–18px для мобильной версии.
- Интерлиньяж 1.4–1.7 от кегля. Для текста 16px — 22–27 пикселей между строками. Слишком плотный line-height (1.0–1.3) утомляет глаза, слишком воздушный (2.0+) разрывает текст.
- Длина строки 45–75 символов. На очень широких экранах текст должен ограничиваться через max-width контейнера. 80–120 символов в строке резко снижает читаемость — глаз теряется при переходе на следующую строку.
- Контрастность по WCAG 2.1. Минимум 4.5:1 для основного текста, 3:1 для крупного. Черный (#000) на белом (#fff) — 21:1 (максимум), тёмно-серый (#333) на белом — 12.6:1 (отлично).
- Иерархия заголовков. H1 — 32–48px, H2 — 24–36px, H3 — 20–26px, основной текст — 16–18px. Чёткая разница в размерах создаёт визуальную иерархию.
- Отступы между блоками. Заголовки H2 — отступ сверху 32–48px, снизу 16–20px. Между абзацами — 16–24px. Списки и таблицы — отступы 20–32px от соседних элементов.
- Кавычки и тире. В русском тексте — «ёлочки» (« »), не двойные английские (” “). Тире — длинное (—) с пробелами с обеих сторон, не дефис (-). Эти детали отличают профессиональный сайт от любительского.
- Висячие предлоги. Однобуквенные предлоги (в, на, у, с, к, о) не должны оставаться в конце строки. Решается через неразрывный пробел ( ) после предлога.
- Минимум 2 гарнитуры. Одна для заголовков, одна для основного текста. Использование 3+ шрифтов на одном сайте делает дизайн непоследовательным.
- Адаптивные размеры. Использование
remиemвместо фиксированныхpxпозволяет тексту корректно масштабироваться при увеличении размеров через настройки браузера.
Типичные ошибки в типографике
| Ошибка | Последствие | Решение |
|---|---|---|
| Мелкий шрифт 11–13 пикселей | Пользователи увеличивают масштаб или закрывают сайт | Основной текст не меньше 16px |
| Низкий контраст (серый на сером) | Тяжело читать, особенно на солнце или при плохом зрении | WCAG 2.1 — контраст 4.5:1 минимум |
| Тесный интерлиньяж (1.0–1.2) | Строки сливаются, глаза устают | Line-height 1.4–1.7 от кегля |
| Длинные строки на широких экранах | Глаз теряется при переходе на следующую строку | max-width контейнера 700–900 пикселей для текста |
| 5+ разных шрифтов на сайте | Визуальный хаос, отсутствие стиля | 2 шрифта максимум — для заголовков и текста |
| Использование двойных английских кавычек “…” | Любительский вид, не соответствует русской типографике | «Ёлочки» через символ или CSS-стилизацию |
| Дефис вместо длинного тире | Технический вид, не для профессионального контента | Длинное тире (—) с пробелами по обеим сторонам |
| Декоративные шрифты для основного текста | Высокая когнитивная нагрузка, низкая скорость чтения | Декоративные только для заголовков и акцентов |
| Текст по центру длинными абзацами | Каждая строка начинается с разного места, неудобно для чтения | Текст по левому краю, центрирование только для коротких заголовков |
| Подключение 6+ весов одного шрифта | Замедление загрузки на 500ms — 1.5 секунды | Минимум необходимых весов, обычно 2–4 |
Типографика и SEO
Влияние типографики на поисковое продвижение многогранно:
- Поведенческие сигналы. Удобный для чтения текст удерживает пользователя на странице — время на сайте растёт, отказы снижаются. Эти метрики напрямую влияют на ранжирование в Google и Яндекс.
- Скорость загрузки (Core Web Vitals). Веб-шрифты добавляют 100–500 КБ к весу страницы. Метрики LCP (Largest Contentful Paint) и CLS (Cumulative Layout Shift) ухудшаются при плохой работе с font-display. Используйте font-display: swap для предотвращения CLS.
- Доступность (Accessibility). Корректные размеры шрифтов и контрастность критичны для доступности сайта. WCAG 2.1 — стандарт, на который ориентируются поисковики при оценке UX.
- Мобильная адаптация. Mobile-First Indexing — Google ранжирует мобильную версию сайта. Плохая мобильная типографика (мелкий шрифт, тесные строки) снижает мобильное ранжирование.
- Структура контента. Иерархия заголовков H1-H3, выделенные blockquote, читаемые таблицы помогают поисковикам понять структуру страницы.
- Семантический HTML. Использование
<strong>для смысловых акцентов,<em>для выделения,<mark>для подсветки — даёт поисковикам сигналы о важности фрагментов.
Часто задаваемые вопросы
Какой размер шрифта самый оптимальный для сайта?
Основной текст — 16–18 пикселей на десктопе, 17–18 на мобильной версии. Это компромисс между плотностью контента и читаемостью. Для медиа и блогов с длинными статьями — 18–20px. Для каталогов с большим количеством мелких элементов — 14–15px допустимо только для второстепенных текстов.
Стоит ли использовать системные шрифты или подключать веб-шрифты?
Системные шрифты (Arial, Helvetica, Segoe UI) загружаются мгновенно, но ограничивают дизайн. Веб-шрифты (Google Fonts, Adobe Fonts) дают свободу дизайна, но добавляют 100–500 КБ. Оптимальное решение — стек шрифтов с fallback на системные: font-family: 'Inter', system-ui, sans-serif.
Можно ли использовать декоративные шрифты для основного текста?
Нет. Декоративные шрифты (Playfair, Lobster, Pacifico) хорошо смотрятся в заголовках, на больших размерах. Для основного текста требуется максимальная читаемость — простые гротески (sans-serif) или классические шрифты с засечками (serif).
Что важнее — выбор шрифта или его настройка?
Настройка. Любой стандартный шрифт (Arial, Roboto, Inter) с правильным размером, line-height и контрастностью читается отлично. И наоборот — самый красивый шрифт без настройки даёт плохой результат. Иерархия: правильные размеры → правильный line-height → выбор шрифта.
Сколько шрифтов оптимально использовать на одном сайте?
2 шрифта — стандарт. Один для заголовков (часто более характерный, брендовый), один для основного текста (нейтральный, легкочитаемый). 3 шрифта допустимо только для специфических случаев — например, моноширинный для кода в технических блогах. 4+ шрифтов — переусложнение.
Влияет ли выбор шрифта на скорость загрузки сайта?
Да. Каждый веб-шрифт — отдельный файл 30–300 КБ. Подключение 6 весов одного шрифта добавляет 150–500 КБ. Решения: использовать только необходимые веса, добавлять font-display: swap в CSS, кешировать шрифты через сервис-воркеры.
Должна ли быть разница в типографике между десктопом и мобильными?
Да. На мобильных размер основного текста обычно на 1–2 пункта больше (17–18 вместо 16), интерлиньяж может быть чуть плотнее, длина строки автоматически меньше из-за ширины экрана. Адаптивные единицы (rem, em) и медиа-запросы делают это автоматически.
