views:

1625

answers:

5

When creating web pages how do we achieve a consistent font size across browsers. I have used something like "font-size: 11pt; font-family: Helvetica,'Lucida Grande'" in my CSS, but the text looks different in Firefox, IE, Google Chrome and Safari (and this is not even on different platforms). Basically on the same machine, that is running Windows Vista, I get a different look and feel under different browsers.

How can this be fixed so that the size of text appears same on all the different browsers.

+1  A: 

Use px (pixels) instead of pt (points) for your font size units. Then you'll be dealing with pixel sizes.

Beware however, depending on how your site is used. There have been lawsuits (in the US) over accessibility issues on websites that result from "hard-coding" the font size.

David Morton
em should be used instead of px
Wahnfrieden
I think those lawsuits must be caused because of ridicously small font sizes for disclaimers, that's the only way something like that could happen (even on a country like the US...).
Camilo Martin
+8  A: 

You will want to use a CSS Reset to attempt to get consistent behavior across all browsers.

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

VBNight
Agreed. i've used reset.css for around the last 2 years to normalize.
Syntax
+1 to that. Yahoo's base, font and reset all together are a great way to start a site. I find my CSS then does what I intended.
Iain M Norman
+1 It's also really nice how you know exactly how much an em is and you can even calculate from ems to pixels using a simple formula; but your site will still be accessible for people who override font sizes
jhs
A: 

This is a non-answer, as there are ways to achieve what you need, but i'm not too well-versed in them. Start with the "reset" that frameworks like blueprint usually provide and go from there.

It is usually much easier and smarter to have designs be flexible enough so that the small differences across browsers don't play too big a role.

rz
+4  A: 

When creating web pages how do we achieve a consistent font size across browsers

For main body text, you don't. Some people want bigger text so they can read it more easily; get in their way at your peril. Use relative font sizes in units such as ‘em’ or ‘%’.

For small amounts of presentational text where you need text size to match pixel-sized on-screen elements, use the ‘px’ unit. Don't use ‘pt’ - that only makes sense for printing, it'll resize more-or-less randomly when viewed on-screen.

You can still never get the text exactly the same size because fonts differ across platforms—and Lucida Grande and Helvetica look very different of course.

bobince
+1 to bobince's comment. "get in their way at your peril". Peril can range from angry users to suing users:http://www.petefreitag.com/item/582.cfm
David Morton