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 Basics (2014) Understanding Values and Units Em Units

Ross Horak
Ross Horak
20,890 Points
Posted by Ross Horak
Ross Horak
20,890 Points

What, if any, is the difference between using 'em' or '%' when defining font-size?

As I understand it, both 'em' and '%' set the font size relative to their parent element. So what's the difference? Is using 1 over the other advantageous?

4 Answers

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey Ross,

For example, em units allow you to set your paragraph's max-width in em units, which will be relative to the actual element's font size, not the parent element's total width like percentages. That makes responsive typography a lot easier, since in most cases (if you made a good job) you only have to reset the body font size for different displays and redefine the size of some of the text elements if needed.

I'd suggest you to go through the Web Typography course, because it explains it very well.

Ross Horak
Ross Horak
20,890 Points
Ross Horak
Ross Horak
20,890 Points

Thank you for the answers every one. Thanks for highlighting a scenario when there is a difference between using em's and %'age.

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

I'm glad I could help!

Baruch Velez
Baruch Velez
275 Points
Baruch Velez
Baruch Velez
275 Points

Both EMs and % font sizes are relative to the set size of the webpage. For instance, on a default webpage font-size 1 em = 12pt = 16px = 100%, but changing the body font size, both EMs and % scale the same.

The main difference is when you're using a set size like "largest" or "smallest", then the scale is different.

Best way to use EMs is you set a body font-size with % and use EMs for line-heights and text sizing (which is in theory what print designers use EMs for).

Here's a good read on it. http://alistapart.com/article/howtosizetextincss

Hope this helps. Cheers

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

Since CSS3 you can use the REM

Jeremy Church site

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