What is the best way to control font size and legibility for different browsers? I've read lots of contradicting advice so far. For example: Always use px Never use px Use em and % Just use em Make multiple browser-specific stylesheets Any advice on which is actually best? Also, the font I use looks choppy on IE. Is there a good cross-browser font? If so, does that mean we're stuck using one font?
With fonts you probably want to stick with the ones most people have on their computers - for Windows, that's either Times New Roman, or the old standbys arial, helvetica, and verdana. I think by default most people just use arial. You can also specify generic serif and sans-serif fonts just by using those words. I think the general rule is using "em" is more modern, where as "b" and "i" are outdated. I believe "em" is popular when using CSS. The problem with using px is if the browser locks in the pixel size and it's so tiny as to be unreadable. Too many people these days make their font tiny so it looks "trendy" and it's really annoying when you have to squint. If you're interested in being flexible and letting the users specify font size (at the very least by changing their browser settings), here's a link for you. http://www.useit.com/alertbox/20020819.html
First, there is no point in making different font-size rules for different browsers. All modern browser pretty much come with the default size set for an equivalent of 12pt, or 16px on pcs. The user can set the default size to whatever s/he prefers, so my approach is to set the font-size in body to 100%. Others prefer to set to a smaller size, say 76%, which is about 12px. The problem there is the user may have already reduced the size meaning you're making it miniscule—a not good thing. My way acts on the assumption that the user may have reset the size for good reason. For me to make major changes might cause him problems. Once the base size is set, other elements are set using em sizes, eg. p, 1em; h1, 1.8em; &c.. Some prefer to use percentage sizes. I don't use px sizes because IE is buggy, and won't let the user easily resize the fonts should he need to. Using pts is not appropriate to the web, as it is a print measure. Use it for the print media styles, if you wish. I am not a fan of keyword sizing, [ xx-small | x-small | small | medium | large | x-large | xx-large ], as there is little agreement as to what each means. There are 'name' web designers who disagree with me on this. As to font families, verdana & helvetica for sans-serif, and georgia and 'times new roman' for serif seem to be very readable web fonts. cheers, gary
I typically will use ems throughout. The em will give you the most flexibilty so that if your user scales your site up or down the font-size will react proportionatly to the font-size that the user requests.
i have been wondering the same thing myself. what is the best practice for fonts? not to specify font size? what if you dont specify font type?