Fit To Width – CSS-only responsive text

FAQ

What about browser support?

See here https://caniuse.com/mdn-css_at-rules_property

How did you do it?

For a detailed explanation of how this works, see https://kizu.dev/fit-to-width.

Is it accessible?

I guess that depends on your perspective and legal requirements. First thing I’ll say is that this technique outshines the alternatives, and those alternatives also suffer from the same caveat:

It won’t pass Success Criterion 1.4.4 Resize Text when the zoom is dependent on the viewport.

I’m by no means an expert on this, so if you’re interested in the topic, there’s a good discussion on this GitHub issue: Feature for making text always fit the width of its parent that I recommend reading.

There are arguments that if you maintain a width legible enough then zooming may not be an issue. My advice, however, is that you make sure that your text is able to zoom in up to 2em in size for all screen widths (press cmd/ctrl +/- to test).