Confused About REM and EM?

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Grow sales with Customer Journey Smarts Mailchimp tracking pixel

Jeremy Church:

While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.

Jeremy tends to favor em, because of the ability to control an area of a design. As in, scale the type in that specific area relatively. I have tended to like rem because of the ability to scale type across the entire page easily, but I’ve gotten into issues where that wasn’t good enough control so I could see moving back to em for that reason.

UPDATE: Jeremy changed his tune at some point:

I use rem more than I used to. I still tend to set the font-size of headers in em, but I can see where rem would be beneficial for some headers and other text. I also use rem for most margins, and sometimes for padding too.

I’m a rem guy pretty much all around myself. But sometimes do what is talked about here in Font Size Idea: px at the Root, rem for Components, em for Text Elements, which sounds like where Jermey is headed.

Direct Link →