Урок 05. Теория: размеры, вес, интервалы, иерархия

📁 Раздел: Базовые утилиты ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

Класс размера несёт и межстрочный интервал: text-sm — это 0.875rem вместе с подходящим line-height. Иерархия строится тремя средствами: размером, весом и цветом. Читаемость — ограничением длины строки (max-w-prose) и достаточным межстрочным интервалом (leading-relaxed для длинных текстов).

Размер и межстрочный интервал — одна пара

В обычном CSS размер шрифта и line-height задают раздельно, и интервал часто забывают. В Tailwind они идут вместе:

.text-sm {
  font-size: var(--text-sm);                    /* 0.875rem */
  line-height: var(--text-sm--line-height);     /* подобран под размер */
}

Поэтому text-sm и text-3xl сразу выглядят соразмерно. Если интервал нужен другой, его меняют явно: leading-tight, leading-relaxed или парной записью text-3xl/9 (размер 3xl с интервалом 9 шагов шкалы).

text-xs — подписи, служебные пометки

text-sm — основной текст интерфейса

text-base — текст статьи

text-xl — подзаголовок

text-3xl — заголовок страницы

<div class="space-y-3">
  <p class="text-xs text-slate-700">text-xs — подписи, служебные пометки</p>
  <p class="text-sm text-slate-700">text-sm — основной текст интерфейса</p>
  <p class="text-base text-slate-700">text-base — текст статьи</p>
  <p class="text-xl text-slate-900">text-xl — подзаголовок</p>
  <p class="text-3xl font-semibold text-slate-900">text-3xl — заголовок страницы</p>
</div>

Типографическая шкала — как громкость голоса в разговоре. Шёпот, обычная речь, оклик. Если всё сказано одинаково громко, слушатель не поймёт, что главное. Если каждое слово другой громкости — устанет через минуту. Трёх-четырёх уровней достаточно почти всегда.

Три инструмента иерархии

Чтобы читатель понимал структуру, хватает трёх средств — и лучше менять их вместе, а не по отдельности:

  • Размер — text-2xl против text-sm;
  • Вес — font-semibold против font-normal;
  • Цвет — text-slate-900 против text-slate-500.

Аналитика

Отчёт за июль

Три уровня иерархии: надзаголовок, заголовок и текст. Обратите внимание, что меняется не только размер, но и вес с цветом.

Обновлено 5 минут назад

<article class="max-w-md">
  <p class="text-xs font-medium uppercase tracking-wide text-sky-700">Аналитика</p>
  <h2 class="mt-1 text-2xl font-semibold tracking-tight text-slate-900">Отчёт за июль</h2>
  <p class="mt-2 text-sm leading-relaxed text-slate-600">
    Три уровня иерархии: надзаголовок, заголовок и текст. Обратите внимание,
    что меняется не только размер, но и вес с цветом.
  </p>
  <p class="mt-3 text-xs text-slate-400">Обновлено 5 минут назад</p>
</article>

Межбуквенное и межстрочное расстояние

Крупный текст выглядит «рыхлым», если буквы стоят так же свободно, как в мелком. Отсюда правило: чем крупнее заголовок, тем плотнее трекинг.

tracking-tight — заголовок

обычный трекинг

tracking-widest — надпись капсом

<div class="space-y-2">
  <p class="text-3xl font-semibold tracking-tight text-slate-900">tracking-tight — заголовок</p>
  <p class="text-3xl font-semibold text-slate-900">обычный трекинг</p>
  <p class="text-xs uppercase tracking-widest text-slate-500">tracking-widest — надпись капсом</p>
</div>

С межстрочным интервалом наоборот: длинный текст читается легче при leading-relaxed, а плотные заголовки — при leading-tight.

Длина строки решает больше, чем шрифт

Комфортная длина строки — 45–75 знаков. Ограничивайте её всегда, когда текста больше двух строк:

Без ограничения строка тянется на всю доступную ширину, и на широком мониторе глазу трудно найти начало следующей строки — читатель сбивается и перечитывает. Этот эффект заметен не сразу, но утомляет.

С max-w-prose ширина ограничена примерно 65 знаками. Тот же текст читается заметно легче, потому что взгляду не приходится совершать длинный переход. 

<div class="space-y-4">
  <p class="text-sm text-slate-700">
    Без ограничения строка тянется на всю доступную ширину, и на широком мониторе
    глазу трудно найти начало следующей строки — читатель сбивается и перечитывает.
    Этот эффект заметен не сразу, но утомляет.
  </p>
  <p class="max-w-prose text-sm text-slate-700">
    С max-w-prose ширина ограничена примерно 65 знаками. Тот же текст читается
    заметно легче, потому что взгляду не приходится совершать длинный переход.
  </p>
</div>

Обрезка длинного текста

  • truncate — одна строка с многоточием (это сразу три свойства: overflow: hidden, text-overflow: ellipsis, white-space: nowrap);
  • line-clamp-2 — обрезать после двух строк;
  • break-words — переносить длинные слова, чтобы они не рвали раскладку.

truncate: очень длинное название документа, которое не помещается в одну строку

line-clamp-2: описание обрезается после второй строки, а дальше ставится многоточие — удобно для карточек в списке, где важна одинаковая высота

<div class="max-w-xs space-y-3">
  <p class="truncate rounded bg-slate-100 p-2 text-sm text-slate-700">truncate: очень длинное название документа, которое не помещается в одну строку</p>
  <p class="line-clamp-2 rounded bg-slate-100 p-2 text-sm text-slate-700">line-clamp-2: описание обрезается после второй строки, а дальше ставится многоточие — удобно для карточек в списке, где важна одинаковая высота</p>
</div>
Обрезка работает только тогда, когда у элемента есть ограничение ширины. Внутри flex-контейнера дополнительно нужен min-w-0, иначе элемент откажется сжиматься.

Мелочи, которые заметны

  • text-balance — выравнивает длину строк заголовка, убирая «висящее» последнее слово;
  • text-pretty — то же, но мягче, для абзацев;
  • tabular-nums — моноширинные цифры: столбцы чисел не «пляшут»;
  • antialiased — сглаживание шрифта на тёмном фоне.

обычный перенос

Годовой отчёт компании за прошедший период

text-balance

Годовой отчёт компании за прошедший период

<div class="grid max-w-md gap-4 sm:grid-cols-2">
  <div>
    <p class="text-xs text-slate-500">обычный перенос</p>
    <h3 class="text-lg font-semibold text-slate-900">Годовой отчёт компании за прошедший период</h3>
  </div>
  <div>
    <p class="text-xs text-slate-500">text-balance</p>
    <h3 class="text-lg font-semibold text-balance text-slate-900">Годовой отчёт компании за прошедший период</h3>
  </div>
</div>