rems and ems, and why you probably need them

JP de Vries
May 7, 2017 · 7 min read
An unfocused lense captures the bokeh effect and reminds us not all users are perfectly sighted

It’s definitely better for accessibility

My point: you don’t need in depth knowledge and fancy tools for working out if rems and ems are ‘better for accessibility’ — just imagine that you are someone with bad eyesight

I don’t know about you, but if I had trouble reading small text, I’d bump up the default font size for the OS and forget about it.

Although we have no evidence as to whether or not people rely on changing their browser text size

The above facts, to me, make it crystal clear that browser text size adjustment is of no use in the real world. And so I will not take this setting into account in my decision making process.

Breakpoints scale when you use rems/ems

Use ems for ‘dynamic’ spacing around text

This is almost a good idea, I see where the proponents are coming from. “Why change font-size and padding, when you can use ems for the padding, then only change the font size?” they say in their outside voice.

I just prefer…

Make modules that you can resize simply by changing the root element font-size

I can’t recall the last time I wanted a component that grew in all dimensions, paddings and font-sizes, by the same factor, by changing just one value.

You can scale all the text on your page with one property

It assumes that you want to increase/decrease all text on your site at the same time for a given breakpoint. Headings, menu items, body text, all at once, all by the same factor. Now that’s courage.

#thing-i-need-to-see-better {
font-size: 200%;
}

In conclusion

Liquid layouts and relativity, when to use which CSS units

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade