Removal of REMs

[bgardner]

Wanted to throw this up for discussion, based R.I.P. REM, Viva CSS Reference Pixel!.

Discuss.

[bgardner]

Anybody have any thoughts on this? We've discussed this, and have seen lots of articles that go both ways on this. Curious what others think.

[nickcernis]

I think we can safely drop rems.

For accessibility, because modern browsers adequately resize text regardless of how the size has been defined, it is not vital that text sizes be defined in relative sizes.

— from https://webaim.org/techniques/fonts/#font_size,
and also quoted in https://make.wordpress.org/accessibility/handbook/best-practices/design/font-sizes-and-resize-text/#relative-units-vs-absolute-units

I still see vague suggestions in recent design guidelines and blog posts to use rems/ems for accessibility, but the articles never state why or which browsers this is a requirement for. For example, this is from Google's a11y guidelines:

Also, consider using relative units like em or rem for things like text size, instead of pixel values. Some browsers support resizing text only in user preferences, and if you're using a pixel value for text, this setting will not affect your copy. If, however, you've used relative units throughout, then the site copy will update to reflect the user's preference.

— https://developers.google.com/web/fundamentals/accessibility/accessible-styles (updated January 3, 2018)

The WCAG doc for font sizing mentions that relative units are good for accessibility:

• https://www.w3.org/TR/WCAG20-TECHS/C14.html
• https://www.w3.org/WAI/WCAG20/quickref/20160105/#visual-audio-contrast-scale

When you click through to the “User Agent Support Notes” to find out which browsers are affected by this, they mention IE 7:

When font size is specified in any absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.

As we don't claim to support IE 7 this may be a non-issue.

I found one comment in a Medium post that IE 10 still does not support font scaling of absolute-sized fonts, but I couldn't reproduce this when testing in IE 10.

[bgardner]

@dreamwhisper @nathanrice Giving you right of first refusal here. :-)

[nickcernis]

Noting a similar discussion in the Gutenberg repo in case this comes up again: WordPress/gutenberg#6454