Part 27: Tailwind Typography: Font Families, Sizes & Weights

Typography sets the tone and readability of your brand. Tailwind provides an extensive typographic system.

1. Font Families

Tailwind includes three standard font family presets: - font-sans: Clean modern sans-serif (Inter, system-ui). - font-serif: Elegant serif typography (Merriweather, Georgia). - font-mono: Monospace font for code and data (Fira Code, JetBrains Mono).

2. Font Size Scale (text-*)

• text-xs: 12px
• text-sm: 14px
• text-base: 16px (body default)
• text-lg: 18px
• text-xl: 20px
• text-2xl: 24px
• text-3xl: 30px
• text-4xl: 36px
• text-5xl to text-9xl: Large display titles.

3. Font Weights (font-*)

• font-light (300)
• font-normal (400)
• font-medium (500)
• font-semibold (600)
• font-bold (700)
• font-extrabold (800)
• font-black (900)

<h1 class="text-4xl font-extrabold text-slate-900">Heading 1</h1>
<p class="text-base font-normal text-slate-600">Standard body paragraph.</p>

Key Takeaways

• Font sizes scale from text-xs up to text-9xl.
• Font weights use clear descriptors (font-medium, font-bold, font-extrabold).

In Part 28, we will explore Text Alignment, Line Height (Leading) & Letter Spacing (Tracking)!