❮ Previous

Next ❯

Readability & UX

Enhance text readability and user experience.

Why Readability is a UX Problem
Many developers think:
“Typography is just styling.”
In reality:
- Typography decides how long users stay
- How much they read
- How tired their eyes feel
- How trustworthy the product feels
Bad typography causes:
- Faster exits
- Skipped content
- User frustration
- Accessibility issues
Good typography:
- Feels effortless
- Goes unnoticed
- Builds confidence
In Tailwind CSS, typography tools are powerful but UX decisions are still your responsibility.
Responsive Typography from a UX Perspective
You already know how to make text responsive.
Now let’s focus on why and when to adjust it.
Reading Distance Changes with Device
Device Reading Distance Typography Impact
Mobile Very close Smaller text can still work
Tablet Medium Needs balance
Desktop Farther away Text must scale up
This is why one font size everywhere is bad UX.

Responsive Typography Pattern

Adjusts text size across screen sizes to maintain comfortable readability on different devices.

<p class="text-sm md:text-base lg:text-lg leading-relaxed">
  This paragraph is optimized for reading comfort on all devices.
</p>

Why this works:
- Mobile → readable without scrolling fatigue
- Desktop → text doesn’t feel tiny or weak
- Line height scales with size
Headings & UX Hierarchy
Users scan before they read.
That means:
- Headings must stand out
- Body text must stay calm
- Spacing must support scanning

Heading and Text Hierarchy

Uses larger responsive headings and calm body text to create a clear visual hierarchy for better scanning and readability.

<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold leading-tight">
  Product Overview
</h1>

<p class="text-sm md:text-base leading-relaxed max-w-prose">
  Supporting content that users actually read.
</p>

UX principle:
Headings guide eyes, body text guides understanding.
Line Length & Readability
Even with perfect font size, line length can ruin readability.
Best practice:
- Limit text width on large screens

Optimal Line Length for Readability

Limits content width to maintain comfortable reading and prevent long lines from reducing readability.

<article class="max-w-prose">
  <p class="leading-relaxed">
    Long-form content remains readable and comfortable.
  </p>
</article>

Why this matters:
- Too-wide text causes eye fatigue
- Users lose their place easily
Typography UX is about reducing effort.
Responsive Typography Mistakes
Avoid these:
- Text too small on mobile
- Huge text everywhere
- Tight line height on paragraphs
- Long paragraphs without width limits
- Desktop text that feels “thin”
If users zoom in → typography failed.
Custom Fonts in Tailwind - UX First, Not Fashion
Custom fonts can:
- Improve brand identity
- Increase trust
- Improve reading comfort
Or completely destroy UX if chosen poorly.
Choosing the Right Google Font
When selecting a font:
- Prioritize legibility
- Avoid decorative fonts for body text
- Test on small screens
- Check multiple weights
Safe, UX-friendly font types:
- Sans-serif for UI & apps
- Clean serif for articles/blogs
Examples (Google Fonts):
- Inter
- Roboto
- Open Sans
- Lato
- Poppins (UI only, not long reading)
Using Google Fonts in Tailwind (CDN Method)
Step 1: Add Google Font in HTML

Add Google Font (Inter) via CDN

Loads the Inter font from Google Fonts using CDN for use in the project.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

This loads the font efficiently.
Step 2: Extend Tailwind Font Family

Extend Font Family

Adds the Inter font to Tailwind's default sans-serif font stack in the configuration file.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui'],
      },
    },
  },
}

Why this is important:
- Keeps system font fallback
- Prevents layout shift
- Maintains performance
Step 3: Use Font in UI

Apply Custom Font in UI

Applies the configured sans font family to the UI for consistent and readable typography.

<body class="font-sans">
  <h1 class="text-3xl font-bold">
    Clean, readable typography
  </h1>
</body>

Now typography is:
- Consistent
- Brand-aligned
- UX-safe
Using Multiple Weights (UX Best Practice)
Only load what you need.
Good practice:
- 400 → body text
- 500/600 → UI labels
- 700 → headings
Bad practice:
- Loading every weight
- Using thin fonts for reading
Fonts affect:
- Performance
- Battery usage
- Perceived quality

Responsive Typography with Custom Font

Combines responsive typography and a custom font to create a clean, readable layout across different screen sizes.

<section class="font-sans max-w-prose mx-auto p-4 md:p-8">
  <h1 class="text-2xl md:text-4xl font-bold leading-tight mb-4">
    Readability-First Design
  </h1>

  <p class="text-sm md:text-base leading-relaxed">
    Typography optimized for real users, not just screenshots.
  </p>
</section>

This combines:
- Responsive sizing
- Proper line height
- Width control
- Custom font
- UX-focused hierarchy
Accessibility & Readability
Good typography improves accessibility when:
- Font size is readable without zoom
- Line height is adequate
- Text contrast is strong
- Fonts are not too thin
Avoid:
- Light fonts + light colors
- Small text for important content
- Decorative fonts for instructions
Accessibility is UX at its core.
Before shipping, ask:
- Can I read this comfortably on mobile ?
- Does desktop text feel too small ?
- Are headings clearly distinct ?
- Is long text easy to follow ?
- Do custom fonts hurt performance ?
If the answer is “yes” → typography is doing its job.