• What will you use for a webpage layout? Percentage or pixels?
  • When should one use one over the other?
  • 3
    Neither - use em's ;-) – Armand Dec 13 '10 at 7:17
  • (That's "em" the typographical term, not "em" the HTML tag, in case anyone boggles.) – Frank Shearar Dec 13 '10 at 9:37
  • 4
    @Alison: don't you mean "Neither — use ems"? – Alan Pearce Dec 13 '10 at 10:49
  • 1
    Target platform? The obvious would be percentage, but unfortunately as most of your graphics assets won't scale nicely I would recommend pixels – dvhh Dec 13 '10 at 11:01
  • Hmmmm @Alan you may be right :—) – Armand Dec 13 '10 at 12:37

What unit you use depends entirely on what you want to accomplish. The units most used in web layouts are:

  • px - absolute; one pixel
  • pt - absolute; 1/72 inch, about 1.3px for screen media
  • em - relative to parent font size; 1.0em = size of a character (width of uppercase M)
  • % - relative to parent

You use px for sizes that remain constant, for example a 1px border.
You use em for sizes that should follow the font size, for example a 3.0em margin.
You use % for sizes that should take up a percentage of the parent, for example a 50% width.

For web page layouts you normally use either pixels or percentages depending on if you want a fixed (pixel) layout or a fluid (percentage) based layout.

  • A little nit to pick: an em is the width, not the height, of an upper-case M in traditional typography. Not surprisingly, an en is the width of an upper-case N. An ex is the character-based height measure. – Stan Rogers Dec 13 '10 at 22:03
  • @Stan Rogers: I never said that it was the height of an upper-case M, someone else edited that in. – Guffa Dec 14 '10 at 1:01
  • What matters is that the information given is as correct as we can make it, not who put it there. (I can't edit other people's non-wiki answers yet, so comments are the best I can do.) – Stan Rogers Dec 14 '10 at 4:49
  • Point Size is not absolute unless you know the exact resolution of the output device and the scale factor that the user has set (resolution-independent UI, XP 'large fonts', etc). Also, iPhone 4 is 326 dpi, which is considerably more than 72dpi – JBRWilkinson Dec 14 '10 at 18:28
  • @JBRWilkinson: It's an absolute measure for any given device. It's as absolute as the unit px; the size of a pixel also differes for any given display. – Guffa Dec 15 '10 at 14:13

I tend to use pixels for width declarations (which generally are fixed), but em's for height. That way the layout resizes vertically - but maintains horizontal consistency.


I use relative / proportionate sizes whenever possible. I find it makes it much easier to make changes to layouts later. Also, using a size relative to a parent element means a change to the parent easily trickles down.

Traditionally, using relative sizes also allowed pages to look correct in various resolutions and was especially beneficial for browser zooming or minimum font sizes. But modern browsers now handle resizing extremely well with pixel-specific layouts, even enlarging images as necessary. So it's become less important to use relative sizes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.