22

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.

user63468
  • 223
  • 1
  • 2
  • 5
  • Duplicate, see: [http://stackoverflow.com/questions/484502/how-to-render-text-in-net-in-the-same-size-as-browsers-does-given-css-for-the-te](http://stackoverflow.com/questions/484502/how-to-render-text-in-net-in-the-same-size-as-browsers-does-given-css-for-the-te) or [http://stackoverflow.com/questions/132685/font-size-in-css-or-em](http://stackoverflow.com/questions/132685/font-size-in-css-or-em) – Diodeus - James MacFarlane Feb 06 '09 at 19:42

5 Answers5

16

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
  • 1,744
  • 14
  • 12
  • Agreed. i've used reset.css for around the last 2 years to normalize. – Syntax Feb 06 '09 at 19:42
  • +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 Feb 06 '09 at 20:41
  • +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 – JasonSmith Mar 30 '09 at 17:02
  • This doesn't work. Still different sizes. – Richard Jun 17 '22 at 13:43
8

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
  • 16,338
  • 3
  • 63
  • 73
  • 3
    em should be used instead of px – aehlke Jan 18 '10 at 00:33
  • 2
    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 Jun 09 '10 at 01:06
  • Especially if using custom fonts added via @font-face, this is no solution either. – loeffel Sep 18 '14 at 08:15
  • 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 Jun 17 '22 at 13:40
7

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
  • 528,062
  • 107
  • 651
  • 834
  • 1
    +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 Feb 06 '09 at 19:50
  • 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. – Richard Jun 17 '22 at 13:44
3

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

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
Antaran
  • 31
  • 3
1

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.
  • 19,861
  • 10
  • 54
  • 47