Responsive Typography Techniques That Work in 2026

Responsive typography means text that stays comfortable from a phone to a wide monitor, and still respects readers who enlarge their text. Modern CSS makes this simpler than the old stack of media queries.

Fluid sizes with clamp()

clamp() sets a minimum, a preferred and a maximum size, so text scales smoothly with the screen without getting too small or too large:

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

Always combine a viewport unit with rem in the middle value. Viewport units alone don't grow when readers zoom, which fails accessibility requirements for resizing text.

Use rem, not px, for text

Sizes in rem follow the reader's browser font size setting. Sizes in pixels ignore it. Keep the root at the browser default and set everything else relative to it. The px to rem converter handles the math.

A type scale

• Pick a ratio, such as 1.2 for subtle steps or 1.333 for bolder ones, and multiply up from your body size for each heading level.
• Use a smaller ratio on phones and a larger one on big screens, so headings don't overwhelm small screens.
• Keep the number of sizes small: body, small text and three or four heading levels is usually enough.

Line length and line height

• Limit text columns with max-width: 65ch, roughly 65 characters per line.
• Use unitless line heights, such as 1.5 for body text and 1.1 to 1.25 for large headings. The line height calculator helps.

Newer CSS worth using

• text-wrap: balance evens out line lengths in headings, so a single word doesn't sit alone on the last line.
• text-wrap: pretty reduces awkward short last lines in paragraphs, in browsers that support it.
• Container query units such as cqi size text to its component instead of the whole screen, useful for cards that appear in different widths.
• font-size-adjust keeps fallback fonts closer in size to your web font. The font-size-adjust preview generates the CSS.

Test it

1. Drag the window from narrow to wide and watch for jumps.
2. Zoom to 200% and check that text grows and nothing overlaps.
3. Change Chrome's font size setting and reload.
4. Check on a real phone.

To see how well-designed sites set their type at each size, Font Detector shows the size, weight and line height of any text you click. See the best font sizes for screens.