Em Or Px?

[TCH-Tim]

Which one is better for defining font sizes, em or px, and why?

[TweezerMan]

I'm by no means an expert here, but I'll weigh in with what my understanding is...

 

em resizes fonts relative to the size of the current font.

 

px is what I would consider specifying an absolute size (strictly, it does not, but it works for me).

 

The argument against using px is that IE users cannot adjust the size of the text in their browser window if it is too small or too large by using "View", "Text Size". (Firefox does not have this limitation - Firefox users can use "View", "Text Size" and it will resize fonts sized with px.)

 

Specifying fonts in a relative size (such as by using em) allows IE users to resize the fonts on the page, but then the appearance of your page is at the mercy of what the user's current "View", "Text Size" setting is ('Smallest', 'Smaller', 'Medium', 'Larger', or 'Largest'). What looks good at 'Medium' often will not when viewed at 'Smaller' or 'Larger', for example.

 

I personally found it too much trouble to get IE to use decent font sizes with relative sizing while taking into account the different "View", "Text Size" settings, so I used px to size all of my fonts on my web page.

 

Hope this helps...

[owatagal]

I think David's right and the difference does have to do with scalability/accessibility. Most of the major designers use ems and keyword-sizing to a greater or lesser extent:

 

Zeldman uses a combination of pixels and ems. Eric Meyer definitely uses ems. Durstan uses ems and percentages. Dive Into Mark uses percentages and keywords (small, x-small, etc). I didn't look too closely at the style sheets, but I'm willing to bet Zeldman has some sort of hack to feed IE em-based font sizes so they'll scale.

 

I think A List Apart also advocates ems over pixels--but the articles on that are both a little old:

 

www.alistapart.com/articles/relafont/

 

www.alistapart.com/articles/sizematters/

 

Dive into Accessibility also has a detailed explanation of why pixels are worse than ems for visually-challended readers: diveintoaccessibility.org/day_26_using_relative_font_sizes.html

 

I'll admit I still code with pixels, but I'm slowly making my sites more accessible; switching to ems and keyword sizing is on my list of things to do this summer. Generally I think ems are *better* but pixels are more convenient.

[TCH-Tim]

Generally I think ems are *better* but pixels are more convenient.

This is basically the conclusion I've come to over the course of the day. Just wondering if it's worth switching everything over or what. Guess if my only consideration is the usability for IE users, well too bad for them. I'll get around to it eventually.

 

Thanks for the explanations.

[DarqFlare]

I use px definitions exlcusively in my CSS files, although I may switch to em if I can get the sizes where I want them...

[TCH-Don]

I wish everyone would use em

so I can resize the page font size

to match my display adapter, monitor resolution and weak eyes.

 

it takes very little thinking to code so the text can flow and wrap.

 

On my computer at 1024 x 768 I have seen pages that have fixed point sizes that are so small I can't see the words without squinting.

If the creator was on 800x600 it may have looked good.

You may have seen pages created by someone with 1600x1200

and their text was way too big.

 

So please use em and let the visitor choose the size.

[carbonize]

Don if you use Firefox, Mozilla or Opera you can enlarge the entire page keeping everything in proportion.

 

I personally always use px as it gives you precise control.

[TCH-Tim]

Don if you use Firefox, Mozilla or Opera you can enlarge the entire page keeping everything in proportion.

 

I personally always use px as it gives you precise control.

<{POST_SNAPBACK}>

That's kind of my feeling. I would prefer that the site look the way I designed it. If you would like to resize afterwards, fine. A majority of my visitors (albeit a slim majority) use Firefox, so they can resize it.

 

Guess it's that constant struggle between design and accessibility. It would be so much easier if everybody used Firefox on a 1024x768 screen with every font ever invented installed.