Consistent Font-Size Across Browsers (Web Development)

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.

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.

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.

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.

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

Font size different in different browser for same font family

These two browsers use two different font types. They may never be exactly the same but if a browser doesnt support a file type it defaults to something else which could be causing the discrepancy. Below i have listed the file types for each browser. You may want to use a service like font squirrel to create the other types. http://www.fontsquirrel.com/

TTF - Works in most browsers except IE and iPhone.

EOT - IE only.

WOFF - Compressed, emerging standard.

SVG - iPhone/iPad.

---

Related Topics