Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Web Typography Responsive Text and Vertical Rhythm: Part 1

Posted by Craig Kendricks
Craig Kendricks
3,413 Points

Why 1rem instead of just 1em?

In the video, "Responsive Text and Vertical Rythm: Part 1", when Guil is changing the fonts from pixels to ems, when he set's the code font, he uses root ems (or 'rems').

What is the reasoning behind using a rem instead of an em at the default level? Is there an issue with using 1em?

Thanks.

2 Answers

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Craig, I've never replied to a question yet, this is the first time. I could be wrong, but at first I had the exact same question in my mind. Then after re-watching it, it made some sense to me so I looked at the reply you got for your question and it made me more certain that I think I understood why. So I'm going to try to explain. If anyone reading this response and I'm incorrect please let me know. Thanks.

So as Rich said, em is a relative unit, that means it's relative to the direct parent element, and if you remember Guil changed the size of the direct parent's element(the body) from 16px to 18px/1.125em. In the video he wanted to make the code text 16px and since the parent/body element font size was no longer 16px but 18px using 1em would make the font size of the code 18px, that is relative to the direct parent.

Using 1rem made it relative to the root, which is 16px. Because rem unit resizes the text back to its base root unit which is the browser's default of 16px. Remember all browsers root font size is a default 16px.

Hope that makes as much sense to you as it does to me.

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Craig,

I guess it's a little down to preference but:

  • An em is relative to the direct parent element.
  • A rem is relative to the root.

This article may help to clarify.

Hope that helps in some way.

-Rich