Типографика: размер, начертание, межстрочье

Управляем текстом: размер, жирность, межстрочный интервал и расстояние между буквами.

Размер текста

Размер задаётся именованной шкалой text-* — от мелкого к крупному:

<h1 class="text-4xl">Большой заголовок</h1>
<p class="text-sm">Мелкая подпись</p>

Заголовок станет крупным, подпись — заметно мельче основного текста.

Начертание (жирность)

За толщину шрифта отвечает font-*:

• font-normal — обычный;
• font-medium — чуть плотнее;
• font-semibold — полужирный;
• font-bold — жирный.

<p class="font-bold">Важная мысль</p>

Текст станет жирным.

Выравнивание и регистр

Выравнивание — text-left, text-center, text-right. Регистр — uppercase (ВСЕ ПРОПИСНЫЕ), lowercase, capitalize (Каждое Слово С Большой). Часто их сочетают для надзаголовков:

<p class="text-center uppercase text-sm font-semibold">Раздел</p>

Получится мелкая полужирная надпись прописными буквами по центру — типичный «надзаголовок» секции.

Межстрочный интервал — leading

leading-* управляет высотой строки (расстоянием между строками текста). leading-tight сжимает строки, leading-relaxed — разводит. Для длинных абзацев свободный интервал читается легче:

<p class="leading-relaxed">Длинный абзац, который удобно читать...</p>

Строки разойдутся шире, текст «задышит».

Трекинг — tracking

tracking-* меняет расстояние между буквами. tracking-tight сжимает — хорошо смотрится на крупных заголовках; tracking-wide разводит — уместно в надписях прописными.

<h1 class="text-4xl font-bold tracking-tight">Заголовок</h1>

Буквы крупного заголовка чуть сблизятся — он будет смотреться плотнее и аккуратнее.

Итог

• text-* — размер шрифта, font-* — жирность.
• text-center/uppercase и т.п. управляют выравниванием и регистром.
• leading-* — межстрочный интервал, tracking-* — расстояние между буквами.