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
Ivan Uvarov
22,403 PointsStrange use of em
I have a question about this specific video.
I cannot see the reason to use em function (divides target by context) here.
Instructor sets h1's font-size to be em(42px). Then when calculated this value will be 2.625em (given that the base font-size equals 16px). However, if we then change base font-size to, say, 21, the value will be recalculated and will be 2em. Both 2.625em and 2em in this case will render as the same size on a page, which basically means that rendered font-size of h1 will always be the same, independent from the base font-size. This ruins the whole purpose of using ems: they used to make font-size to be responsive.
When you set font-sizes with ems or rems, and then change base font-size, all font-sizes should scale proportionally. But in this example nothing will scale. So what's the purpose of use ems instead of pixels here?
1 Answer
Guil Hernandez
Treehouse TeacherHi there,
The h1 font-size will scale proportionally since the em() function divides the px target by the $base__font-size variable by default.
Ivan Uvarov
22,403 PointsIvan Uvarov
22,403 PointsBut if you change the value of
$base__font-size, em value for h1 will be recalculated accordingly, and as a result rendered size of h1 won't change. em values should always stay the same, but here they will be recalculated every time you change the value of$base__font-size.Guil Hernandez
Treehouse TeacherGuil Hernandez
Treehouse TeacherRight on. In that case, you wouldn't change
$base__font-sizeforh1so that it always scales to the base size. You can see similar functions here.These are all suggestions—you can also just stick
emunits. :)Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 PointsBrendan Whiting
Front End Web Development Techdegree Graduate 84,735 PointsI still don't get why you would use this strategy. Is there a benefit to having the css output be in em values? Like for accessibility when people change their base font size?