Tailwind CSS Academy · Lesson

Responsive Typography and Spacing

Adjust font sizes and spacing at different breakpoints to maintain readable and proportional designs across all devices.

Why Typography Must Scale

A headline that looks elegant at 48px on a desktop monitor is overwhelming on a 375px phone screen. Conversely, body text at 14px that is comfortable on mobile becomes tiny and hard to read on a large 4K display. Responsive typography solves this by defining different font sizes at different viewport widths, ensuring readability across all devices. Tailwind makes this effortless with responsive text size utilities.

<!-- Hero headline: grows with screen size -->
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight">
  Build Beautiful UIs
</h1>

Responsive Font Sizes

Tailwind's text-* utilities pair naturally with responsive prefixes. A typical heading scale starts at text-2xl on mobile and steps up to text-5xl or beyond on desktop. Body text might go from text-sm on mobile to text-base on desktop. The key is choosing comfortable starting sizes for the smallest devices, then increasing them progressively.

<!-- Typography scale across breakpoints -->
<div class="space-y-6 p-6 max-w-4xl">
  <!-- Display heading: large jump from mobile to desktop -->
  <h1 class="text-3xl md:text-5xl lg:text-7xl font-black tracking-tight">
    Display Heading
  </h1>
  <!-- Section heading -->
  <h2 class="text-xl md:text-2xl lg:text-3xl font-bold">Section Heading</h2>
  <!-- Body copy -->
  <p class="text-sm md:text-base lg:text-lg text-gray-700 leading-relaxed max-w-prose">
    Body copy scales from small on mobile to base on tablet to large on desktop for comfortable reading at every size.
  </p>
  <!-- Caption / meta -->
  <p class="text-xs md:text-sm text-gray-500">Caption text</p>
</div>

All lessons in this course

← Back to Tailwind CSS Academy