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

Posted by Josh Vaughn
Josh Vaughn
2,289 Points

Clarifying body font size and ems

In the video "Responsive Text and Vertical Rhythm Pt 1" - at approx. 3:10 he has us set the font-size on the body tag in ems using the target/context formula

body {
   font-size: 1.125em
}

Then toward the end of the video he has us use a media query to reset the body font-size to 1em when the viewport is below 600px

@media screen and (max-width: 599px) {
    body {
        font-size: 1em;
    }

He says that this sets the body font to 16px.

However, we already set the base font to 18px (in ems) . Wouldn't 1em now be 18px? Otherwise - what he's saying here is that this new declaration is bypassing the body tag and using the browser font size as base.

Which is it? Ive got five methods of sizing and scaling text swirling around in my head and I really need to nail this once and for all. Thanks!

4 Answers

Dave Evans
Dave Evans
13,160 Points
Dave Evans
Dave Evans
13,160 Points

Here is an article by Louis Lazaris http://www.impressivewebs.com/understanding-em-units-css/ that is pretty good. 'Ems' are basically a computed value based on the font-size of the element that is being used. If 1em = 16px, then your 1.125em = 18px. You don't declare your font-size more than once when using ems. You set it and base your design around that.

Ralf Koller
Ralf Koller
4,506 Points
Ralf Koller
Ralf Koller
4,506 Points

In the body tag, at both breakpoints, the font-size has the browsers default 16px as context. Therefor the base size of 18 px is 1.125em and at the breakpoint the font-size is 1em, since 16px is identical to the browsers default font-size.

Josh Vaughn
Josh Vaughn
2,289 Points
Josh Vaughn
Josh Vaughn
2,289 Points

Dave, thanks for the reply but this is specifically in reference to a video in a course here. He showed us something and I want to get clarification on that. I do basically understand ems. But either I don't, or what he showed us is wrong.

ie. in the example above: When the browser hits the media query, at that point is the context for the 1em 18px? Or 16px?

Josh Vaughn
Josh Vaughn
2,289 Points
Josh Vaughn
Josh Vaughn
2,289 Points

Ralf, thanks! Yes - on reflection the media query totally resets the context back to the browser default. Otherwise the resizing would not work. Had a brain snag on that - with all the fonts flexing around it can get pretty crazy at times ...