the etherpros blog

Use em, not px.

I've recently been getting into the principles behind responsive web design. The idea behind responsive web design is to create a website layout that looks good on any browser window size. There are three primary tools used to accomplish this goal:

  • Percentage widths
  • CSS3 Media Queries
  • em dimensions

I want to focus this post on the latter.

What is an em?

To put it simply: em is a unit of measurement that is based off of the element's parent font size. For the most part, em behaves exactly like a percentage value, but there a few technical differences that distinguish it from percentage based values in your CSS code.

body { font: 14px/1.5em "Helvetica Neue"; }

h1 { font-size: 2em; /* Value of 28px */ }

As you can see above, a value of 2em is twice the size of the parent (base) font.

Design Consistency

Vertical rhythm is quite important for readability and consistency.

Using em values makes it significantly easier to create a design that has a consistent baseline. By using even em values such as 0.5, 1 or 2, your design will automatically produce a consistent feel by having margins and paddings that are proportional to your font size. On the other hand, when using px values it is not clear whether the margin or padding you're adding is going to offset your baseline or not.

Using ems

By using ems, you have a website expressed through proportions instead of static values. Having a website that is defined in terms of proportions empowers you to adapt the size of your website by simply changing your base font size.

Example CSS:

body { font: 18px/1.5em "Helvetica Neue"; width: 860px; }

.div1 { margin: 1.5em; background-color: #ccc; }

.div2 { margin: 1.5em; background-color: #333; color: white; }

h1 { font-size: 2em; margin-bottom: .5em; }

h2 { font-size: 1.5em; margin-bottom: .5em; }

Example HTML:

<div class="div1">
  <h1>Big</h1>
  This is a test
</div>

<div class="div2">
  <h2>Medium</h2>
  This is a second test
</div>

Will produce the following:

Big

This is a test

Medium

This is a second test

By simply changing the font-size of the body tag to 12px, all the margins paddings and line-height will automatically adjust to the smaller font size:

Big

This is a test

Medium

This is a second test

Ems empower you to create a dynamic layout that will automatically adapt when you need it to. Combining ems with CSS3 Media Queries helps you rapidly create responsive web designs that look good on all resolutions.

James Strong

29 May 2012