Tailwind CSS Academy · Урок

Высота строки и межбуквенный интервал

Управляйте читаемостью с помощью utility-классов leading-* для высоты строки и tracking-* для межбуквенного интервала.

Урок 3 из 413 шагов

«Высота строки и межбуквенный интервал» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Tailwind CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Tailwind CSS Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Why Line Height Matters

Line height is the space between lines. Too tight feels cramped, too loose feels scattered. Getting it right makes long text noticeably easier to read.

Tailwind's leading-* Utilities

Set it with the leading-* utilities: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2.0). The name comes from old print type.

<p class="leading-tight">Tight: good for headings</p>
<p class="leading-normal">Normal: default for most text</p>
<p class="leading-relaxed">Relaxed: comfortable for body text</p>
<p class="leading-loose">Loose: for spacious editorial layouts</p>

Leading for Headings vs Body

Use leading-tight for headings, since big text already has room, and leading-relaxed for body, which needs more breathing space. leading-normal is a safe default.

<h1 class="text-4xl font-bold leading-tight text-gray-900">
  A Two-Line Heading That
  Stays Tightly Together
</h1>
<p class="text-base leading-relaxed text-gray-600 mt-4">
  Body paragraph text benefits from more line spacing.
  It makes long passages easier to follow line by line.
</p>

Fixed Leading Values

Tailwind also has fixed leading: leading-3 to leading-10 set exact pixel heights. Reach for these in tables or dense UI where you need precise spacing.

<p class="leading-3">Very tight (12px)</p>
<p class="leading-5">Compact (20px)</p>
<p class="leading-7">Comfortable (28px)</p>
<p class="leading-10">Spacious (40px)</p>

Introduction to Letter Spacing

Letter spacing, or tracking, is the gap between characters. Tight tracking feels modern on big headings; wide tracking suits short labels like badges and tags.

Tailwind's tracking-* Utilities

Control it with tracking-*: from tracking-tighter and tracking-tight, through normal, to tracking-wide and tracking-widest. Negative pulls in, positive spreads out.

<p class="tracking-tighter">Tighter: editorial large headings</p>
<p class="tracking-normal">Normal: default body text</p>
<p class="tracking-wide">Wide: comfortable subheadings</p>
<p class="tracking-widest">Widest: UI labels and badges</p>

Tracking for Display Headings

Big display headings almost always want tracking-tight or tracking-tighter. At large sizes the default spacing feels loose, and tightening it looks polished.

<!-- Without tracking adjustment -->
<h1 class="text-6xl font-bold">Feels Loose</h1>

<!-- Professional: tighter tracking at large sizes -->
<h1 class="text-6xl font-bold tracking-tight">Feels Cohesive</h1>

Tracking for UI Labels

For uppercase UI labels, try text-xs font-semibold uppercase tracking-wider text-gray-500. The extra spacing offsets how cramped uppercase letters can feel.

<!-- Dashboard section label -->
<span class="text-xs font-semibold uppercase tracking-wider text-gray-500">
  Recent Activity
</span>

<!-- Badge -->
<span class="bg-green-100 text-green-700 text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full">
  Active
</span>

Combining Leading and Tracking

Leading and tracking shine together. A pull quote might use leading-relaxed tracking-wide for an open feel; a metric label uses tracking-widest leading-none.

<!-- Pull quote style -->
<blockquote class="text-2xl italic font-light leading-relaxed tracking-wide text-gray-600">
  'Design is intelligence made visible.'
</blockquote>

<!-- Dashboard label style -->
<p class="text-xs font-bold uppercase tracking-widest leading-none text-gray-500">
  Revenue MTD
</p>

Word Spacing Utilities

Tailwind even has word spacing: word-spacing-tight, normal, and wide adjust the gap between words. You will need it rarely, mostly for justified or display text.

<p class="word-spacing-wide text-gray-700">
  Extra space between each word in this sentence.
</p>

Practical: Blog Article Styles

A polished blog article: text-4xl font-bold leading-tight for the title, text-xl font-light for the subtitle, text-lg leading-relaxed for body, max-w-prose to wrap.

<article class="max-w-prose mx-auto px-4">
  <h1 class="text-4xl font-bold leading-tight tracking-tight text-gray-900 mb-2">
    Article Title
  </h1>
  <p class="text-xl font-light leading-snug text-gray-500 mb-8">
    A compelling subtitle for the article.
  </p>
  <p class="text-lg leading-relaxed text-gray-700">
    The body of the article content goes here.
  </p>
</article>

Quick Check

Quick check! See how spacing settled in. 📏

Ответь в интерактивном уроке

Lesson Recap

Nice! leading-* sets line height, tracking-* sets letter spacing, and headings like tight tracking while body likes relaxed leading. Next up: alignment and decoration.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 30
Уроки: 120

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Высота строки и межбуквенный интервал» бесплатный?

Да — полный текст урока «Высота строки и межбуквенный интервал» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Высота строки и межбуквенный интервал»?

Управляйте читаемостью с помощью utility-классов leading-* для высоты строки и tracking-* для межбуквенного интервала. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?

Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Высота строки и межбуквенный интервал»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?

Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Tailwind CSS Academy