Consistent font-size across browsers (web development)

Question

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.

Solution 1

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.

Solution 2

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/

Solution 3

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.

Solution 4

With these two settings, you can reach exact same font appearance:

font-size: 70%; // better than px

line-height: 110%; // required to make line heights the same

Tested: IE9, Firefox, Google Chrome

Solution 5

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.

View more solutions

Comments

[Syntax]

Agreed. i've used reset.css for around the last 2 years to normalize.

[David Morton]

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

[Iain M Norman]

+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.

[JasonSmith]

+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

[Asela Liyanage]

em should be used instead of px

[Camilo Martin]

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...).

[loeffel]

Especially if using custom fonts added via @font-face, this is no solution either.

[Richard]

This still doesn't work for me. I'm using a px font size, and css normalize. Fonts in Chrome and Firefox are still different sizes.

[Richard]

This doesn't work. Still different sizes.

[Richard]

This is not right. You can set your browser default font size to 16 in Firefox and Chrome, and they'll still be different sizes on screen.