Why EM's? article

[smedz28]

Hi everyone,

So having just read through the above mentioned article that Chris posted in 2012 I have been playing around with converting a test design to em’s from px (I’m still learning CSS and this would be my first design if all goes well). Although I now understand how to convert font sizes to em’s when scaling down to mobile browsers I still can’t work out how to calculate the conversion for padding, margins and so on. How can this be done?

The font part was easy to understand as using a CSS reset the font size defaults to 16px (in most cases I assume) when using font-size: 100%. Can someone explain the calculation used for the margins etc? also provide a simple example for container div with a paragraph in or something to that effect?

Thanks in advance

[Paulie_D]

Although I now understand how to convert font sizes to em’s when scaling down to mobile browsers I still can’t work out how to calculate the conversion for padding, margins and so on. How can this be done?

You really can’t determine the em value for every circumstance (without sitting there with a pen, pencil & calculator) because of inheritance and, perhaps, that is why px were used for margins & padding to ensure consistency.

These days if you really want to ensure true flexibility one would use rem.

[smedz28]

Although I am aware of this unit as it was covered a little in the article and the comments of the same article, i’ve only just got my head round ems for font sizes. I’d like to complete my understanding of this first before I move on to rems. What effect will leaving margins and borders etc in px? Can these be converted into ems as a more acceptable option for responsive/adaptive design? If so can you give an example of the calculation and an example as described previously?

[Paulie_D]

The thing is that the em value of a particular element when converted to pixels is not the same in all circumstances.

The root might be 16px (1em)

From: https://css-tricks.com/the-lengths-of-css/

Without any CSS at all, 1em would be: 1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

If any CSS changes the font size (at any level in the document), 1em becomes whatever the new font-size is.

Making things a tiny bit funkier, em units multiply upon themselves when applied to font-size, so if an element with font-size 1.1em is within an element with font-size 1.1em within yet another element with font-size 1.1em, the resulting size is 1.1 ✕ 1.1 ✕ 1.1 == 1.331rem (root em). Meaning even if an element is set to, say 10em, that doesn’t mean it will be a consistent width everywhere it appears. It could be wider or narrower if the font-size changes.

[smedz28]

Ok, so I didn’t know that. In fact the articles I have read across different sites, some of which are a lot more recent than Chris Coyier’s, actually never mentioned this and have encouraged ditching px for ems for font size etc. Ok so maybe I should just skip the ems and go straight to rems? Back to the drawing board I go then

[Mest]

Actually you shouldn’t stick to one unit because no one unit is really better than the other.

The units em, rem, px, vh, vw and % should all part of your toolkit (plus a few extra even). They behave differently and should as of such be used for different things.

When writing sizes and lengths CSS, keep asking yourself what you want them to be relative to. While rem might be an excellent unit for a consistent padding value of elements throughout a site, em may well be superior to scale your <hx> tags or to set margin between paragraphs.

[__]

maybe I should just skip the ems and go straight to rems?

I depends on what you want. The only difference between em and rem is that ems cascade (multiply upon themselves), and rems don’t.

Sometimes, you’ll want this cascading effect: for example, you might want a heading or some emphasized text to always be “some amount larger” than the surrounding text: use ems. (Margins and padding are another example of where I prefer ems: this way, they are proportional to the font size.)

Other times, you might not want a cascade: for example, you want text in every article to be the same size, regardless of where it is on the page: use rems.

Yet other times, you might want to stick with pixels: borders, for example, often simply need to be x pixels wide.

[nixnerd]

Maybe I’m out of touch but I GENERALLY roll with % and px. That’s it. I happen to be working on a layout right now that needs ems to make the text look right. But only when I’m really concerned about the appearance of text do I use ems. Again, maybe I’m doing it wrong but I like to keep it as simple as possible.

[Merri]

Easiest way to deal with em is to only change font size where you need it being changed. Ie. don’t set a global 10px size, let it stay at 16px. Change the font only when you reach the actual element that needs to have a different size. This minimizes the effort required to play with ems.

Yeah, you still need to calculate px to em if you prefer working with px sizes due to their ease, but it is just so much less hassle when you don’t need to work with the cascading effect you get to having non-1em sizes inside non-1em sizes. If you do it right you should be able to trust having 1em base inhereting everywhere.

These days my preferred way is to use SCSS and a rem unit converter. I can give it px and it outputs rem units, and a px fallback for browsers with no support to rem.

[Paulie_D]

I believe that one benefit of using em/rem is in media queries because the em value is always related to the root / body em value (thus rem) it allows for proper scaling when zooming.

I confess I’m not fully up on zooming and it’s effects but I seem to recall this being mentioned in a thread somewhere.

[smedz28]

To be honest I was using px in my design already and had the media queries all sorted out and in the tests I done it all looked ok. I tested it in various browser sizes using window resizer and ipad/iphone emulators via webmatrix and everything seemed to look well enough positioned/scaled. I only really started playing with the idea of ems because of various articles I read pushing it as the right way to go for responsive designs. I would say my design so far is more adaptive than responsive as I used media queries at certain break points (targeting ipad/iphone). I have yet to fully apply all the principles of responsive design and use percentages to scale elements, container divs etc.

As I am just starting to dip my toes into the water with responsive design I really need to understand all the aspects of scaling/sizing.

[Author]

Posts