1. Reset the browser

The simplest way to make the jump from pixels to ems is to think of ems in a familiar context. Luckily, most browsers today assume one em is 16 pixels by default. But we like to account for as many browsers as we can. After all, who knows how technology will influence browsers in coming years? We’ve had success using Nicolas Gallagher’s Normalize.css in Foundation 4. Linking to this CSS file in your work before your own styles will help ensure 1em = 16 pixels in your design.

<link href="/normalize.css" media="all" rel="stylesheet" type="text/css" />

<link href="/your-styles.css" media="all" rel="stylesheet" type="text/css" />

Earlier versions of Foundation used this meta tag to keep websites sized properly on first load:

<meta name="viewport" content="width=device-width" />

But when people turn their devices sideways, web pages tend to zoom awkwardly. It’s a minor detail that many choose to overlook. But optimizing for mobile devices means taking their form factor into account. People use their phones horizontally and vertically.

Fortunately there’s a better way. You can also make sure that users start off at the right scale with this handy meta tag:

<meta name="viewport" content="initial-scale=1" />

That’s great for plain CSS. But if you use Sass to write CSS, you have another option.

2. Use Sass to compute for you

Because almost every measurement in Foundation 4 uses ems, we needed a way to calculate ems to pixels — so we invented the emCalc() function.

emCalc(20px) = 1.25em

This Sass function is built into Foundation, but it’s not hard to write your own. The formula is simple: em value = desired value / body font-size.

@function emCalc($pxWidth) {
@return $pxWidth / 16;
}

Given a pixel size, this Sass function will return ems. You can also do the opposite, calculating pixels from ems:

@function pxCalc($emWidth) {
@return $emWidth * 16;
}

Sass or not, designing with content in mind helps make sure that users find real value in your products. And working with ems — a natural content unit of measure — will help get you in the right mindset.

---