Kicking ass with em’s and percentages

Don’t you just love those moments when a penny drops? I get those a lot when I’m designing, not because i’m soo smart but because there is so much to learn. When I read a blog post on a new technique—sure it makes sense but it’s not until you work on a real world example you get the ‘Ahhh’ moment.

I had this recently when working on a top secret client site. For the longest time I have been sizing everything in px. They just made more sense to me and I felt I had more control over my designs. After doing more research into em’s I realised have powerful and efficient they can be.


Say you use pixels, you set all body paragraphs to 16px and hearders at 32px. If you later decide 16px is too small and bump it up to 18px, you would have to go through your whole style sheet and adjust every px you have declared.

Alternatively you can use em’s. As before you set the body at 16px, this will be the basis of your font-size for the whole website 16px = 1em.

So now we can set our typographic rules.

  body       { font-size: 16px; }
  p          { font-size: 1em /* 1em = 16px */; }
  h1, h2, h3 { font-size: 2em /* 2em = 32px */; }

Now if we ever decide that 16px is too small, all it takes is a quick edit to the body size and BOOM! everything that is set in em’s will adjust accordingly.

  body       { font-size: 18px; }
  p          { font-size: 1em /* 1em = 18px */; }
  h1, h2, h3 { font-size: 2em /* 2em = 36px */; }

This can be applied to margins and padding as well, setting them in em’s will allow them to scale up or down as much as you or your user wants (users have the ability to adjust text size within the browser settings) without it breaking the design.


Now one thing you may not want to use em’s for are on widths and heights. Many people when browsing the web, like to zoom into the site using ⌘+ and ⌘- (⌘0 to reset to default, ⌘ = CTRL on windows). If you have set with width of the website in em’s or pixels the browser will just zoom on everything giving you an extreme close up.

A neat trick is to setting your layout in percentages. Say we have two columns:

  .column-1   { width: 50%; }
  .column-2   { width: 50%; }

Both have a width of 50%. No matter how much we zoom in, the columns will always take up 50% of the browser size. Allowing us to increase the font size as well a retaining our column layout. Which is usually the desired outcome.



Leave a Reply

Your email address will not be published.