- What will you use for a webpage layout? Percentage or pixels?
- When should one use one over the other?
-
3Neither - use em's ;-)– ArmandCommented Dec 13, 2010 at 7:17
-
(That's "em" the typographical term, not "em" the HTML tag, in case anyone boggles.)– Frank SheararCommented Dec 13, 2010 at 9:37
-
4@Alison: don't you mean "Neither — use ems"?– Alan PearceCommented Dec 13, 2010 at 10:49
-
1Target platform? The obvious would be percentage, but unfortunately as most of your graphics assets won't scale nicely I would recommend pixels– dvhhCommented Dec 13, 2010 at 11:01
-
Hmmmm @Alan you may be right :—)– ArmandCommented Dec 13, 2010 at 12:37
|
Show 1 more comment
3 Answers
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. Commented Dec 13, 2010 at 22:03
-
@Stan Rogers: I never said that it was the height of an upper-case M, someone else edited that in.– GuffaCommented Dec 14, 2010 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.) Commented Dec 14, 2010 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 Commented Dec 14, 2010 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.– GuffaCommented Dec 15, 2010 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.
