Units of measure: em's, or %'s?

[Paul Jr]

All right, I know this has been gone over a few times, but I don't even recall getting an answer, or even asking this question!
This is how I see it...

em is a unit of measure equal to the elements font-size, thus, when specifying, let's say, the dimensions of a <div>, the <div> will increase and decrease in size depending on what the browser-specified font-size is. But not depending on the users' resolution/window size.

% is a unit of measure which is defined by its container (I'm sure I described that wrong). E.g., if you have a <div> inside another <div> with the latter <div> having a width of 500px, if you set the width of the first <div> to 10%;, it will be 50px wide, but it the size will increase or decrease depending on the users' resolution/window size. But not depending on the browser-speocified font-size.


Now, both em and % have their advantages, and disadvantages. My question, is which one should be used? I am quite sure that not juse one should be used, but when is it appropriate to use both? And how exactly should they be used? This has puzzled me for a long, long time.

[Fang]

Use em for the font in the body selector
body {font-size:1em;}
and % for all other font declarations
.content {font-size:200%;}

Use % for blocks and px for the block's belts(margin padding border).

This is the ideal scenario, using relative units, except for belts.
In practice you may want to fix the font-size defined in the body,
for your own preference or to over-ride the preference set by a user who has been playing with the browser options (this does happen, I have angry emails to prove it).
Blocks, in some instances, may need to be in absolute units.

[giggledesign]

i use px

[Vladdy]

Originally posted by giggledesign
i use px
And you are wrong in doing so :rolleyes:

[Paul Jr]

I actually mix the two...

[toicontien]

Ideally, I use ems to specify most column widths and percentages for font sizes.

See http://www.cm-life.com/pages/newdesign/ for an example em-based layout. Resize the browser's font size via the View menu. You'll notice that the layout changes proportionate to the change in text size. The advantage here is that you preserve the optimum number of words per line for reading, but often does require side-scrolling.

Another possibility is writing a javascript that resizes the body's font size until the layout takes up the full width of the browser. Kinda like maximizing a window.

I use px to specify borders, but ems for pretty much everything else.

An em is equal to the point size of a font. An en is half the point size, if you really care about the official definition of an em. Also, see "The Trouble With EM ’n EN (and Other Shady Characters)" at alistapart.com: http://www.alistapart.com/articles/emen/

The disadvantages are, of course, bugs in IE. IE5.x/PC doesn't move the columns over when text is resized in the example above. IE5/Mac won't at first, unless you add or remove the link bar (apple + T, I think) or refresh the page.

[spufi]

Originally posted by Vladdy
And you are wrong in doing so :rolleyes:

All units of measurement have their issues, and px actually has fewer. I went and read "Designing with Web Standards" and I feel comfortable in my use of px as a unit of measurement. The smallest amount of px I use on my site is 14px. The biggest is 16px. Both easily fall into the range of being readable and not overly big. 16px is actually the W3C standard for a default and most OSs support it. I think 9px is where it is determined to be unreadble. If a user has an issue with my font sizes, they can easily change it in their own browser if they aren't using IE. A future version of my site will have a side menu where the user can change the font size to their liking if need be. I'm just saying that if a person knows the pros and cons of what unit of measurement they are using and are able to handle those issues, I don't see what's so wrong in using it.

[Vladdy]

1. The fact that IE users can not change it.
2. It does not reflect the desired default setting of the user - 1em or 100% does.

px has the fewest legitimate uses.

[spufi]

And yet, Zeldman and Meyer, two web design heavy weights use px quite a bit on their sites. Zeldman even goes to not include a way for IE people to resize it easily and goes down to a font size of 10px. This is also true of ALA although a quick scan showed use of 11px as a font size. If px has the fewest legitimate uses, then why is it being used so often and certainly more than % by the industry leaders? I have seen them use em though.

[Vladdy]

For the same reason tables are used way more often for layour than CSS :rolleyes:

[DaveSW]

I think that at the end of the day it is a unique problem. Do you allow the user to choose their font size, and risk the angry emails from those who aren't aware that it relates to their own settings, or just give them what they expect? I usually just ignore the font size, and let them sort it out... Maybe it would be wise to offer the information somewhere on your site on how to change font size, or a style-sheet switcher to change the font size...

[Vladdy]

Good points, Dave, just one thing that I can not agree with: you can not "give them what they expect" because all visitors do not expect the same.
As far as the style switcher goes, I agree that it is a good solution for the ignorant and actually use one on my site.

[spufi]

Originally posted by Vladdy
For the same reason tables are used way more often for layour than CSS :rolleyes:

Well, I was talking more about Meyer's and Zeldman's sites in this case and neither do use tables for layout. I do understand where you are coming from, and the next layout I do for my site will give the user the option to change the font size if they wish. I think it would be funny to have a submenu showing how to change the font size in a user's browser because Opera and Mozilla would take one step where IE takes so many more. :)