Fluid Typography Generator
Clever CSS that makes the font size and line height automatically adjust based on the width of the screen.
Viewport Width Boundaries
Set the breakpoints where the font size and line height stop scaling with the viewport width.
Font Size Boundaries
Define the font size range that scales between the start and end viewport widths.
Line Height Boundaries
Define the line height range that scales between the start and end viewport widths.
Preview
The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1024px
Grab the CSS
/* Fluid typography that scales between 320px and 1440px viewport widths */
font-size: clamp(1rem, 1.964vw + 0.607rem, 2.375rem);
line-height: clamp(1.2rem, 3.375vw + 0.525rem, 3.563rem);