Very Different Font Sizes Across Browsers

Consistent font-size across browsers (web development)

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.

Very different font sizes across browsers

Use unitless line-height for BODY (or HTML) element:

BODY {line-height: 1.25; }

Font-size issues comparing chrome and Firefox

I suggest you use a CSS reset like the one from YUI. It will make your pages much more consistent across all browsers, including font rendering. It makes the biggest difference with IE and the other browsers, but it gets rid of all manner of inconsistencies.

How to prevent different browsers rendering fonts differently?

Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.

Honestly, to the average user, the difference will not be all that noticeable and for the most part, pixel-perfect cross-browser display of anything has been long abandoned as a print-world aftereffect.

If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).

Hope that helps.

Inconsistent font sizes cross browser with both px and em

There seems to be a problem with font-variant: small-caps;

When removing it like in this fiddle, I have consistent rendering in W7 with Fx, Chr and IE8.

If you confirm that with your tests (I didn't test thoroughly), I'd advise you to render text with smaller font-size and force it in uppercase (without the help of font-variant:small-caps;) and use :first-letter as this:

.loadingText {
    font-size: 2.5em; /* example, something less than 3.5em. Equiv. 40px */
    text-transform: uppercase;
}
.loadingText:first-letter {
    font-size: 3.5em;
}

Even with this widely used properties, rendering of text is not meant to be pixel-perfect on different OS and browsers so their width will vary (not every Linux distribs have Arial for example or maybe very few of them, anti-aliasing is OS and user choice, OS X has a different rendering than Windows, it's different across versions of Windows and on mobile... oh well :)

Why does my font-size display differently on firefox vs. chrome mobile browsers?

Every browsers have different default values, even though most of them are same.

Designers usually tackle this problem by normalizing/reseting the default browser values using a Normalize Script.

You can read about this more in this article.

different layout&font-size in different browser

You should add any default font-family in your css after that you can see same fonts on all browser

and add reset css from http://html5doctor.com/html-5-reset-stylesheet/ in header section!

Why some fonts size are not consistent across browsers?

Each browser is a different product by a different company, they program their product differently, and font size is one of them. From this link, 1 em is equal to the current font size, which maybe different for different browsers, also user can change it, i have changed the text size to largest in IE, and the font size is now 21.33 px.

Using em means it is dependent on a lot of things, use %age for consistency.

1 em will be different for different browsers (depending on their default or of user has changed it). For example you said IE has font size of 13 px and firefox has 16 px, when i checked, firefox had 13 px and IE has 16 px, which was changed to 21.33 px when i changed the text size to largest (view -> text size)

---

Related Topics