Типографика и сетка, которые ведут по уроку
Сначала выстраиваем читаемый маршрут: ширину строки, шкалу заголовков, интервалы и карточки. Эффекты появляются только после этого.
Пример: Jaxon Landing page · Открыть разбор →
Результат
Вы соберёте компактную типографическую систему для учебной страницы: основной текст, два уровня заголовков, подписи, список шагов и карточку следующего действия. Хорошая сетка не обязана быть заметной. Её задача — помогать глазу быстро находить начало, объяснение, упражнение и проверку.
Не пытайтесь добиться иерархии только размером шрифта. Её создают также вес, контраст, отступ, длина строки и повторяемое положение элемента. Когда все надписи большие, жирные и цветные, пользователь тратит внимание на расшифровку интерфейса. Начинайте с нейтрального основного текста и усиливайте только действительно важные узлы.
Шаги
- Определите одно основное чтение: статья, каталог или дашборд. Для статьи ограничьте длину строки, чтобы абзац не растягивался во всю ширину окна.
- Назначьте роли текста: большой заголовок страницы, заголовок раздела, основной текст, подпись и кнопка. Одна роль должна иметь один повторяемый стиль.
- Задайте вертикальный ритм: больше пространства перед новым разделом, меньше — между связанными строками. Не используйте отступ как случайный декоративный эффект.
- В сетке карточек выровняйте заголовки, метки и действия по общим краям. При сужении экрана сначала уменьшайте число колонок, а не размер текста до нечитаемого.
- Проверьте экран без изображений и анимаций: порядок всё ещё должен быть очевиден.
Мини-проверка CSS
.lesson-copy { max-width: 68ch; }
.lesson-copy > * + * { margin-block-start: 1rem; }
.lesson-copy h2 { margin-block-start: 2.5rem; }
Проверьте также длинные слова, ссылки и русские заголовки: они чаще выявляют слабое место сетки, чем идеальный демонстрационный текст.
Критерий проверки
Человек может быстро найти цель, шаги и следующее действие; на телефоне нет горизонтальной прокрутки, а текст не превращается в плотную стену.
