Font Size & Family

Set font size and family from the built-in type scale, with a sensible line-height bundled into every step.

4 min read Level 1/5 #tailwind#typography

What you'll learn

Use the text-xs through text-9xl scale
Switch families with font-sans, font-serif, and font-mono
Use arbitrary sizes and the size/leading shorthand

Picking a random font-size for every element is how type ends up looking noisy. Tailwind hands you a curated scale where each step also carries a matching line-height.

The Size Scale

The scale runs from text-xs up to text-9xl, with text-base (1rem) as the anchor:

<p class="text-sm text-gray-600">Caption — small print</p>
<p class="text-base">Body copy at a comfortable default.</p>
<h2 class="text-3xl font-bold">A section heading</h2>
<h1 class="text-6xl font-bold">A hero headline</h1>

Every size ships with a paired line-height, so text-3xl is already readable as a heading without you touching leading-*.

Switching Font Family

Three family utilities cover most needs:

<p class="font-sans">UI and body text (default).</p>
<p class="font-serif">Editorial, long-form reading.</p>
<code class="font-mono">const x = 42;</code>

Arbitrary Sizes and the Shorthand

When the scale does not have exactly what you want, use an arbitrary value. You can also set size and line-height together with a slash:

<p class="text-[13px]">An exact pixel size.</p>
<p class="text-base/7">Base size with a 1.75rem line-height.</p>
<p class="text-lg/snug">Large text, snug leading.</p>

Extending the Scale

Because v4 is CSS-first, you add a new step by declaring a theme variable:

@import "tailwindcss";

@theme {
  --text-tiny: 0.7rem;
}

That enables text-tiny everywhere, exactly like the built-in steps.

Font Weight & Style →