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.

CSS

Brian Hayes
Brian Hayes
20,986 Points

Widths: em vs %

Okay, so I've been curious about how foundation uses ems to determine their column widths in their grid system and started searching for articles on the advantages of using ems for width in responsive design over percentages. So far I can't say I've really found much. It has something to do with font sizes says a few sources. By that I mean somehow the font size can affect the column size or vice versa. I was a bit confused considering i couldn't find much elaboration on it.

So could anyone tell me why use ems over percentages for widths?

2 Answers

Hey Joey,

This article from Site Point has some very cool points about using the "em" unit for component resizing, which is basically using the font-size to control the surrounding elements to get a proportionate viewing experience. http://www.sitepoint.com/power-em-units-css/

A.J. Kandy
PLUS
A.J. Kandy
Courses Plus Student 12,422 Points

The great thing is that you can intermix percentage and em-based values where it makes sense (and in newer browsers, using vw and vh units to scale to the viewport).

For instance, you might want to use percentages for larger elements like main columns and sidebars and any margins between them; and use an ems-based approach for modules with related elements, as described above.

You might want to check out the latest issue of .Net Magazine - there's a nice responsive type how-to by Clarissa Peterson (disclosure: my wife :)