1 / 16
🔤
Веб-типографика
От анатомии шрифта до иерархии
2 / 16
«Веб-дизайн на 95% состоит из типографики»
— Оливер Райхенштейн, 2006
Пользователи приходят за контентом. Если текст нечитаем — сайт провалился.
3 / 16
Анатомия шрифта
X-height — главный параметр читаемости. Большая x-height = лучше читается в мелком размере.
4 / 16
Расстояния в типографике
Трекинг
ТИПОГРАФИКА
letter-spacing: 0.2em
Интерлиньяж
Первая строка
Вторая строка
Третья строка
line-height: 1.1
Золотой стандарт: line-height: 1.5 для текста · letter-spacing: 0.05–0.1em для капса
5 / 16
Формат WOFF2
TTF/OTF → сжатие Brotli → WOFF2
📉 Эффективность
−30%
меньше веса по сравнению с WOFF1
🌐 Поддержка
98%
всех современных браузеров
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: swap;
}
6 / 16
Variable Fonts
1 файл = бесконечное множество начертаний
Выгода: 1 файл 80 КБ заменяет 5 файлов обычных шрифтов (250 КБ)
7 / 16
Variable Fonts в CSS
Стандартные оси:
- wght — Weight (100–900, можно дробные: 453)
- wdth — Width (50–200)
- slnt — Slant (угол наклона)
- opsz — Optical Size (оптический размер)
.heading {
font-family: 'Roboto Flex';
font-variation-settings:
'wght' 750,
'wdth' 110;
}
8 / 16
Типографическая иерархия
Инструменты создания иерархии:
📏 Размер
Заголовок значительно больше текста
⚫ Вес
Жирный привлекает больше внимания
🎨 Цвет
Тёмный текст важнее светлого
⬜ Пространство
Отступы изолируют важные элементы
9 / 16
Модульная шкала
База: 16px · Коэффициент: 1.25 (Major Third)
Body
Основной текст
16px · 1rem
H3
Подзаголовок
20px · 1.25rem
H2
Заголовок раздела
25px · 1.56rem
H1
Главный заголовок
31.25px · 1.95rem
Инструмент: typescale.com — генерирует CSS-код шкалы
10 / 16
Правила сочетания шрифтов
- Правило №1: Максимум 2 шрифта на сайте (в исключительных случаях — 3)
- Правило №2: Ищите контраст, а не сходство (не берите два похожих гротеска)
- Правило №3: Используйте суперсемейства (Roboto + Roboto Slab + Roboto Mono)
- Правило №4: Соответствие настроению бренда
Классическая пара: Гротеск (заголовки) + Антиква (текст) — Inter + Merriweather
11 / 16
Примеры шрифтовых пар
Элегантность в деталях
Современный подход к классическим решениям. Чистые линии и продуманная структура.
Playfair Display + Inter
Чёткость и фокус
Текст с засечками для длинных статей и блогов. Комфортное чтение на любом экране.
Inter + Merriweather
Инструмент: fontpair.co — готовые проверенные пары из Google Fonts
12 / 16
Доступность и Best Practices
📏 Размер и длина
- Минимум 16px для основного текста
- Длина строки: 45–75 символов
- Идеал: 66 символов
max-width: 65ch
🎯 Выравнивание
- Основной текст — по левому краю
- По ширине (justify) — ❌ создаёт «реки»
- По центру — только для коротких заголовков
13 / 16
Контрастность (WCAG AA)
Минимальное соотношение: 4.5 : 1
Хороший контраст
16.6 : 1 ✓
Плохой контраст
2.3 : 1 ✗
Совет: Не используйте чистый чёрный (#000) на белом. Лучше #1A1A1A или #333333 — мягче для глаз.
14 / 16
Чек-лист типографа
- Используется ли WOFF2?
- Прописан ли
font-display: swap? - Размер основного текста ≥ 16px?
line-height для текста: 1.5–1.7?- Длина строки ≤ 75 символов?
- Контраст текста ≥ 4.5:1 (WCAG AA)?
- Не более 2 шрифтовых семейств?
- Чёткая иерархия заголовков?
15 / 16
Ключевые цифры
Мин. размер текста
16px
для основного текста на десктопе
Оптимальная длина строки
66
символов (включая пробелы)
Line-height для текста
1.5
золотой стандарт читаемости
Контраст WCAG AA
4.5:1
минимальное соотношение
16 / 16
Итоги
- Анатомия: x-height, baseline, ascender, descender
- Формат: WOFF2 +
font-display: swap - Variable Fonts: 1 файл = все начертания
- Иерархия: размер, вес, цвет, пространство
- Модульная шкала: математическая пропорция размеров
- Пары: контраст, суперсемейства, соответствие настроению
- Доступность: 16px+, 66 символов, контраст 4.5:1
СР №6: Выбор цветовой гаммы и сочетания шрифтов для лендинга
Срок: до начала 7-й пары (Интерактивная графика)