Responsive Font Size in CSS

1. Media queries

Change the size at fixed breakpoints. It works, but text jumps and you maintain several rules.

h1 { font-size: 2rem; }
@media (min-width: 768px) { h1 { font-size: 3rem; } }

2. Viewport units only

font-size: 4vw scales smoothly but has no limits and ignores browser zoom. Avoid it on its own.

3. calc() with rem and vw

Adding a rem value to a vw value keeps zoom working but still has no limits.

font-size: calc(1rem + 1vw);

4. clamp() with rem (recommended)

One line gives smooth scaling, hard limits and zoom support. Generate the exact numbers with the calculator.

font-size: clamp(1.125rem, 0.9rem + 1vw, 2rem);

Which method should you pick?

Use clamp() for most sites. Keep media queries for cases where the layout itself changes, not just a size. Avoid vw-only sizes.

Accessibility checks

Zoom your page to 200 percent and raise the browser default font size. Text should grow in both cases. If it does not, the font size probably depends on vw alone.

Next steps

Use the fluid typography calculator to generate values, and read the clamp() guide for syntax details.