Typography Scale

All typography classes included with Fluid Typography. All sizes scale fluidly between 375px (mobile) and 1440px (desktop) viewports by default.

Design Philosophy

Body variants match Tailwind's defaults on desktop for easy mental mapping:

• text-body = text-base (16px) on desktop, scales down to 14px on mobile
• text-body-sm = text-sm (14px) on desktop, scales down to 13px on mobile
• text-body-xs = text-xs (12px) on desktop, scales down to 11px on mobile

Display Styles

Large, bold typography for hero sections and landing pages.

Class	Mobile → Desktop	Font Weight	Use Case
text-display-2xl	48px → 72px	800	Massive hero titles
text-display-xl	40px → 60px	800	Large hero titles
text-display-lg	32px → 48px	700	Medium hero titles
text-display	28px → 36px	700	Small hero titles

Example

<h1 className="text-display-2xl">Massive Hero Title</h1>
<h1 className="text-display-xl">Large Hero Title</h1>
<h1 className="text-display-lg">Medium Hero Title</h1>
<h1 className="text-display">Small Hero Title</h1>

Heading Styles

Standard heading hierarchy (h1-h3).

Class	Mobile → Desktop	Font Weight	Use Case
text-h1	28px → 36px	700	Main page headings
text-h2	24px → 30px	700	Section headings
text-h3	20px → 24px	600	Subsection headings

Example

<h1 className="text-h1">Main Page Heading</h1>
<h2 className="text-h2">Section Heading</h2>
<h3 className="text-h3">Subsection Heading</h3>

Body Text

Regular paragraph and content text.

Class	Mobile → Desktop	Font Weight	Use Case
text-body	14px → 16px	400	Regular paragraphs
text-body-sm	13px → 14px	400	Smaller body text
text-body-xs	11px → 12px	400	Extra small text

Example

<p className="text-body">
  This is regular body text that scales smoothly from 14px on mobile to 16px on desktop.
</p>
<p className="text-body-sm">
  Smaller body text for secondary content.
</p>
<p className="text-body-xs">
  Extra small text for fine print or metadata.
</p>

Small Text

Utility text for captions, labels, and metadata.

Class	Mobile → Desktop	Font Weight	Additional Styles	Use Case
text-caption	10px → 11px	400	-	Image captions, footnotes
text-overline	10px → 11px	600	text-transform: uppercase letter-spacing: 0.1em	Labels, eyebrows

Example

<figure>
  <img src="photo.jpg" alt="Description" />
  <figcaption className="text-caption">Image caption text</figcaption>
</figure>

<span className="text-overline">Category Label</span>

CSS Output

When you use a fluid typography class, this is what gets generated:

.text-h1 {
  font-size: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}

The clamp() function ensures smooth scaling:

• Minimum: 1.75rem (28px) at 375px viewport
• Preferred: Calculated dynamically based on viewport width
• Maximum: 2.25rem (36px) at 1440px viewport

Overriding Styles

All typography utilities can be combined with other Tailwind classes:

{/* Override font weight */}
<h1 className="text-h1 font-normal">Light heading</h1>

{/* Override line height */}
<p className="text-body leading-relaxed">Relaxed paragraph</p>

{/* Override letter spacing */}
<h2 className="text-h2 tracking-tight">Tight heading</h2>

{/* Add color */}
<p className="text-body text-gray-700">Colored text</p>

Responsive Behavior

Unlike traditional breakpoint-based responsive design, fluid typography scales smoothly:

{/* Traditional approach - jumps at breakpoints */}
<h1 className="text-2xl md:text-3xl lg:text-4xl">Heading</h1>

{/* Fluid approach - scales smoothly */}
<h1 className="text-h1">Heading</h1>

At any viewport width between 375px and 1440px, your text will be the perfect size—no jumps, no sudden changes.

Next Steps

• Customization - Add custom scales and adjust viewport ranges
• Examples - See practical examples
• API Reference - Explore TypeScript types and defaults