You Should Be Using Ems
Updated on Jun 07, 2020
It took me quite a while to get my head around ems. When should you use them? How do they work? What are the benefits of them? Initially my brain was frazzled but after a long nap and lots of practice, I love them.
Similar to pixels, ems can determine the size of elements in your CSS. Unlike pixels, ems are relative to their parent’s font size. Like pixels, ems can be used for font sizes, paddings, margins, border radius and anything else you can think of. Think of them as scaleable pixels.
The main benefit ems have over pixels is the ability to scale, something that is very handy when building responsive websites. Thanks to them scaling proportionally with their parent’s font size, it reduces the amount of CSS and saves having to continuously change values at each breakpoint.
Basic example
By default, browsers set a base font size of 100%, or 16px, to the HTML tag. Because ems use their parent font size to set their size, by default 1em is equal to 16px. If you increase the font size of the HTML element, the em value will also change accordingly. For example, if you set the font size to 120% on the HTML, the em value becomes 19.2px (16 x 1.2).
http://codepen.io/daveredfern/pen/YqLEqB/
The above example sets the font size from the HTML tag but this could be any element on the page. If you have a div with a font size on, the em value of the paragraphs inside will be affected.
http://codepen.io/daveredfern/pen/eZrezE/
Keep in mind that ems scale based on all their parents font sizes and not just the direct descendant. So applying a font size to the HTML and div of the above example will multiple it up twice.
Nesting and scaling example
So why is this so good? Let’s say you’ve coded a span to look like a tag. You want the font size to be slightly smaller than the default because you’re adding a little padding around the text. By setting the font size to 0.6em, it becomes 60% of the value of the rest of the text within that element – regardless of whether it is placed inside a paragraph or heading.
This means you can declare the CSS values once and it will scale based on where it is placed on the page. Imagine trying to achieve that using pixels. You would have to set the font size for every single element.
http://codepen.io/daveredfern/pen/mPLpJP/
Scaling buttons example
So far we’ve only been using examples that scale font sizes. Ems can also be used for nearly anything that requires a unit value such as widths, paddings and margins.
Buttons are a great example of the power of ems. Most websites have multiple button sizes. This can quickly lead to a lot of CSS as we redeclare paddings and font sizes for each new button size. Using ems we can declare the font size and padding, then for other sizes we just need to change the font size.
http://codepen.io/daveredfern/pen/oxdEQq/
You can see in the example above, we only change the font size. Ems are calculated from the font size so if you use them for padding, they will proportionally change to match the size of the font.
Another benefit is when using the button inside an element that has a larger font declared, without doing anything the button will scale to match.
A word of advice
Try to detach yourself from thinking about things in pixels as quickly as possible. Pixels are absolute and ems are relative. Holding onto the notion that ems can be converted to pixels hindered my understanding of them.
Often you will see converters in Sass where you enter a pixel value and it generates ems on the other side. I feel these are very dangerous to use and not accurate. Remember the size is dependent on it’s parents values. Stop worrying about the numbers and size by eye.
If you’re not careful, scaling can become very complicated. Because it uses the parents value, and the parent of that parent, it’s very easy to get yourself into a mess. Try to stick to applying font sizes to the direct element that they affect on a paragraph or heading for example. Applying them to div’s can be useful, but use with caution.
To recap
If you’ve never used ems, I highly recommend familiarising yourself with them. I use them on a daily basis and they have helped me (1) reduce my css and (2) create better responsive scaling.
CodePen is a great place to experiment and you can take any of the above examples and tinker yourself.
If you still have further questions you can tweet or email me.
