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!

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

Exactly why do we need to use ems?

I get that they're a relative size to 16 px. But what I don't get is when and why to use it. Nick did say it in the videos, but it wasn't very clear to me.

3 Answers

Aaron Loften
Aaron Loften
8,303 Points

Some times you want your text to be relative to the size of its parents. To be honest, I kinda find it silly, considering if a developer comes back and has to update code, they may edit it to the point that it causes undesired results.

HOWEVER, I do see the point in REMs. rem is a unit that is relative to the document's font-size, which you can set yourself. Some browsers may or may not choose to override that, inwhich it may be for a valid reason. Using rem can help your code stay relative. For example, a special needs visual screen reader may zoom in for the visually impaired and maybe it'll react better. rem is a good way to remain relative to one value where em stays relative to its parent.

Another moment to be honest.....it's more important to stay consistent. Code looks cleaner that way and people get less confused when attempting to read it.

So when you create the site from scratch, use whatever unit you like, such as px. But when working on a project that someone else started, follow their lead and use whatever unit is there. There could be a peice of js that does a calculation based on the unit type. maybe. who knows.

I usually use em's and %'s where possible for measurements, just keeps things relative and seems fairly easy to me.

If I'm setting pixel values for much other than @media (min-width: __px), I feel like I'm being lazy or doing something wrong.

Jonas B├╝chel
Jonas B├╝chel
16,050 Points

There are some cases, where things should have a relation to the actual font-size. For example you are using an icon which is scalable (for Example SVG or iconfont). It would be nice, if this icon would scale in relation to the text-size. So I recommend to set the icon size in em.

And as general answer, all things that should scale in relation to its parent font-size - use em.