Typography Utilities
Learn Tailwind's font-size, font-weight, text-align, and line-height utility classes for controlling how text looks and reads on the page.
Introduction
Good typography is most of what makes a page look designed rather than thrown together. Tailwind gives you a full, consistent typography scale out of the box: font sizes, font weights, text alignment, and line heights, all expressed as simple utility classes. This lesson covers each category with real examples you can apply immediately.
Font Size
Tailwind's font-size utilities follow the pattern text-{size}, using a named scale (rather than raw pixel values) from text-xs up through text-9xl. Each step also sets a sensible default line-height to match, so text usually looks well-spaced without extra configuration.
| Class | Font Size | Typical Use |
|---|---|---|
| text-xs | 0.75rem (12px) | Fine print, captions |
| text-sm | 0.875rem (14px) | Secondary text, labels |
| text-base | 1rem (16px) | Default body text |
| text-lg | 1.125rem (18px) | Slightly emphasized body text |
| text-xl / text-2xl | 1.25rem / 1.5rem | Small headings, card titles |
| text-3xl to text-5xl | 1.875rem – 3rem | Section and page headings |
<p class="text-xs">Fine print text</p><p class="text-base">Regular body text</p><h2 class="text-3xl">A Page Heading</h2>Click Run to see what this code prints.
Font Weight
Font weight utilities follow the pattern font-{weight}, mapped to standard CSS numeric weights from font-thin (100) through font-black (900). The most commonly used are font-normal (400), font-medium (500), font-semibold (600), and font-bold (700).
<p class="font-normal">Normal weight text</p><p class="font-medium">Medium weight text</p><p class="font-semibold">Semibold weight text</p><p class="font-bold">Bold weight text</p>Click Run to see what this code prints.
Text Alignment
Alignment utilities are straightforward: text-left, text-center, text-right, and text-justify map directly to the CSS text-align property.
<p class="text-left">Left aligned</p><p class="text-center">Center aligned</p><p class="text-right">Right aligned</p>Click Run to see what this code prints.
Line Height
Line height utilities use the leading-{value} pattern (named after the print-typography term 'leading'). Tailwind offers both a relative scale (leading-none, leading-tight, leading-normal, leading-loose) and fixed-number values (leading-4 through leading-10) for precise control over vertical spacing between lines of wrapped text.
<p class="leading-tight max-w-xs"> This paragraph uses tight line height, so wrapped lines sit close together for a compact look.</p><p class="leading-loose max-w-xs mt-4"> This paragraph uses loose line height, so wrapped lines have noticeably more breathing room between them.</p>Click Run to see what this code prints.
Putting It Together
Combining these four categories is how you build a typical text block, like an article intro.
<h1 class="text-4xl font-bold text-center leading-tight"> Learn Tailwind CSS the Right Way</h1><p class="mt-4 text-lg font-normal text-center leading-relaxed"> A practical, example-driven course covering everything from utility classes to full layouts.</p>Click Run to see what this code prints.
Common Mistakes
- Confusing font-bold (a font-weight utility) with text-lg/text-xl (font-size utilities) — they control entirely different properties.
- Forgetting that leading-* controls line height, not letter spacing (that's tracking-*, a separate utility).
- Overriding line-height manually with custom CSS when a built-in leading-* value already covers the need.
- Using arbitrarily large text-* jumps between headings and body text instead of Tailwind's structured scale, producing an inconsistent visual hierarchy.
Best Practices
- Stick to Tailwind's named font-size scale (text-sm, text-lg, text-2xl, etc.) rather than reaching for arbitrary pixel values.
- Pair larger headings with tighter line-height (leading-tight) and body copy with more relaxed line-height (leading-relaxed or leading-loose) for better readability.
- Use font-semibold or font-bold sparingly to preserve visual hierarchy — overusing bold text flattens emphasis.
- Constrain paragraph width (with max-w-* utilities) alongside line-height choices, since ideal line length affects readability as much as line spacing does.
Frequently Asked Questions
font-bold changes the font-weight property (how thick the letters look). text-xl changes the font-size property (how large the text is). They're independent and are almost always combined together, not interchangeable.
Yes, either by extending theme.fontSize in tailwind.config.js for a reusable named size, or by using an arbitrary value like text-[22px] directly in your markup for a one-off case.
It sets line-height to 1 (equal to the font size, with no extra space), which is useful for large display headings where you don't want extra vertical space between lines, but generally too tight for readable body paragraphs.
Yes — browsers default to roughly 16px, and Tailwind's own base styles (from @tailwind base) generally preserve sensible defaults, but it's best practice to be explicit with text-base or another size utility for consistency.
Key Takeaways
- Font size utilities use the text-{size} pattern, from text-xs to text-9xl.
- Font weight utilities use the font-{weight} pattern, from font-thin to font-black.
- Text alignment utilities (text-left, text-center, text-right, text-justify) map directly to text-align.
- Line height utilities use the leading-{value} pattern and control vertical spacing between wrapped lines.
Summary
You now have a solid grasp of Tailwind's typography utilities for size, weight, alignment, and line height. Next, you'll explore Tailwind's default color palette and the text/bg/border color utilities built on top of it.