Are ems still relevant?

Question

My understanding from reading threads like this one is that the point of ems is to define all measurements in your webpage, by the base font size, which can be set by your browser.

For example, in Chrome you can do this by going settings -> show advanced settings -> web content -> font size: very large. I might do this if I were using a large, high resolution monitor, that was far away.

I created a plunker that demonstrates the difference between ems and px in sizing.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

If in my browser I set font size to medium, these divs will be the same size, base font size being 16px, so 20em = 320px.

However, when I change my browser font size up to very large, we can see that the div measured in ems has increased size.

However, this effect will be negated if I define the font size in the body tag for example.

body {
  font-size: 16px;
}

Because now my css is overriding the font size set by the browser.

I get that ems would have been important in the days of older browsers, where zooming on the page would only scale up fonts. But these days modern browsers scale up both pixels and fonts, rendering the zoom issue moot.

Looking around the web - a lot of websites do set font size in their body tag.

Stack Overflow for example, sets font-size to 13px in the body tag. Setting font size in my browser doesn't affect the layout of Stack Overflow in the slightest.

Google search results doesn't do this.

(both these screenshots taken with chrome font size set at very large, and 100% zoom).

So perhaps you could argue that setting font size in the body tag, is a bad idea because it prevents a user's own accessibility settings. But given that the user can zoom to increase the sizes (which will proportionally increase all the pixels too) - this doesn't seem like a real problem.

Answer 1

However, this effect will be negated if I define the font size in the body tag for example.

body {
  font-size: 16px;
}

Because now my css is overriding the font size set by the browser.

You are forgetting about accessibility.

See C14: Using em units for font sizes from Web Content Accessibility Guidelines (WCAG 2.0).

Set the font size option of your browser to Very large. Now go to a website such as W3C. How the text looks like?

This is what this option is about. Developers of StackExchange and a lot of other websites decided that their choices are more important that the choices of users who may be visually impaired. Whether this choice is right or wrong is outside the scope of this question, and the answer is not necessary straight.

You, however, may be forced (including by law for some websites) to make different decisions, and to let the users select their font size. From there, you have a choice: either you specify the size of the images and different zones of the page in pixels, in which case the font size option of the browser will have fun effects on the layout, or you use em for those elements as well.

Also note that if you don't specify the font size in pixels at the body level, then stick with em at least for font size everywhere. For instance, Google specified the font size inconsistently, and their search page looks weird, especially with titles appearing smaller than ordinary text. Wikipedia, on the other hand, did an excellent job by using em whenever the font size was specified. Below are the screenshots of both sites rendered by Chromium with font size option set to Very large:

So perhaps you could argue that setting font size in the body tag, is a bad idea because it prevents a user's own accessibility settings. But given that the user can zoom to increase the sizes (which will proportionally increase all the pixels too) - this doesn't seem like a real problem.

This is a real problem for two reasons.

First, most browsers store the zoom factor site by site. If you have a visual impairment, you'll be forced to zoom, again and again, on every site you visit. That sucks. Given the current indifference of web designers and developers towards accessibility, visually impaired persons have to do it anyway, but this doesn't mean it should stay this way.

Second, too many websites won't behave well visually when zoomed either. Responsive websites do well, but non-responsive ones will exhibit either horizontal scroll or some sort of “your screen is too small” behavior.

There is also a fundamental difference between zooming and text scale for a developer. While em means “adjust that to the text size preferences of the user”, zoom is about scaling the whole page up or down, not just text.

Take an example of the site menu (at the top of the page, with links being positioned in a line). With zooming, you know that the height of the menu will change proportionally to the other elements. With text size option, it's up to you to determine the behavior. You may assume that a visually impaired person will be able to see your 50px-height menu in all cases: nobody will miss a black menu on white background. Or you may decide that its height should stay proportional to the text, for instance 1.5em.

Answer 2

the point of ems is to define all measurements in your webpage, by the base font size

This may be a misunderstanding of terms on my part, but to clarify: em is relative to "the current element's" font size. rem is relative to the root font size.

I get that ems would have been important in the days of older browsers, where zooming on the page would only scale up fonts.

That's not why I use em's. In fact, your zooming experience is the last thing on my mind when I use relative units of measure. My concern is two-fold.

Firstly, I'm normally interested in simply defining my layouts in relative terms. My concern is that my containers look good in relation to each other and the text inside them. And when I change the font or tweak things up the chain, I don't want to recalculate and update everything by hand to maintain the proportions I'm shooting for. Let the browser do the math...

Secondly, I just want to express font sizes in simple terms I can understand. If I express my base fonts in pt's and everything else in rem's or em's, it's easier for me. I don't have to know your device's resolution, and you don't have to zoom. Your browser knows how many pixels to use; neither of us should have to think about it.