The Power of em Units in CSS

With every complex feature in CSS, you’ll always have that turning point when you see how truly powerful the feature is. And, believe it or not, my personal turning point with ems came long after I wrote a pun-filled introduction to the subject.

Although I understood ems fairly well by that point, I really started to see how powerful they are when I read Simurai’s post on Medium called Sizing (Web) components.

So I’m going ride his coattails in this post. Here you’ll find a quick introduction to em units, followed by a live demonstration of the technique he describes.

What are ems?

In CSS, an em unit is equal to the computed font-size for the element to which the em is applied. When em units are declared on child elements that don’t have a font-size defined, they will inherit their font-size from their parent, or from another ancestor element, possibly going all the way back to the root element on the document.

Look at the following CSS:

.example {
font-size: 20px;
}

In this case, 1em on this element, or on its child elements (assuming no other font-size definitions), would be equal to 20px. So if we added a line:

The padding value of 2em is equal to 40px (20*2). As mentioned, this type of calculation would apply to any child elements as well — unless any of those child elements had an explicitly defined font-size value, in which case the em value would be calculated based on that. If no font size is defined anywhere in the CSS, the em unit will be equal to the browser’s default font size for the document, which is usually 16px.

I think that should make it clear how ems work. Now let’s look at how this technique can be used to make easily resizable web components, as discussed by Simurai in the original Medium article. I’ll take his idea a step further by providing a demo to see this in action.

Component-Level Sizing

The concept of “components” is pretty popular right now. It works well with modular CSS techniques as well as with the idea of encapsulated sections of code in general. And I’m guessing the following technique will be even more interesting when the Web Components spec becomes widely supported.

The technique basically works like this: The font-size property is used, as Simurai refers to it, as a “trojan horse”, creating the base unit for the various elements inside our component, or module. Since em units, as described above, are calculated based on the root-defined font-size on the parent element, this makes the entire component easily resizable by simply changing the font-size on the parent element.

This silly little module has four basic elements in it. Nothing fancy, just an example to illustrate this technique. Move the range slider at the top of the demo page to change the size of the module. You can also test it at full screen. The range slider is hooked onto a single value on the root element for the component: The font-size value.

It should be noted here that the purpose of making the component resizable using this single CSS property is not necessarily so that the user can do this. It’s mainly so that the developer maintaining the module can make adjustments quickly, without fiddling with the different values in all parts of the component.

As described in the previous section, as the font size changes, this trickles down to all the em values that are set on that parent element as well as to all of its child elements, making all parts of the component proportionally flexible.

If you examine the CSS, you’ll notice the following:

Everything inside the component is sized with ems, except the outside border (which we want to remain at 2px at all times), and the image, which I could resize if we wanted it to, but I’m happy with its size being static for this case.

The teardrop-like thing in the top right corner is a pseudo-element, which likewise benefits from the base font-size on the parent.

The CSS also includes two media queries that adjust the font-size on the parent. Again, this shows the usefulness of this technique because you don’t have to change all the various sizes in the media queries, but only the font-size.

Some Notes, Flaws, etc.

As you can see from using the range slider in the demo, this type of flexible resizing isn’t always something you’ll want to use. It can be somewhat restricting.

You may have to tweak some of the em values to get them how you like, and, as in the case of the parent border in the demo, you may not want the resize-ability to apply to all elements. You can overcome this easily by simply avoiding ems on the elements you want to leave out.

As described in the discussion on Simurai’s original article, you don’t have to use px units to set the root font-size. You can use ems for that too, but just remember that this will be inherited in the same way from its parent, possibly coming from the document’s default value for font-size.

What About rems and Sass?

The rem unit in CSS always inherits its value from the base font size setting on the root element of the document, irrespective of the computed font size. In HTML, the root element is always the html element. So you could use rems, but this would mean you’ll have to control all components on the page using the font size on that element. It could work on certain projects, but I think this technique works best when focusing the resizability on an isolated component, rather than the whole document.

As for using a preprocessor like Sass, I think that’s a side point. Ultimately, your compiled stylesheet will use whatever units you’re using in your Sass code, and the inheritance will work the same way.

Conclusion

As already mentioned, Simurai deserves the credit for making this technique more widely known. Of course, as he mentions, this is nothing new and the basic concept has been used by many experienced developers for years — but maybe not so much in the context of web components, or modules.

As Simurai says, I think this is a nice method to use when building a CSS framework or library of components, and, if nothing else, I think the technique really drives home the point about how powerful em units are.

If you have any feedback or experience with a similar technique, or have any ideas for how this concept can be improved, I’d be glad to hear your comments.

Louis is a dev blogger at Impressive Webs, author, and is currently SitePoint's HTML and CSS editor. He loves all things front-end, and curates Web Tools Weekly, a newsletter for front-end developers primarily focused on tools.

http://stephenmorley.org/ Stephen Morley

Be careful when using very small em values: for example, if you have a border width of 0.0625em (one sixteenth of an em) Chrome won’t render the border at all when the computed font size is less than 16px (Firefox and Internet Explorer will render a one-pixel border). Whether this particular case is an issue depends on whether you want your borders to scale with the text size or just to be as thin as possible (in which case you can just use 1px).

Jaymoon

“The padding value of 3em is equal to 40px (20*2).”

Is this a typo, or am I just not understanding this correctly?

http://danmathisen.com/ dmathisen

Looks like he meant:
“The padding value of 2em is equal to 40px (20*2).”

LouisLazaris

Yep, typo. Fixed. :)

I think I had originally used 3em as the example, but then forgot to change it in the text.

LouisLazaris

Yeah, I was just testing to see if you guys were paying attention. ;)

But seriously, thanks, it was corrected earlier.

http://www.technbuzz.com/ Samiullah Khan

I have a question regarding the use of percentages. They also work like em’s. Why they aren’t best fit for font size?

http://stephenmorley.org/ Stephen Morley

Ems allow you to specific everything relative to the font size. Percentages are relative to varying properties – for example, a percentage for the padding property is relative to the width of the containing block.

http://www.technbuzz.com/ Samiullah Khan

So they are not good prospect for font-size, because 1em or 100% equals to 16px anyway

Prestaeus

As someone coming back to HTML after a long hiatus, articles like this are helpful. Thanks for the article.

Pretty much the same concept, and he made it on March 27. I had no idea, but it certainly looks like my demo is ripping his off. :)

http://www.mathewporter.co.uk/ Mathew Porter

Ive used em’s for a number of years on every new project as its how we did things in the first agency that I started working for all those years ago and have done ever since. We always set font-size: 62.5% on the body as this gets a pretty good scale from em to px i.e. 1.6em = 16px visually…. Ish.

imagestic

Fantastic! Thank you!

http://www.safeharbor.com/ Dmitry M

Thanks for sharing. I’ve started getting into zurb’s foundation and it’s all em/rem based. This definitely helps.

bob swanson

I’ve changed many of my webpages over to “power_of_em” and I like the appearance. Also, they look very good on the phone browser. But the BEST result of this effort is that Google’s “mobile friendly” testing website says that these pages meet their standards. No other special coding required…