Fluid Typography
A responsive technique where font sizes scale smoothly between breakpoints using CSS clamp(), eliminating the layout jank from hard breakpoint changes.
Fluid typography interpolates between a minimum and maximum font size based on viewport width. Instead of jumping from 16px to 14px at a breakpoint, the size transitions smoothly. The CSS clamp() function makes this possible: clamp(1rem, 0.5rem + 2vw, 2.5rem). Combined with scale compression on mobile (dropping from a 1.250 ratio to 1.125), fluid typography maintains hierarchy across every screen size without manual breakpoint overrides.
Learn more in our full guide: Read the article
Related Terms
Type Scale
A set of font sizes generated from a consistent mathematical ratio. Instead of picking sizes by feel, you pick a base size and a ratio, and every other size flows from that relationship.
Typography Scale
A system of proportional text sizes that creates consistent visual order across headings, body text, captions, and labels. Usually based on a mathematical ratio.