Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Major difference in text rendering on Chrome vs Firefox

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?

like image 514
Naatan Avatar asked Oct 04 '11 17:10

Naatan


People also ask

Why do fonts render differently in different browsers?

If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences. Sometimes these minor differences can have a domino effect.

Why is Firefox font different?

You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Font tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.

What makes Chrome and Firefox different?

Firefox is a free and open-source web browser that provides a number of features for easy web browsing. Google Chrome is a free web browser but it is not open source, it is the most used web browser for desktop. 2. Firefox development was done by Mozilla Foundation.

How do I increase font rendering in Firefox?

You can access Firefox's font settings by first clicking the menu icon (three stacked lines in the upper right corner), and selecting Preferences. Make sure you're on the General tab, then scroll down just a bit to the “Language and Appearance” section. You can now change the default font and font size for Firefox.


1 Answers

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

like image 112
orome Avatar answered Nov 10 '22 16:11

orome