A fluid typography calculator generates CSS clamp() values that make font sizes scale smoothly between mobile and desktop without media query breakpoints. Enter minimum and maximum font sizes with their corresponding viewport widths to get production-ready responsive typography CSS.
Quick Calculator
Type System
clamp() Formula
CSS Output
How to Use the Fluid Typography Calculator
Fluid typography eliminates font size media queries by making text scale continuously between screen sizes. CSS clamp(min, preferred, max) is the key function — this fluid typography calculator handles the math automatically.
Step 1: Set Min and Max Font Sizes
Enter the font size you want on small screens (min) and large screens (max). For body text: 16px min / 18px max. For H1: 28px min / 56px max. For display headings: 36px min / 80px max.
Step 2: Set Viewport Bounds
The min viewport (default: 320px) is where the minimum font size kicks in. The max viewport (default: 1200px) is where the text reaches its maximum size. Between these viewports, the font scales linearly.
Step 3: Build a Full Type System
Click Load h1-h6 presets to generate a complete fluid type system for all heading levels. Each entry calculates its own clamp() value with sensible defaults. You can then edit individual entries.
Step 4: Copy and Apply
Copy the full CSS output with all custom properties defined as --fluid-* variables. Apply them with font-size: var(--fluid-h1) in your stylesheet.
FAQ
Is this fluid typography calculator free?
Yes, completely free with no limits or account required. All calculations run locally in your browser.
What is CSS clamp() for font sizes?
CSS clamp(min, preferred, max) sets a value that is never less than min, never more than max, and equals the preferred value when possible. For typography, this creates font sizes that scale smoothly between a minimum (mobile) and maximum (desktop) based on viewport width.
How does fluid typography work?
Fluid typography uses a preferred value calculated as a viewport-relative value (vw) plus a constant. The formula is: preferred = slope * 100vw + intercept. The slope determines how fast it grows with viewport width. clamp() then constrains this to your min and max values.
What is the formula for CSS fluid typography?
The formula is: clamp(min-size, min-size + (max-size - min-size) * ((100vw - min-viewport) / (max-viewport - min-viewport)), max-size). This simplifies to: clamp(min, calc(slope * 100vw + intercept), max) where slope = (max-size - min-size) / (max-viewport - min-viewport).
Should I use px or rem for fluid typography?
Use rem for better accessibility. If a user has set a large browser font size, rem-based fluid typography respects that preference. Using px ignores the user's font size settings. Convert px values to rem by dividing by 16 (the default root font size).
What is a good minimum viewport for fluid typography?
320px is the smallest common mobile screen width (iPhone SE). 375px covers most modern smartphones. Using 320px as minimum ensures your typography is readable on all devices. The maximum is typically 1200px-1400px for widescreen desktops.
Can I use fluid typography for spacing too?
Yes! The same clamp() technique works for any CSS property with numeric values — padding, margin, gap, border-radius. This creates fully fluid layouts where everything scales proportionally between mobile and desktop sizes.