Inconsistent font sizes cross browser with both px and em

Question

3.5em: http://jsfiddle.net/yst9h/

html, body {
    font-family:Arial, Helvetica, Sans-Serif;
}
.loadingText {
    font-weight:bold;
    font-variant:small-caps;
    font-size:3.5em;
}

56px: http://jsfiddle.net/yst9h/1/

    ...
    font-size:56px;
    ...

I've got an element with a bar below it, and some Loading text like so. on Chrome the text fits neatly above the bar, which is sized to 100% of the parent it and the loading text share ( 200px width ). On Firefox and IE, however, the font is much larger(!) sending it past the bar and looking misaligned as a result. All of the browser's dev tools report that the fonts are the correct size ( when they are obviously not to the human eye ), and none of the browsers have any zoom level set ( tested different zoom levels as well, no change in the scaling difference )

This has me extremely stumped, I've been through SO and google many times over reading all of the related font inconsistency issues looking for something I've missed, and have yet to come across this one again.

Is this something I can fix simply, or will I have to wrangle with per-browser css rules to lower the font size?

Answer 1

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

Answer 2

What you are seeing is real. I prefer to think of it as Chrome being the exceptional case, but that's me.

There is no simple fix. The best approach is not to make assumptions about the space any given piece of text will fill.

For text that requires multiple lines, you can gain some regularity by using the line-height property.

If you need pixel-perfect rendering for a small chunk of text, an image might work best.

Answer 3

You have two options.

1. Decrease the size of the text.
2. Increase the size of the container.

If you remove the width of .loadingText and set text-align: center;, you're most of the way there.

You need to set the width of the text and loading bar equally (so you have to remove the width of the text). For aesthetic purposes, you may want to center the text.

Here are your options.

1. Font Fix
2. Width Fix