a11y: Setting font-size in px on HTML leads to Accessibility problem #449
Description
Adapted out of jgthms/bulma#3588 we're even also setting a base font-size on the html tag in Pixels, that should most likely provide an alignment of sizes on different environments, but even also leads to that the font-size isn't being possible to get overwritten by browser (accessibility) settings; so we should most likely remove / replace the px value, either
- by in total removing any
font-sizedeclarations on bothhtmlandbodytags, or - defining
1em/100%onhtmland/or1remonbody
Especially regarding the latter we should still evaluate on positive aspects / reasons for edge cases why this might be beneficial. There doesn't seem to be a common understanding / quasi-standard in the community, even also the bigger frameworks and other sites all have some nuances to this solution.
research
frameworks
- Material:
body, html { font-size: 100%; }&…, body { font-size: 100%; } - bootstrap / MUI / reboot.css:
body { font-size: 1rem; }
reboot.css explanation:No base
font-sizeis declared on the<html>, but16pxis assumed (the browser default).font-size: 1remis applied on the<body>for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. This browser default can be overridden by modifying the$font-size-rootvariable. - get.foundation / normalize.css:
html { font-size: 100%; } - Carbon Design System:
html { font-size: 100% },body { font-size: 1em },body { font-size: 100% } - SAP UI5: none
some websites
- bahn.de:
html { font-size: 100%; },body { font-size: 1rem } - next.bahn.de:
html { font-size: 100%; },body { font-size: 1rem } - w3.org: none
- w3.org/WAI:
body { font-size: 1rem; }
Decision
We're adapting body { font-size: 1rem; } as this doesn't harm, but probably brings some benefits (even though that we couldn't have identified them so far clearly).