Typography Basics
- Learn font size, weight, alignment, and spacing utilities.
Why Typography Matters in UI Design
Typography is not decoration.
It is structure, hierarchy, and readability.In real projects:
Users scan before they read
Headings guide attention
Body text must be comfortable
Poor typography destroys UX
In Tailwind CSS, typography is controlled using utility classes tied to a consistent scale.
How Typography Works in Tailwind CSS
Tailwind does not encourage:
Random pixel values
Arbitrary font sizes
Inconsistent text styles
Instead, it provides:
Predefined font size scale
Predefined font weight scale
Sensible defaults
This creates visual rhythm and hierarchy.
Font Size Utilities
What Are Font Size Utilities ?
Font size utilities control text size using the syntax:
text-{size}
Each size maps to:
Font size
Line height (important for readability)
Tailwind Font Size Scale
Common font size utilities:
Class Typical Use text-xs Small labels, captions text-sm Secondary text text-base Default body text text-lg Emphasized text text-xl Subheadings text-2xl Section headings text-3xl Page headings text-4xl+ Hero titles You do not need to memorize values - you use them by purpose.
Tailwind Font Size Utilities
Font size utilities in Tailwind control text size for paragraphs and headings using predefined classes.
<p class="text-sm text-gray-600">
Small helper text
</p>
<p class="text-base text-gray-700">
Normal body text
</p>
<p class="text-lg text-gray-800">
Highlighted paragraph
</p>
<h1 class="text-3xl font-bold text-gray-900">
Page Title
</h1>
<h2 class="text-xl font-semibold text-gray-800">
Section Title
</h2>
<h3 class="text-lg font-medium text-gray-700">
Subsection Title
</h3>This creates clear visual hierarchy.
Why Tailwind Includes Line Height Automatically
When you use:
<p class="text-lg">
Tailwind also applies:
A matching line height
This ensures:
Better readability
Proper spacing
No cramped text
This is why Tailwind typography feels “clean” by default.
Font Weight Utilities
What Are Font Weight Utilities ?
Font weight utilities control how bold or light text appears using:
font-{weight}
Common Font Weight Classes
Most UIs use only 3–4 weights.Class Weight Typical Use font-thin 100 Rare font-light 300 Subtle text font-normal 400 Body text font-medium 500 Labels font-semibold 600 Headings font-bold 700 Titles font-extrabold 800 Hero text
Tailwind Font Weight Utilities
Font weight utilities control text emphasis and can be combined with font size utilities for better typography.
<p class="font-normal">
Regular text
</p>
<p class="font-medium">
Medium emphasis
</p>
<p class="font-semibold">
Strong emphasis
</p>
<p class="font-bold">
Important text
</p>
<h2 class="text-2xl font-semibold text-gray-900">
Section Heading
</h2>
<p class="text-base font-normal text-gray-700">
Supporting content text
</p>This is a real-world typography pattern.
Typography Hierarchy (Real UI Thinking)
A good hierarchy usually looks like:
Large + bold → main heading
Medium + semi-bold → section title
Normal + regular → body text
Small + light → helper text
Tailwind Typography Hierarchy
Typography hierarchy uses different font sizes and weights to organize headings, body text, and helper text clearly.
<h1 class="text-3xl font-bold">Dashboard</h1>
<p class="text-sm text-gray-500">
Last updated 2 hours ago
</p>This guides the user’s eye naturally.
Responsive Typography
Tailwind Responsive Typography
Responsive typography utilities allow font sizes to change based on screen size.
<h1 class="text-xl md:text-3xl font-bold">
Responsive Heading
</h1>Meaning:
Smaller text on mobile
Larger text on desktop
This will be covered in responsive lessons.
Common Beginner Mistakes
Using bold everywhere
Using large text everywhere
No visual hierarchy
Mixing too many font sizes
Ignoring line height (Tailwind handles it, but misuse still hurts)
Best Practices for Typography in Tailwind
Use text-base for most body text
Limit font weights (normal, medium, bold)
Use size + weight together
Keep headings visually distinct
Follow a consistent hierarchy