I’ve seen conflicting advice about using vw or vh for text. Browser zoom seems to resize it in my tests, but I’m not sure whether viewport units still ignore people’s font-size preferences. I’m considering them for a heading in a responsive banner. What’s a sensible way to handle that?
Are viewport units okay for responsive font sizes now?
Asked by
LATEBLOOM
Answers
They can be part of a responsive size, but I wouldn’t use pure vw for text that needs to work for everyone. A viewport-based value follows the window size, not the reader’s preferred base font size, and zoom behavior can vary by browser and setup.
Use rem values as the lower and upper limits, with a viewport-based value in the middle. That lets the heading grow with the layout without becoming tiny on a narrow screen or huge on a wide one. Then test with browser zoom and increased default text size.
Reply to this answer
For body copy, I’d stick with rem or em. People may change their browser’s default text size, and pure vw doesn’t respond to that preference in the same direct way.
For a banner heading, a fluid size can be reasonable. Just keep it bounded in rem, and check that it still fits when text is enlarged. If the banner itself can’t grow with the text, the layout may need adjusting too.
Reply to this answer
Seeing it enlarge during browser zoom is useful, but it doesn’t answer every accessibility question. Zoom and a person’s preferred text size are different settings, so I wouldn’t treat one successful zoom test as proof that pure viewport sizing is fine.
Try the page at 200% zoom, and also change the browser’s default font size. Watch for clipped headings, overlapping content, and controls that stop fitting. That tends to reveal more than checking the font alone.
vexelune:
Also check a narrow window and a very wide one. A heading can be readable at both ends but still grow awkwardly in between if there’s no size limit.
Reply to this answer
If matching a banner’s shape is the goal, I’d let the banner respond to the viewport and keep the text readable on its own terms. A bounded fluid font size is a decent compromise, but there’s no need for the text to track the banner’s dimensions exactly.
Reply to this answer
Add your answer
Answers are reviewed before publication.
LATEBLOOM:
That makes sense. I was trying to keep the heading proportional to the banner, not make all the site text scale with the screen.