Fluid typography makes text resize smoothly as the screen gets wider or smaller.
Instead of setting one font size for phones and another for desktops, you let the browser scale the text between a safe small size and a safe large size.
The easiest way to make fluid typography is with clamp().
Think of it like this:
font-size: clamp(smallest, flexible, biggest);Smallest keeps the text readable on small screens. Flexible lets it grow with the screen. Biggest stops it from getting ridiculous on desktop.
This heading grows with the screen, but stays inside safe limits.
h1 {
font-size: clamp(2rem, 6vw, 5rem);
}That means the heading will never be smaller than 2rem, it can grow with the screen using 6vw, and it will stop growing at 5rem.
This is a simple starting point for normal pages.
:root {
--font-body: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
--font-small: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
--font-h1: clamp(2rem, 1.4rem + 3vw, 4.5rem);
--font-h2: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
--font-h3: clamp(1.15rem, 1rem + 0.75vw, 1.6rem);
}
body {
font-size: var(--font-body);
line-height: 1.55;
}
h1 {
font-size: var(--font-h1);
line-height: 1.05;
}
h2 {
font-size: var(--font-h2);
line-height: 1.15;
}
h3 {
font-size: var(--font-h3);
line-height: 1.2;
}
small,
.muted,
.caption {
font-size: var(--font-small);
}Fluid typography helps avoid tiny mobile text and oversized desktop headings.
It also reduces the need for extra media queries just to adjust font sizes across different screen widths.
Use fluid typography for headings, body text, captions, landing pages, blog layouts, tool pages, cards, hero sections, and simple responsive designs.
Do not make the middle value too aggressive. A value like 12vw can make text grow too fast and look broken on wider screens.
Start with smaller values, test on phone and desktop, then adjust the smallest and biggest sizes until it feels right.
Use fluid typography when you want text to feel responsive without writing a bunch of separate font-size rules for mobile, tablet, and desktop.
Skip it when a design needs exact fixed typography at every breakpoint, or when older project rules already control font sizes with a strict design system.
Learn more about CSS clamp, browse webdev examples, or explore more scripts.