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

Posted by furkan
furkan
11,733 Points

rem & em

The video was great in discussing the uses of rem and em, however, there might be some confusion. I found that, if an element is not associated with a parent, the em unit is relative to the font size used on the element you want to change with em.

Reference = https://www.w3.org/TR/css3-values/#font-relative-lengths

Also if you could make clear this question: is it sensible to use rem for all font-sizes rather than using em, as asked previously by another student. Since rem is not inherited therefore will not cause confounding measurement errors on font sizes.

M Glasser
M Glasser
10,868 Points
M Glasser
M Glasser
10,868 Points

Still a beginner myself but my understanding is that using em over rem gives you more practical control over scaling. em is basically deriving a relative size based on it's parent whereas rem takes it all the way back to the root. Flexibility is the keyword here. If you use rem for everything then you could certainly scale things up and down by changing your root font-size, but what if you ONLY want to make changes to a particular section of your page without scaling the entire page? Not as easy to do with 100% rem (especially if you have tons of elements). It seems like it would be much easier to change the size of just a parent element to scale up/down the contents within it (using em) rather than scale it ALL at the root level and then go in and adjust the things you didn't want scaled (with rem). Not sure if that answers your question or if I'm understanding what you're asking here.

Paweł Bis
Paweł Bis
4,060 Points
Paweł Bis
Paweł Bis
4,060 Points

In my opinion using rem over em is the easiest way of managing font sizes on page. For example - .h3 {font-size: 2rem;} - means that you want h3 to be 2 times larger than your "main font-size".

But I'm also a beginner myself, so... who knows?

2 Answers

furkan
furkan
11,733 Points
furkan
furkan
11,733 Points

I agree with both of you, it makes sense to use both em and rem where appropriate. Thank-you for the clarification guys @glasser @bis . All the best :)

Miguel Roncancio
Miguel Roncancio
3,986 Points
Miguel Roncancio
Miguel Roncancio
3,986 Points

I don't think you should limit yourself to using only one type of unit. Rem can be more useful than em in some cases and vice versa. Personally, I prefer using em simply because I set my font size once in the body selector and scale everything else using em's so no need to use rem as the font size is only declared once.