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

Brian Hayes
Brian Hayes
20,986 Points
Posted by 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

Marcus Parsons
Marcus Parsons
15,719 Points

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
A.J. Kandy
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 :)