Forum Moderators: not2easy

Message Too Old, No Replies

Font size differences between Firefox and Safari

css solution

         

ControlZ

4:49 am on Oct 15, 2006 (gmt 0)

10+ Year Member



I cannot seem to find a difinitive answer to this issue.
Can anyone suggest the "best" way to size fonts using css that will allow for consistant size between Safari and Firefox?

I noticed that a stye that I defined as 11px in css looks a lot smaller on a Mac running Safari. Is there a way to set font size using em or % that will render the font as the same size regardless of the browser?

Ingolemo

12:29 pm on Oct 15, 2006 (gmt 0)

10+ Year Member



In the intrests of IE users, you're recommended to use a relative scale (ems, %, or keywords) to set the font size rather than pixels anyway, so that they can resize the typography to their own preference.

As per your problem, are the default font-size and ppcm set the same for both browsers?

You should keep in mind though that many users could (and should) override your font-size with their own so you'll never be able to enforce completely consistant display.

topr8

12:55 pm on Oct 15, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



>>Is there a way to set font size using em or % that will render the font as the same size regardless of the browser?

no, because remember the user can change the font size in the browser anyway

Setek

4:04 am on Oct 16, 2006 (gmt 0)

10+ Year Member



>>Is there a way to set font size using em or % that will render the font as the same size regardless of the browser?

no, because remember the user can change the font size in the browser anyway

To expand on this, I think what you're looking for has to be constricted into some basic assumptions:

The font size will look the same if:

  • The browser's default font size is set to medium/normal/default;
  • A user is not overriding a website with a custom stylesheet for reading accessibility.

The best way to get an acceptable compromise on this is to:

  • Set your body's font size to
    100.01%
    - this will ask of IE to render relative (em, %, ex) font sizes properly when IE's font size is -not- set to medium;
  • Use relative font sizes for everything else - it allows IE to resize the fonts according to its own setting in the first place.

Sometimes it will still look different because:

  • Any monitor's resolution will change the "size" (viewable by the human eye) of anything displayed, as it may fit more pixels into a smaller area;
  • Any user may override your settings with their own.