8

I'm having some major differences in the rendering of text between Chrome and Firefox. Chrome seems to apply some anti-aliasing rules to the text and shrinks it down quite a bit.

I've tried playing with -webkit-font-smoothing, letter-spacing and word-spacing but none seem to really have any effect.

See screenshots

Rendering on Chrome

Relevant CSS (computed):

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

Rendering on Firefox

Relevant CSS (computed):

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 the faded text in the background is just an image.. ignore that.

I have a feeling Chrome has a css switch for anti-aliasing rules, but not sure where to look for more info.

Edit:

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

For the record, I'm on Ubuntu. Possibly this has an impact ..

Any tips?

5
  • did you use a CSS Reset or CSS Normalize?
    – Jawad
    Oct 4, 2011 at 17:08
  • Sorry I should have mentioned this. I'm using Blueprint css which includes a reset. So yes.
    – Naatan
    Oct 4, 2011 at 17:15
  • make a fiddle. It will a lot easier to test it.
    – Jawad
    Oct 4, 2011 at 17:17
  • Checked on FF 6.0.2 and GG 14 in windows 7. See no difference. Pretty sure it is an OS situation.
    – Jawad
    Oct 4, 2011 at 19:12
  • I tried it on Win, Linux and Mac. On Windows there's least of a difference but on Mac and Linux it's quite noticeable. I guess I'll just have to find a font that renders mostly the same across browsers & OS.
    – Naatan
    Oct 5, 2011 at 13:07

2 Answers 2

4

Different browsers use different rendering engines that (are meant to) produce different results. This is especially the case with smaller font sizes. There's generally not a whole lot you can do about it. If the difference is not intended by the browser's designers, it's also quite possible that this is a kink that has been worked out on other OSs, but not yours (Ubuntu).

(That said: have you checked your "minimum font size" in Chrome — Preferences > Under the Hood > Customize Fonts... — and Firefox — Preferences > Content?)

1

"sans-serif" may result in a different font

so if you:

font-family:verdana, sans-serif;

you will see a nearly pixel-perfect result in both browsers

HTH

1
  • 1
    I did try other fonts such as Verdana, but they had the same effect. They all seem smaller and more condensed on Chrome.
    – Naatan
    Oct 4, 2011 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.