This issue was discovered while implementing #7124, and when several EUI team members brought up recommending against px units as less accessible than rem and em.
Problem
By default, EUI sets a global pixel value font-size on html:
|
font-size: ${`${font.scale[font.body.scale] * base}px`}; |
(Note: This value is unaffected by / does not respect the new defaultUnits token implemented in #7133).
What this means is that EUI does not respect user-set browser settings for default font sizes. Most browsers default this to 16px, but if a user wants a default font size of 32px (e.g. for vision issues), EUI will completely ignore that setting:
The above screenshot is of Firefox on MacOS, but this has also been reproduced and confirmed on Chrome as well.
Reproduction
- In your browser settings, change your browser default font size from 16px to any other value
- Go to https://eui.elastic.co and confirm that EUI does not adjust dynamically
For comparison, other websites that do respect custom user/browser font size:
And other websites that also do not respect user/browser font size:
Proposed solution
To be clear, EUI has not respected the browser default font size since its inception (i.e., well before the Emotion conversion). To "fix"/change this now would potentially be a major breaking change for consumers or an unexpected surprise for users. If we want to change the default font size we set on html to be more accessible going forward, we need to make this choice very deliberately, and communicate that clearly to our consumers as well.
It might also be worth discussing the approach we want to take:
- Have the
html font size respect the new defaultUnits token, which means potentially allowing consumers to deliberately choose to make their applications less accessible (does this have valid use-cases?)
- Have the
html font size always be relative (e.g. using % instead) and ignore defaultUnits
WCAG or Vendor Guidance (optional)
This issue was discovered while implementing #7124, and when several EUI team members brought up recommending against
pxunits as less accessible thanremandem.Problem
By default, EUI sets a global pixel value
font-sizeonhtml:eui/src/global_styling/reset/global_styles.tsx
Line 42 in 3ab325b
(Note: This value is unaffected by / does not respect the new
defaultUnitstoken implemented in #7133).What this means is that EUI does not respect user-set browser settings for default font sizes. Most browsers default this to 16px, but if a user wants a default font size of 32px (e.g. for vision issues), EUI will completely ignore that setting:
The above screenshot is of Firefox on MacOS, but this has also been reproduced and confirmed on Chrome as well.
Reproduction
For comparison, other websites that do respect custom user/browser font size:
And other websites that also do not respect user/browser font size:
Proposed solution
To be clear, EUI has not respected the browser default font size since its inception (i.e., well before the Emotion conversion). To "fix"/change this now would potentially be a major breaking change for consumers or an unexpected surprise for users. If we want to change the default font size we set on
htmlto be more accessible going forward, we need to make this choice very deliberately, and communicate that clearly to our consumers as well.It might also be worth discussing the approach we want to take:
htmlfont size respect the newdefaultUnitstoken, which means potentially allowing consumers to deliberately choose to make their applications less accessible (does this have valid use-cases?)htmlfont size always be relative (e.g. using%instead) and ignoredefaultUnitsWCAG or Vendor Guidance (optional)