Dedicated fluid font sizes that scale smoothly between mobile and desktop
Using custom clamp() utilities separate from Tailwind's defaults
Perfect for display text, headers, and titles with dramatic scaling
class="text-heading-sm" | 16px → 30px
class="text-heading-md" | 20px → 40px
class="text-heading-lg" | 30px → 50px
class="text-heading-xl" | 40px → 60px
class="text-heading-2xl" | 50px → 70px
Subtle scaling for optimal readability across all screen sizes
Small body text for captions, footnotes, and secondary information. This size is perfect for supporting content that needs to be readable but not prominent.
class="text-body-sm" | 14px → 16px
Medium body text is the standard for most content. This provides excellent readability across all devices and is ideal for paragraphs, lists, and general content.
class="text-body-md" | 16px → 18px
Large body text works well for lead paragraphs, introductory content, or when you want to emphasize readability. This size commands attention while remaining comfortable to read.
class="text-body-lg" | 18px → 20px
Extra large body text is perfect for hero descriptions, important callouts, or when you want content to feel more impactful while maintaining body text characteristics.
class="text-body-xl" | 20px → 22px
2XL body text bridges the gap between body content and headings. Use this for prominent descriptions, large quotes, or featured content that needs to stand out.
class="text-body-2xl" | 22px → 24px
text-heading-sm 16px → 30px text-heading-md 20px → 40px text-heading-lg 30px → 50px text-heading-xl 40px → 60px text-heading-2xl 50px → 70px text-body-sm 14px → 16px text-body-md 16px → 18px text-body-lg 18px → 20px text-body-xl 20px → 22px text-body-2xl 22px → 24px
Our fluid typography system uses CSS clamp()
functions with mathematically calculated values to create perfect linear scaling between viewports.
This approach keeps Tailwind's standard classes (text-base,
text-lg, etc.) unchanged while providing
dedicated fluid classes for responsive typography.
The middle "preferred" value creates linear interpolation between two viewport sizes:
coefficient = (max_font - min_font) ÷ (max_viewport - min_viewport) × 100 base = min_font - (coefficient × min_viewport ÷ 100) clamp(min_font, base + coefficient×vw, max_font) 20px ÷ 1560px × 100 = 1.2821vw 30px - (1.2821 × 360px ÷ 100) = 1.5865rem This creates perfect linear scaling: at 360px viewport = 30px font, at 1920px viewport = 50px font
You can verify the math works by checking the computed font size at your target viewports using browser dev tools. At 360px width, you should see exactly your minimum size, and at 1920px width, exactly your maximum size.
Resize your browser window to see how the text scales smoothly!
This is hero description text that scales fluidly as you resize the browser window.
Standard paragraph text maintains perfect readability at all sizes while scaling subtly.
Small supporting text for captions or additional information.