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

James Zhou
James Zhou
2,365 Points
Posted by James Zhou
James Zhou
2,365 Points

How do you define the base size of 1 em?

It was mentioned that 1 em was equal to 16 px, and in order to achieve 18px, we use 1.125 em. However, continuing down the css, 1 em became 18 px. How did this happen? And where did the original 1 em = 16 px value come from?

3 Answers

Paul Jackson
Paul Jackson
8,943 Points
Paul Jackson
Paul Jackson
8,943 Points

1 em is equal to the browser's default font size, which is generally 16 px.

Once you define the body font-size, in this case 18px, then 1 em for everything inside the body is equal to 18px.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Here's an in depth explanation on em units, not only related to font size http://www.impressivewebs.com/understanding-em-units-css/

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi James,

Here is a link to a post explaining How em's work

Hope it helps