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

Erick Martinez
Erick Martinez
2,894 Points
Posted by Erick Martinez
Erick Martinez
2,894 Points

h1 is 5.625 times larger than 1em (16px)?

@6:24 I am confused what h1 font size is. He said it's 5.625 larger, but larger than what?

What is the exact px amount?

2 Answers

BERYL YOUNG
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
BERYL YOUNG
UX Design Techdegree Graduate 39,697 Points
BERYL YOUNG
.a{fill-rule:evenodd;}techdegree seal-36
BERYL YOUNG
UX Design Techdegree Graduate 39,697 Points

The original font size for the h1 was set in the style sheet as 90 px. The default value for em's is the equivalent of 16px. If you divide 90px by 16 you get the scaleable value for the em of 5.625. The instructor is showing you how to change a fixed pixel font-size to something that scales with the viewport. 90px may not look that great on say a large screen but the scaleable em will resize in proportion and look appropriate for the larger screen size.

Miguel Enriquez
Miguel Enriquez
2,057 Points
Miguel Enriquez
Miguel Enriquez
2,057 Points

Default em value is 16px.

I made a formula that might be useful:

(Desired font-size in em units) = (Desired font-size in px units) / (Parent font-size in px units)

I am confused what h1 font size is.

To find out what em value you need you can use the formula above like so:

5.625 = x / 16

90 = x