Fluid Typography Generator
Create a cohesive, mathematically perfect fluid typography scale.
Fluid Typography
Generate responsive typography that scales seamlessly.
Viewport Widths
Font Sizes
How it works
Below 320px viewport width, the font-size is locked at 16px (1rem).
Above 1200px viewport width, the font-size is locked at 48px (3rem).
In between, the typography scales fluidly. Drag the corner of the container below to see it in action!
The quick brown fox jumps over the lazy dog.
font-size: clamp(1rem, 0.2727rem + 3.6364vw, 3rem);What is Fluid Typography?
Fluid typography ensures your text scales smoothly and proportionally between a minimum and maximum screen width. Instead of sudden jumps in text size at specific breakpoints (media queries), your headings and paragraphs will gracefully expand or contract based on the user's viewport using CSS clamp().
Using Typographic Scales
A typographic scale uses a defined ratio (like a Major Third or Golden Ratio) to mathematically calculate the size of each heading level relative to your base paragraph size. This ensures visual harmony and consistency across your entire design.
How to Use the Output
Copy the CSS custom properties (variables) provided by this tool and paste them into your main CSS file (usually within the :root selector). Then, apply these variables to your HTML elements.
h1 { font-size: var(--text-step-5); }
h2 { font-size: var(--text-step-4); }
p { font-size: var(--text-step-0); }
small { font-size: var(--text-step--1); }Related Guides
Deepen your understanding with our expert articles.