Typography Foundation
Our typography system features 12 responsive roles using clamp() for fluid scaling across all devices, from 360px mobile to large desktop screens.
Interactive Responsive Demo
Resize your browser window to see how typography scales fluidly using clamp(). All text automatically adjusts between minimum and maximum sizes based on viewport width.
Current Viewport Width
Display XL
Responsive Typography
Headline Large
Scales with viewport
Body Large
Maintains readability at all sizes
Type Specimens
All 12 typography roles with technical specifications and platform mappings.
Display Xl
Hero headlines, major page titles
The quick brown fox jumps over the lazy dog
display-xl
clamp(2.2rem, 4vw, 3.1rem) (~35–50px)
1.1
-0.03em
display
Large Title
Display Large
Display Lg
Section headlines, feature titles
The quick brown fox jumps over the lazy dog
display-lg
clamp(1.9rem, 3.2vw, 2.5rem) (~30–40px)
1.15
-0.03em
display
Title 1
Display Medium
Headline Lg
Card titles, subsection headers
The quick brown fox jumps over the lazy dog
headline-lg
clamp(1.5rem, 2.6vw, 2rem) (~24–32px)
1.25
-0.02em
display
Title 2
Headline Large
Headline Md
List headers, dialog titles
The quick brown fox jumps over the lazy dog
headline-md
clamp(1.25rem, 2.1vw, 1.6rem) (~20–26px)
1.3
-0.01em
display
Title 3
Headline Medium
Headline Sm
Component headers, small titles
The quick brown fox jumps over the lazy dog
headline-sm
clamp(1.1rem, 1.8vw, 1.4rem) (~18–22px)
1.35
normal
display
Headline
Headline Small
Subheadline
Emphasized body text, subtitles
The quick brown fox jumps over the lazy dog
subheadline
clamp(1rem, 1.6vw, 1.25rem) (~16–20px)
1.4
normal
display
Subheadline
Title Large
Body Lg
Primary body text, descriptions
The quick brown fox jumps over the lazy dog
body-lg
clamp(1rem, 1.4vw, 1.1rem) (~16–18px)
1.6
normal
sans
Body
Body Large
Body Md
Secondary body text, list items
The quick brown fox jumps over the lazy dog
body-md
clamp(0.95rem, 1.3vw, 1.05rem) (~15–17px)
1.6
normal
sans
Callout
Body Medium
Body Sm
Supporting text, metadata
The quick brown fox jumps over the lazy dog
body-sm
clamp(0.85rem, 1.1vw, 0.95rem) (~14–15px)
1.5
normal
sans
Footnote
Body Small
Caption
Image captions, helper text
The quick brown fox jumps over the lazy dog
caption
clamp(0.75rem, 1vw, 0.85rem) (~12–13px)
1.4
0.03em
sans
Caption 1
Label Large
Overline
Eyebrows, category labels
The quick brown fox jumps over the lazy dog
overline
clamp(0.7rem, 0.9vw, 0.8rem) (~11–12px)
1.4
0.12em
sans
Caption 2
Label Medium
Button
Button labels, CTAs
button
clamp(0.9rem, 1.2vw, 1rem) (~14–16px)
1.4
0.06em
sans
Headline
Label Large
Platform Mapping Reference
| Web Role | Size Range | iOS | Android |
|---|---|---|---|
display-xl
|
~35–50px | Large Title | Display Large |
display-lg
|
~30–40px | Title 1 | Display Medium |
headline-lg
|
~24–32px | Title 2 | Headline Large |
headline-md
|
~20–26px | Title 3 | Headline Medium |
headline-sm
|
~18–22px | Headline | Headline Small |
subheadline
|
~16–20px | Subheadline | Title Large |
body-lg
|
~16–18px | Body | Body Large |
body-md
|
~15–17px | Callout | Body Medium |
body-sm
|
~14–15px | Footnote | Body Small |
caption
|
~12–13px | Caption 1 | Label Large |
overline
|
~11–12px | Caption 2 | Label Medium |
button
|
~14–16px | Headline | Label Large |
Typography Guidelines
Hierarchy & Scale
Use display roles for major headlines, headline roles for section headers, and body roles for content. Maintain clear visual hierarchy through size and weight.
Responsive Behavior
All typography uses clamp() for fluid scaling. Text automatically adjusts between minimum and maximum sizes based on viewport width without breakpoints.
Accessibility
Line heights are optimized for readability (1.5-1.6 for body text). Letter spacing improves legibility for small text and uppercase labels.
Consistency
Use semantic utility classes (ds-display-xl, ds-body-md, etc.) instead of arbitrary sizes to maintain consistency across the application.
Usage Examples
Article Layout
Health Advisory
Understanding Zika Virus Prevention
Zika virus is primarily transmitted through mosquito bites. Understanding prevention methods is crucial for protecting yourself and your community.
The most effective prevention strategies include using EPA-registered insect repellents, wearing long-sleeved shirts and pants, and eliminating standing water.
Card Layout
Risk Level: Moderate
Your Area Status
Recent mosquito activity detected in your region.
Last updated: 2 hours ago
Technical Implementation
Using Typography Utilities
Apply typography roles using semantic utility classes:
<h1 class="ds-display-xl">Page Title</h1>
<h2 class="ds-headline-lg">Section Header</h2>
<p class="ds-body-lg">Primary content text</p>
<p class="ds-caption">Helper text</p>Or use Tailwind's text size utilities directly:
<h1 class="text-display-xl font-display">Page Title</h1>
<p class="text-body-lg font-sans">Body text</p>Recommendation: Use semantic utility classes (ds-*) for consistency and easier maintenance. They include proper font family, color, and other properties.