Big difference in text processing in Chrome vs Firefox

Question

I have some significant differences in text rendering between Chrome and Firefox. Chrome seems to apply some anti-aliasing rules to the text and shortens it a bit.

I tried playing with anti-aliasing -webkit font, word spacing and word spacing, but none of them have any effect.

See screenshots

Corresponding CSS (calculated):

color: #C4C4C4; font-family: sans-serif; font-size: 9px; font-style: normal; font-variant: normal; font-weight: normal; 

Corresponding CSS (calculated):

 font-family: sans-serif; font-size: 9px; font-weight: 400; font-style: normal; font-size-adjust: none color: #C4C4C4; text-transform: none; text-decoration: none; letter-spacing: normal; word-spacing: 0; line-height: 11.0833px; text-align: start; vertical-align: baseline; direction: ltr; 

Note that faded text in the background is just an image .. ignore it.

I have the feeling that Chrome has a css switch for anti-aliasing rules, but am not sure where to look for additional information.

Edit:

jsfiddle: http://jsfiddle.net/mHzhQ/

For the record, I'm on Ubuntu. Perhaps this is having an effect.

Any tips?

Answer 1

Different browsers use different rendering mechanisms, which (designed to) produce different results. This is especially true for smaller font sizes. As a rule, you cannot do much. If the difference is not intended by browser designers, it is possible that this is a kink that was designed for other OSs, but not for you (Ubuntu).

(However: you checked your "minimum font size" in Chrome - Settings> Under the hood> Customize fonts ... - and Firefox - Settings> Content?)

Answer 2

"sans-serif" may result in a different font

so if you:

font-family: verdana, sans-serif;

you will see an almost perfect result in both browsers

NTN