Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design Web Typography Laying Out Type for the Web Responsive Typography

Yuqi Feng
Yuqi Feng
4,686 Points

Why is the container max-width 46rem? Why 46? What is the route em here? Why should it be rem rather than em here?

With large screens, why is the container max-width 46rem? Is 46 calculated? How? Rems are relative to the route em, set to the html. So what is the route em here? Why should it be rem rather than em here? I feel I am missing something here... Any response would be much appreciated. Thanks!

1 Answer

Austin Whipple
Austin Whipple
29,687 Points

The root em (the HTML element) font size defaults to 16px unless otherwise defined in your CSS files or the client's browser settings. So that would be 736px (16 * 46). That dimension was probably chosen as the max width for very large screens because it would maintain a reasonable column width for readability (very wide columns of text can be very hard to read efficiently).

As to why it would be rem rather than em, it usually depends on the use case. If you use rem, it is locked to the root element's font size. When you choose em, it can be influenced by the font size settings of any container elements. So, for instance, if you decided to adjust the font size of the <body> element to 12px, then you've also suddenly changed the width of your main text column. In some cases this can be a good thing, but is often bad when dealing with important, meant-to-be-stable layout elements.

Yuqi Feng
Yuqi Feng
4,686 Points

Thanks a lot for your detailed answer! I still wonder why the number is 46 rather than 45, or 47 or any other number though...is it just an approximation? Could you explain a bit more about it? Much appreciated!

Austin Whipple
Austin Whipple
29,687 Points

They were probably shooting for a column width of around 740px wide to meet whatever designs they were working with. This could have been to maintain the correct column width for readability or was just a random choice for this particular example. 46em at 16px default font size means that they'd get a column width of 736px, which is pretty close without needing to go into crazy decimals to have pixel-perfect dimensions.

As for why 740px was chosen, or what width you should choose, it really depends on the demands of the content. Text shouldn't exceed ~100 characters per line, so you should adjust element widths accordingly. If you want a sidebar in addition to the text column, you'd want a wider container to wrap them both in.