Typography Utilities

Style text hierarchies with Tailwind font sizes, line height leading, letter spacing tracking, font weights, and line clamping.

Tailwind CSS5 min readConcept 7 of 16

What Typography Utilities in Tailwind are

Typography utilities in Tailwind provide standardized atomic classes for styling body copy, subheadings, hero titles, and UI captions.

Instead of writing custom CSS rules for font sizes and line heights, you compose utilities like text-2xl, font-bold, leading-tight, and tracking-tight directly on your headings.

Tailwind v4 also introduces the slash syntax (text-base/6), allowing you to set font size and line height together in a single compact token.

Why standardized typography tokens matter

Unconstrained typography creates visual noise and reduces readability across a web application:

1. **Consistent Hierarchy**: Pre-defined font sizes (text-xs through text-5xl) enforce visual harmony across pages.

2. **Proportional Line Height**: leading-tight and leading-relaxed prevent text lines from colliding on mobile screens or spreading too far apart.

3. **Clean Truncation**: Utilities like truncate and line-clamp-2 handle text overflow gracefully without manual JavaScript string slicing.

How to compose typographic hierarchy

Building typographic scale follows three simple patterns:

1. **Hero Headings**: Combine large size, bold weight, tight leading, and negative tracking: text-4xl font-extrabold leading-tight tracking-tight text-slate-100.

2. **Body Copy**: Combine base font size with comfortable line height and crisp contrast: text-base/relaxed text-slate-200.

3. **Card Summaries**: Use line-clamp-2 text-sm text-slate-300 to truncate multi-line descriptions cleanly after two lines.

Typographic Specimen Showcase

Examine how Tailwind typography tokens compose font size, line height leading, tracking, and multi-line clamping into clean text hierarchies.

<!-- Modern Tailwind v4 Typography Composition -->
<div className="space-y-4 p-6 bg-slate-900 rounded-2xl">
<!-- Slash notation: size 1.5rem (2xl) + leading 2rem (8) -->
<h2 className="text-2xl/8 font-bold tracking-tight text-slate-100">
Layout & Typography in Tailwind v4
</h2>
<!-- Base size + relaxed line height -->
<p className="text-base/relaxed text-slate-200">
Utility classes enforce visual hierarchy and consistent rhythm.
</p>
<!-- Multi-line clamp with text truncation -->
<p className="line-clamp-2 text-sm text-slate-300">
Line clamp truncates long descriptions automatically after two lines,
ensuring card layouts retain consistent height across grid cells.
</p>
</div>
Heading Token Specimentext-2xl/8 font-bold tracking-tight

Layout & Typography in Tailwind v4

Body Copy Token Specimentext-base/relaxed

Utility classes enforce visual hierarchy and consistent rhythm across screen sizes.

Line Clamp Specimen (2 lines max)line-clamp-2 text-sm

Line clamp truncates long descriptions automatically after two lines, ensuring card layouts retain consistent height across bento box grid cells even when dynamic content length varies unpredictably.

Tailwind typography utilities combine font size, line-height slash notation, tracking, and line-clamp to construct scalable content scale.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1In Tailwind CSS v4, what does the class `text-lg/8` configure on a text element?
  2. 2What is the primary difference between `truncate` and `line-clamp-2`?
  3. 3Which Tailwind utility family controls CSS `letter-spacing`?

Remember this

  • Use text-* for font sizes and font-* for font weights.
  • Use leading-* for line height and tracking-* for letter spacing.
  • Tailwind v4 slash notation (text-lg/7) combines size and line height in one token.
  • Use truncate for 1-line text clipping and line-clamp-2 for card descriptions.

Done with this concept?

Mark it complete to track your progress. No login needed.