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

Benefit of using 'ems' over 'px'

I just can't see it. Initially, I thought 'ems' changed relative to the size of the browser window, but now I see they stay the same. just like px, so what's the advantage?

2 Answers

em are a relative unit of measure unlike say pixels, they are relative to their parent font size. The term em comes from the width & height of a capital M in the specified typeface multiplied by their parent font size.

What's great about ems is they let you stick to a typographic scale, so your headings can be a multiple of your body font size and any type you need smaller is a fraction of your body font size. ems are recommended to only be used for font size, not for any structural sizing.

You can read up about ems in the blog post taking the erm out of ems.

Hey Julian, ems are scalable, as you've noted, but also relative to the value of the inherited font-size. Sometimes we can be on a site whose font-size is in ems but not see a change in the size of the text when we make the browser window larger or smaller. A site coded in ems is ready to scale, though.