Tailwind CSS 11 🎨 Typography Utilities (Font Family, Sizes, Weights, Line Height, Tracking) - KandZ

Typography is the most visible part of any interface. Text is everywhere — headings, body copy, labels, buttons, captions — and the choices of font, size, weight, line height, and letter spacing determine whether the interface reads as polished or amateurish. Tailwind provides utilities for each of these dimensions, and because they derive from the same design token system as colors and spacing, changing a token updates every element that uses it.

The typography utilities fall into five families: font family, font size, font weight, line height, and letter spacing (tracking). Each has a namespace in the @theme block, each generates utilities, and each can be combined with responsive and state variants. The most important interaction is between font size and line height: Tailwind’s font size utilities can carry a paired line height, so text-lg sets both the size and a proportional leading. Understanding this pairing is what makes text blocks readable without manual adjustment.

This chapter covers the five typography families, the font size and line height pairing, the @theme namespaces that define them, the responsive and state variants, and the patterns for building readable text hierarchies.

Key point: Typography utilities in Tailwind v4 derive from @theme namespaces: --font-* for families, --text-* for sizes (with paired line heights), --font-weight-* for weights, and --tracking-* for letter spacing. Font size tokens can include a line height with the --text-*--line-height suffix. Combine families, sizes, weights, and line heights to build a type scale, and use responsive variants to adjust at breakpoints.

Why typography utilities exist

The consistency problem. A design uses a limited set of type styles: three or four sizes, two or three weights, one or two families. Without a system, each element’s typography is chosen ad hoc, and the result drifts. Typography utilities constrain the choices to the tokens defined in the theme, so the same heading size appears everywhere a heading appears.

The readability problem. Font size alone does not make text readable. Line height and letter spacing determine how the eye moves through a block of text. A large heading needs tighter line height and slightly tighter tracking; body copy needs more generous line height. Tailwind’s pairing of size and line height encodes these relationships.

The rescalability problem. When the type scale changes — a rebrand, a redesign, a new base font — the change should propagate. Because the utilities derive from theme tokens, updating --text-base in @theme updates every element that uses text-base. No find-and-replace across the codebase.

The responsive problem. Type sizes often change at breakpoints: a hero heading is larger on desktop than on mobile. Responsive variants let the same element use different sizes at different widths without duplicating markup.

The dark-mode and theming problem. Font families and sizes rarely change between themes, but they can. Because they are CSS variables, a theme override can change the display font for a specific context without touching the components.

a. Font family utilities

The --font-* namespace in @theme defines font families. Each token generates a font-* utility.

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Merriweather", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Satoshi", sans-serif;
}

Each generates a utility:

<p class="font-sans">Body text in the sans-serif family.</p>
<h1 class="font-display">Heading in the display family.</h1>
<code class="font-mono">const x = 5;</code>

Tailwind ships with default families for sans, serif, and mono. Overriding them in @theme replaces the defaults.

A font stack includes fallbacks so that if the primary font fails to load, the browser uses a system font. The order matters: the browser tries each in turn until one is available.

--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

Font family utilities are typically applied to the root element so that all text inherits the family, and overridden on specific elements that need a different family.

<body class="font-sans">
  <h1 class="font-display">Title</h1>
  <code class="font-mono">code</code>
</body>

b. Font size utilities

The --text-* namespace defines font sizes. Each token generates a text-* utility for the size.

@theme {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
}

The default scale uses rem units, which are relative to the root font size. This means the entire scale scales with the user’s browser font size preference, which is an accessibility benefit.

Each size token can carry a paired line height using the --text-*--line-height suffix:

@theme {
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.6;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
}

When a size token has a paired line height, the text-* utility sets both properties:

<p class="text-base">Body text with 1.5 line height.</p>
<h1 class="text-3xl">Heading with 1.2 line height.</h1>

The pairing is what makes the scale usable without manual line height adjustment. Large sizes get tighter leading; body sizes get more generous leading.

Common utilities:

<p class="text-sm">Small text</p>
<p class="text-base">Default body text</p>
<h2 class="text-2xl">Section heading</h2>
<h1 class="text-4xl">Page heading</h1>

c. Font weight utilities

The --font-weight-* namespace defines weights, and each token generates a font-* utility. Because the font- prefix is shared with families, the value determines which property is set: a weight value (700) sets font-weight, and a family stack sets font-family.

Tailwind ships with the standard weights:

@theme {
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
}

The utilities:

<p class="font-normal">Normal weight</p>
<p class="font-medium">Medium weight</p>
<h2 class="font-semibold">Semibold heading</h2>
<h1 class="font-bold">Bold heading</h1>

The weight values must exist in the font itself. A font that only ships in regular and bold will not render a medium weight; the browser synthesizes it or falls back, which often looks worse than using one of the available weights.

A common pattern is to pair a lighter weight for body text with a heavier weight for headings:

<h1 class="font-display font-bold text-4xl">Title</h1>
<p class="font-sans font-normal text-base">Body text.</p>

d. Line height utilities

Line height (leading) controls the space between lines of text. It is defined by the --leading-* namespace, and the utilities use the leading-* prefix.

@theme {
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
}

The utilities:

<p class="leading-tight">Tight line height for headings</p>
<p class="leading-normal">Normal line height for body</p>
<p class="leading-relaxed">Relaxed line height for readability</p>

Line height can be set independently of font size, but when a size token has a paired line height, the text-* utility sets both. To override the paired line height, use a leading-* utility after the size:

<p class="text-lg leading-relaxed">Larger text with relaxed leading.</p>

Because both utilities set the same CSS property, the later one in the cascade wins. The order of classes in the class attribute does not matter; what matters is the order in the generated CSS, which Tailwind controls. In practice, a leading-* utility specified alongside a text-* utility overrides the paired line height.

Numeric line heights, like leading-6, set a fixed line height in spacing units:

<p class="leading-6">24px line height</p>

This is useful when the line height should be a specific value rather than a ratio.

e. Letter spacing (tracking) utilities

Letter spacing (tracking) controls the space between characters. It is defined by the --tracking-* namespace, and the utilities use the tracking-* prefix.

@theme {
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

The utilities:

<h1 class="tracking-tight">Tighter spacing for large headings</h1>
<p class="tracking-normal">Normal tracking for body</p>
<p class="tracking-wide">Wider tracking for small labels</p>

Large headings often look better with tighter tracking because the large size exaggerates the natural spacing between letters. Small uppercase labels often look better with wider tracking because the small size makes the letters feel cramped.

<h1 class="text-4xl font-bold tracking-tight">Large Heading</h1>
<span class="text-xs font-medium tracking-widest uppercase">Label</span>

f. Combining utilities for a type scale

A type scale is a set of named combinations of family, size, weight, line height, and tracking. In Tailwind, these combinations are expressed as a list of utilities on each element.

<h1 class="font-display text-4xl font-bold tracking-tight leading-none">
  Page Title
</h1>
<h2 class="font-display text-2xl font-semibold tracking-tight">
  Section Heading
</h2>
<p class="font-sans text-base font-normal leading-relaxed">
  Body paragraph with comfortable leading for readability.
</p>
<p class="font-sans text-sm font-normal leading-normal text-gray-600">
  Secondary text, smaller and lighter.
</p>
<span class="font-sans text-xs font-medium tracking-widest uppercase text-gray-500">
  Label
</span>

Each element expresses its role through the combination. The heading uses the display family, a large size, bold weight, tight tracking, and no extra leading. The body uses the sans family, base size, normal weight, and relaxed leading. The label uses small size, medium weight, wide tracking, and uppercase.

This pattern is the foundation of a design system. The combinations are not arbitrary; each one is chosen to serve a role, and the roles are consistent across the application.

The combinations can be extracted into component classes or React components, but the underlying utilities remain the source of truth.

g. Responsive and state typography

Every typography utility accepts responsive prefixes and state modifiers.

<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold">
  Responsive heading
</h1>

<p class="text-sm md:text-base leading-normal md:leading-relaxed">
  Responsive body text
</p>

<a class="font-medium hover:font-semibold transition-all">
  Interactive link
</a>

The mobile-first pattern applies: the smallest size is the default, and larger breakpoints override. text-3xl md:text-4xl lg:text-5xl means 1.875rem on mobile, 2.25rem on medium screens, and 3rem on large screens.

State variants like hover: and focus: work on typography utilities the same way they work on colors and spacing.

<button class="font-medium hover:font-semibold">
  Hover me
</button>

Complete Example Session

/* ============================================
PART 1: DEFINE FONT FAMILIES
============================================ */
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Satoshi", ui-sans-serif, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ============================================
PART 2: DEFINE TYPE SCALE WITH LINE HEIGHTS
============================================ */
@theme {
  --text-xs: 0.75rem;
  --text-xs--line-height: 1.5;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.5;
  --text-base: 1rem;
  --text-base--line-height: 1.6;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.6;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 1.3;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 1.1;
}

<!-- ============================================
PART 3: APPLY FAMILIES AND SIZES
============================================ -->
<p class="font-sans text-base">Body text.</p>
<h1 class="font-display text-4xl">Heading.</h1>
<code class="font-mono text-sm">const x = 5;</code>

<!-- ============================================
PART 4: FONT WEIGHTS
============================================ -->
<p class="font-normal">Normal</p>
<p class="font-medium">Medium</p>
<h2 class="font-semibold">Semibold</h2>
<h1 class="font-bold">Bold</h1>

<!-- ============================================
PART 5: LINE HEIGHT OVERRIDES
============================================ -->
<p class="text-lg leading-relaxed">Relaxed leading for larger text.</p>
<h1 class="text-4xl leading-none">Heading with no extra leading.</h1>

<!-- ============================================
PART 6: TRACKING
============================================ -->
<h1 class="text-4xl font-bold tracking-tight">Large Heading</h1>
<span class="text-xs font-medium tracking-widest uppercase">Label</span>

<!-- ============================================
PART 7: COMPLETE HEADING HIERARCHY
============================================ -->
<h1 class="font-display text-4xl font-bold tracking-tight leading-none">
  Page Title
</h1>
<h2 class="font-display text-2xl font-semibold tracking-tight leading-tight">
  Section Heading
</h2>
<h3 class="font-display text-lg font-semibold leading-snug">
  Subsection
</h3>

<!-- ============================================
PART 8: BODY TEXT HIERARCHY
============================================ -->
<p class="font-sans text-base font-normal leading-relaxed">
  Primary body text with comfortable leading.
</p>
<p class="font-sans text-sm font-normal leading-normal text-gray-600">
  Secondary text, smaller and muted.
</p>
<p class="font-sans text-xs font-medium tracking-wide uppercase text-gray-500">
  Caption or label
</p>

<!-- ============================================
PART 9: RESPONSIVE TYPOGRAPHY
============================================ -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight">
  Responsive Heading
</h1>
<p class="text-sm md:text-base leading-normal md:leading-relaxed">
  Responsive body text.
</p>

<!-- ============================================
PART 10: INTERACTIVE TYPOGRAPHY
============================================ -->
<a class="font-medium hover:font-semibold transition-all duration-150">
  Interactive link
</a>
<button class="font-semibold focus:outline focus:outline-2 focus:outline-blue-500">
  Focusable button
</button>

These ten parts cover font families, type scale with paired line heights, applying families and sizes, font weights, line height overrides, tracking, a complete heading hierarchy, a body text hierarchy, responsive typography, and interactive typography.

Quick Reference

Font Family Utilities

Utility	Token	Purpose
`font-sans`	`--font-sans`	Body text
`font-serif`	`--font-serif`	Editorial text
`font-mono`	`--font-mono`	Code
`font-display`	`--font-display`	Headings

Font Size Utilities

Utility	Token	Typical value
`text-xs`	`--text-xs`	0.75rem
`text-sm`	`--text-sm`	0.875rem
`text-base`	`--text-base`	1rem
`text-lg`	`--text-lg`	1.125rem
`text-xl`	`--text-xl`	1.25rem
`text-2xl`	`--text-2xl`	1.5rem
`text-4xl`	`--text-4xl`	2.25rem

Font Weight Utilities

Utility	Value
`font-thin`	100
`font-light`	300
`font-normal`	400
`font-medium`	500
`font-semibold`	600
`font-bold`	700
`font-black`	900

Line Height Utilities

Utility	Value
`leading-none`	1
`leading-tight`	1.25
`leading-snug`	1.375
`leading-normal`	1.5
`leading-relaxed`	1.625
`leading-loose`	2

Tracking Utilities

Utility	Value
`tracking-tighter`	-0.05em
`tracking-tight`	-0.025em
`tracking-normal`	0
`tracking-wide`	0.025em
`tracking-wider`	0.05em
`tracking-widest`	0.1em

Paired Line Height Tokens

Token	Purpose
`--text-base`	Font size
`--text-base--line-height`	Paired line height
`--text-4xl`	Font size
`--text-4xl--line-height`	Paired line height

Best Practices

✅ Do This:

<!-- Set family on root, override on specific elements -->
<body class="font-sans">
  <h1 class="font-display text-4xl font-bold tracking-tight">Title</h1>
</body>

<!-- Pair size with appropriate line height -->
<p class="text-base leading-relaxed">Body text</p>
<h1 class="text-4xl leading-none">Large heading</h1>

<!-- Use tighter tracking for large headings -->
<h1 class="text-4xl tracking-tight">Heading</h1>

<!-- Use wider tracking for small uppercase labels -->
<span class="text-xs tracking-widest uppercase">Label</span>

<!-- Responsive sizes -->
<h1 class="text-3xl md:text-4xl lg:text-5xl">Responsive</h1>

❌ Don’t Do This:

<!-- Mixing too many sizes without a system -->
<p class="text-[13px]">One-off size</p>  <!-- ❌ use the scale -->

<!-- Font weight not available in the font -->
<p class="font-black">Thin font with black weight</p>  <!-- ❌ synthesized -->

<!-- Inline tracking on everything -->
<p class="tracking-widest">Body text</p>  <!-- ❌ hard to read -->

<!-- No line height for large text -->
<h1 class="text-6xl">Title without leading control</h1>  <!-- ❌ -->

Common Pitfalls

Pitfall	Why It Happens	Fix
Text feels cramped	Line height too tight for size	Increase `leading-*`
Heading feels loose	Line height too generous	Use `leading-tight` or `leading-none`
Font weight ignored	Font lacks that weight	Use an available weight or a variable font
Tracking feels wrong	Applied at wrong size	Tight for large, wide for small uppercase
Type scale inconsistent	Using arbitrary values	Define tokens in `@theme`
Font not loading	No fallback stack	Include system fallbacks
Responsive sizes jumpy	Too few breakpoints	Add intermediate sizes

Real-World Examples

1. Page Title

<h1 class="font-display text-4xl font-bold tracking-tight leading-none">
  Page Title
</h1>

2. Section Heading

<h2 class="font-display text-2xl font-semibold tracking-tight">
  Section
</h2>

3. Body Paragraph

<p class="font-sans text-base leading-relaxed">
  A paragraph of body text with comfortable leading.
</p>

4. Small Print

<p class="font-sans text-sm leading-normal text-gray-600">
  Secondary text.
</p>

5. Uppercase Label

<span class="font-sans text-xs font-medium tracking-widest uppercase">
  Label
</span>

6. Code Block

<pre class="font-mono text-sm leading-normal">
  const x = 5;
</pre>

7. Blockquote

<blockquote class="font-serif text-lg italic leading-relaxed">
  A quoted passage.
</blockquote>

8. Responsive Hero

<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
  Hero Heading
</h1>

9. Button Text

<button class="font-medium text-sm tracking-wide">
  Click me
</button>

10. Complete Article

<article class="font-sans text-base leading-relaxed">
  <h1 class="font-display text-3xl font-bold tracking-tight leading-tight mb-4">
    Article Title
  </h1>
  <p class="mb-4">First paragraph.</p>
  <p class="mb-4">Second paragraph.</p>
</article>

Visual

Typography Utility Families

┌──────────────────────────────────────────────────────────────┐
│  font-sans     →  font-family: var(--font-sans)              │
│  text-lg       →  font-size: var(--text-lg)                  │
│                   line-height: var(--text-lg--line-height)   │
│  font-bold     →  font-weight: 700                           │
│  leading-tight →  line-height: 1.25                          │
│  tracking-wide →  letter-spacing: 0.025em                    │
└──────────────────────────────────────────────────────────────┘

The Type Scale

┌──────────────────────────────────────────────────────────────┐
│  text-xs    0.75rem  ─── captions, labels                    │
│  text-sm    0.875rem ─── secondary text                      │
│  text-base  1rem     ─── body text                           │
│  text-lg    1.125rem ─── lead paragraphs                     │
│  text-xl    1.25rem  ─── small headings                      │
│  text-2xl   1.5rem   ─── section headings                    │
│  text-3xl   1.875rem ─── page headings                       │
│  text-4xl   2.25rem  ─── large headings                      │
│  text-5xl   3rem     ─── hero headings                       │
└──────────────────────────────────────────────────────────────┘

Size and Line Height Pairing

┌──────────────────────────────────────────────────────────────┐
│  --text-base: 1rem                                           │
│  --text-base--line-height: 1.5                               │
│                                                              │
│  text-base  →  font-size: 1rem; line-height: 1.5             │
│                                                              │
│  --text-4xl: 2.25rem                                         │
│  --text-4xl--line-height: 1.1                                │
│                                                              │
│  text-4xl   →  font-size: 2.25rem; line-height: 1.1          │
│                                                              │
│  Larger sizes get tighter leading.                           │
└──────────────────────────────────────────────────────────────┘

Tracking by Size

┌──────────────────────────────────────────────────────────────┐
│  LARGE HEADINGS                                              │
│  └── tracking-tight (-0.025em)                               │
│      Large letters have more natural space; tightening helps │
│                                                              │
│  BODY TEXT                                                   │
│  └── tracking-normal (0)                                     │
│      Default spacing is designed for readability             │
│                                                              │
│  SMALL UPPERCASE                                             │
│  └── tracking-widest (0.1em)                                 │
│      Small capitals feel cramped; widening helps             │
└──────────────────────────────────────────────────────────────┘

Responsive Type Scale

┌──────────────────────────────────────────────────────────────┐
│  MOBILE           TABLET          DESKTOP                    │
│  text-3xl         md:text-4xl     lg:text-5xl                │
│  1.875rem         2.25rem         3rem                       │
│                                                              │
│  <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold">     │
│    Responsive heading                                        │
│  </h1>                                                       │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
Font family namespace	`--font-*`
Font size namespace	`--text-*`
Paired line height	`--text-*--line-height`
Font weight namespace	`--font-weight-*`
Line height namespace	`--leading-*`
Tracking namespace	`--tracking-*`
Family utilities	`font-sans`, `font-serif`, `font-mono`, `font-display`
Size utilities	`text-sm`, `text-base`, `text-lg`, `text-4xl`
Weight utilities	`font-normal`, `font-medium`, `font-bold`
Leading utilities	`leading-tight`, `leading-normal`, `leading-relaxed`
Tracking utilities	`tracking-tight`, `tracking-normal`, `tracking-widest`
Responsive	`md:text-4xl`, `lg:text-5xl`

Key takeaways:

Typography utilities derive from @theme namespaces. Font families from --font-*, sizes from --text-*, weights from --font-weight-*, leading from --leading-*, and tracking from --tracking-*.
Font size tokens can carry paired line heights. The --text-*--line-height suffix sets a proportional leading that the text-* utility applies automatically. This pairing is what makes the scale usable without manual adjustment.
Large text needs tighter leading and tracking. leading-tight or leading-none for headings, tracking-tight for large sizes. The size itself makes the natural spacing feel too loose.
Small uppercase text needs wider tracking. tracking-widest for labels and captions so the letters do not feel cramped.
Font weights must exist in the font. If the font only ships in regular and bold, using font-medium will synthesize the weight or fall back, which usually looks worse than using an available weight.
Apply the family at the root. Set font-sans on <body> and override with font-display or font-mono on specific elements.
Use responsive variants for type scales. A hero heading is larger on desktop than mobile. text-3xl md:text-4xl lg:text-5xl changes the size at breakpoints without duplicating markup.
A type hierarchy is a set of combinations. Each element’s role is expressed by the combination of family, size, weight, leading, and tracking. The combinations should be consistent across the application.

Remember: Typography is the most visible part of an interface, and Tailwind’s typography utilities make it systematic. The five families — font, size, weight, leading, and tracking — each derive from a @theme namespace, and each generates utilities. The critical interaction is between size and line height: a size token can carry a paired leading, so the text-* utility sets both. Large text gets tighter leading and tracking; small uppercase text gets wider tracking; body text gets normal leading. Combine the utilities to express a type scale, apply the family at the root, and use responsive variants to adjust at breakpoints. Because the tokens are CSS variables, updating @theme updates everything that uses them. This is what makes a Tailwind type system maintainable: the tokens define the scale, and the utilities apply it consistently.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!