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 Modular CSS with Sass Getting Modular with Mixins and Functions Pixels to Em Function

Posted by Tiff L
Tiff L
2,709 Points

function em / typography 

font-size: em(42px);
line-height: (46px / 42px); 
margin-bottom: em(70px / 42);

This may be more of a typography question. I read below questions on how Guil came up with the line-height: 46/42.

But how did he come up with the font-size(42px)? Is it some arbitrary number? I think he’s trying to create some system for vertical rhythm. I’m just curious about how&why.

Same thing with the margin-bottom(70px). Is this just an arbitrary number of how much margin he wanted? And then divided it to so it would have some relation to the line height?

If it’s random number of how much space he felt, wouldn’t it change up the vertical rhythm of the page?

Many thanks!

1 Answer

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

42px is not an arbitrary number. It is the context. Remember, we set the context on the font-size with em(42px);

Since line-height is a multiplier we don't want to return the value in em, so we don't use em(). We simply divide the target line height that we want to achieve (46px) by the context, which was set to 42px when we set the font-size.

If anything, 46px is an arbitrary number. How I believe Guil Hernandez arrived at this number? In web design it is common to use 1.1 for line-height . In typography and web design it may vary, but 1.1 is very common.

Formula: 42px * 1.1 = 46.2px (which was rounded down to 46px). These are just my thoughts. His logic could be different but this makes sense to me.

For margin-bottom... Again, we are using the same 42px context we set for font-size.

Hope this helps :)