Relevance of em units?

Question

I'm working on an old project that's using em's extensively for everything, from font sizes to layouts (widths, margins, padding etc.) and it got me wondering if there's actually any benefits in using em's for laying out pages as well as fonts?

I've taken to not even using em's for fonts, I find them a bit confusing especially without the body { font-size: 62.5%; } trick (which apparently is bad). And as far as I know, every browser nowadays sizes px properly.

I don't know if there's even any benefit using em's for the benefits of mobile devices, as far as I know, this meta tag should get mobile browsers to display pixels at a standard size

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

from the CSS 2.1 spec:

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

I guess the question I'm really trying to ask is, do em's offer any benefit over px when sizing layouts and/or font sizes (other than the fact em's allow you to create on-site font resize-functionaltiy)? Or has em vs px more become just become a matter of preference?

Answer 1

As you noted, CSS-Pixels aren't real pixels anymore and the major browsers handle these correct.

So the only usecase for using em would be if you really want something to be relative to the fonts height.

For example you want to have a textarea by default "3 lines heigh", you would give it height: 3em; So even after changing the font-size or anything else later in the project, this textarea would still be "3 lines heigh".

If you don't want your definition actually be relative to the fonts height, don't use em.

Answer 2

The only benefit I know of is the fact that em's can be resized on the web page by the user if they feel that the text is too small. If you specifiy in pixels, the user can't change the font size. This is the only benefit I know of. But this is only applicable to older browsers. Modern browsers can resize any text. Personally, I never use em's, only pixels.

Answer 3

The problem is that you are assuming that you know what a pixel is and what size it is. Screen pixel densities vary enormously (some mobile phones have more pixels than desktop screens!) and therefore a pixel is not a physical measurement and should not be used for it. An em has been defined to provide a generic physical size which is portable so that if I create a character at 1em, it will be approximately the same physical size on every device which is usually what we want to do (rather than squeezing a whole web page onto a mobile screen at unreadable size). Therefore em is the preferred way to layout pages.