Inconsistent font size and indentation on Firefox/Chrome

Question

Demo: http://jsfiddle.net/waitinforatrain/9JU5b/

I'm trying to make a notification icon thing that looks like this:

It's a div with a background image that has text over it, so the HTML is just:

<div id="notification">
    123
</div>

There are two differences in the text between FF and Chrome:

1. I've set the font to 15px Arial bold, but it looks "bolder" in Firefox than in Chrome. How do I make that consistent?

2. I set text-align: center and used text-indent: -1px to fix the horizontal alignment, and messed with the line-height until the vertical alignment was correct. However, both the horizontal and vertical alignments are off in Firefox. How do I make the indentation consistent?

Answer 1

You can't fix 1 .

The reason for the differences is that Firefox uses "DirectWrite" - a different technique to render text than Chrome does.

Read more here: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

And read this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

To fix 2 , try setting a line-height in px ( 20px looks good). To fix the horizontal alignment, remove the text-indent and adjust the width slightly ( 28px looks good).

You should also add a bit more spacing around the text. I think this quick mockup looks better: