T
We're Happier Together! NYC Devshop has joined the HappyFunCorp family! Learn more!

Devshop

Font sizing: em vs. rem

Font sizing: em vs. rem

Education

Font sizing: em vs. rem

Posted by: Tea Ho

Friday, Jun 20th, 2014

Just when you thought you knew how to size text in CSS using pixels, em units showed up. Then, when you started using em units, people starting talking about rem units.

So what's the difference between em and rem?

em
Em units became popular with the rise of responsive design, since they are scalable. Ems are equal to the parent font-size, so if you set the body's font-size to 16px, 1em is equal to 16px.

1em = 16px

2em = 32px

That math is pretty simple. However, ems start to get confusing when you start nesting elements. Let's look at this CSS:

body {

font-size: 16px; /* Set base font size in pixels */
}

h1 {
font-size: 1.5em; /* 24px */
}

span {
font-size: 1em; /* ?? */
}

How many pixels do you think the span is equal to? If you guessed 24px, you understand ems and can skip to the next section. If you guessed 16px, you're wrong (but it's a common mistake). The span element is actually based off of the h1 element now, therefore 1em is 24px. Ems cascade down, and each element's base size is its parent's font-size.

rem
Enter rem! Rem stands for root-em. Like em units, rem is scalable and relative. However, rather than always having the base size change depending on which element you're styling, rem units are sized from one single font size. With rems, we define the font-size once on the html element, and the rest takes care of itself.

html {

font-size: 16px;
}

h1 {
font-size: 1.5rem; /* 24px */
}

span {
font-size: 1rem; /* 16px */
}

As you see, the span element renders at 16px-behaving as you would expect, without having to remember where it was nested.

Who's the winner?
I think rem is significantly more straightforward and intuitive, therefore making it a clear winner in my eyes. Unfortunately, it is not supported in versions of IE prior to 9. Or Opera Mini (if you care about Opera Mini). If you're working with older browsers, it might be safer to suffer through ems, but if you're building for modern browsers, I urge you to take rems for a spin.

Devshop

About Us

Devshop is a highly motivated group of entrepreneurs, developers, and designers that aim to work with companies that are looking for an edge. Each member of our team brings something unique to the table allowing us to cater our services specifically to meet your needs and exceed your expectations.