Урок 05. Типографика
⚡ Кратко
Размер текста задаётся классами text-xs … text-9xl,
и каждый из них приносит с собой подходящий межстрочный интервал. Начертание —
font-normal … font-bold, межбуквенное расстояние —
tracking-*, межстрочное — leading-*. Обрезка длинного
текста: truncate и line-clamp-*.
О чём этот урок
Текст — основное содержимое интерфейса, и именно типографика отличает
«сверстано» от «выглядит дорого». Разберём шкалу размеров с парным
межстрочным интервалом, начертания, выравнивание, переносы, обрезку и приёмы,
которые делают текст читаемым: ограничение длины строки, text-balance
для заголовков, цветовая иерархия.
Preflight снимает браузерные стили с заголовков, поэтому размер
h1 вы задаёте сами — это не баг, а сознательное решение Tailwind.
Структура урока
Теория
Шкала размеров, начертания, интервалы, иерархия.
Справочник
Все классы типографики одной таблицей.
Примеры
Заголовки, цитата, обрезка, числа в таблице.
Старый vs Новый
Своя типографическая шкала против встроенной.
Задания
Собрать заголовочный блок и карточку статьи.
Решения
Готовые варианты с разбором.
Ошибки
Заголовки «не работают», нечитаемый текст, обрезка без ширины.
Домашнее задание
Страница статьи.
Ресурсы
Документация и плагин typography.
Практика
- Постройте иерархию: заголовок, подзаголовок, основной текст, подпись.
- Обрежьте длинное название в одну строку и описание — в две.
- Выровняйте числа в столбце так, чтобы разряды совпадали.