I use 100% for the body element, and relative units for everything else—mainly REM. Most of the clients I do work for require that their sites are accessible, which means I need to ensure the sites meet WCAG requirements.
There’s this really good article on 24 Accessibility on this subject by Kathleen McMahon which showcases side-by-side examples of what happens, including this one below, where a user sets their font size to "Very large" in Chrome:
This image shows the following:
The 1st example on the left prioritises the developer set font-size and the fixed line-height properties, thus does not resize according to user preference.
The 2nd example in the centre scales up the title and paragraph elements according to the user, but because line-height is set in pixels the paragraph text is visually squashed together.
The 3rd example on the right fully utilises relative units and visually looks the best.
REM is a bit more work to implement, but it goes a long way for the user.
I use 100% for the
bodyelement, and relative units for everything else—mainly REM. Most of the clients I do work for require that their sites are accessible, which means I need to ensure the sites meet WCAG requirements.There’s this really good article on 24 Accessibility on this subject by Kathleen McMahon which showcases side-by-side examples of what happens, including this one below, where a user sets their font size to "Very large" in Chrome:
This image shows the following:
font-sizeand the fixedline-heightproperties, thus does not resize according to user preference.line-heightis set in pixels the paragraph text is visually squashed together.REM is a bit more work to implement, but it goes a long way for the user.
This right here.