Rendering font differs from IE compared to FF and Chrome

Question

I have noticed that rendering of fonts differ considerably if the size is, for example. 11px. Running Windows 7

The following HTML and CSS is used

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testing font</title>
        <style>
            body {
                font-family: "Helvetica","Arial",sans-serif;
                color: #1A1A1A;
                padding: 10px;
            }

            .foo{
                font-size: 14px;
            }
            .bar{
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <div class="foo">
                <p>HOME</p>
        </div>
        <div class="bar">
                <p>HOME</p>
        </div>
    </body>
</html>

As the attached images shows, FF and Chrome tends to tighten the width in 11px but not in 14px. enter image description here

Why is that, is there a workaround?

Different browsers use different font rendering engines. Enough said. — BoltClock, Mar 05 '12 at 22:14
may sound a dumb idea, but check maybe you accidentally zoomed in the font, happens sometimes :) try ctrl+0 maybe it helps — Liviu, Mar 05 '12 at 22:35
@BoltClock That may be so, but Arial is Arial regardless browser. If 14px renders the same I belive the question about 11px is permitted. One could even think that fonts are based on vector graphic, which is math formulas. Math is a universal language. — dbd, Mar 06 '12 at 07:57

Marat Tanalin · Accepted Answer · 2012-03-05T22:43:46.173

5

Firefox 7+ under Windows 7 uses GDI Classic mode (with hinting) to render so called Core Web fonts like Arial (since they are more sharp and readable with hinting enabled), and DirectWrite (without hinting) for other fonts. Specific fonts to use GDI mode with are listed in following about:config pref:

gfx.font_rendering.cleartype_params.force_gdi_classic_for_families

AFAIK, rendering mode in Firefox depends also on font size. For enough-big font-sizes and too small ones (perhaps greater than 15px and maybe less than 9px), it uses DirectWrite for Core Web fonts too.

IE9 under Windows 7 uses DirectWrite always.

Chrome seems to use GDI classic mode always.

edited Mar 05 '12 at 22:43

answered Mar 05 '12 at 22:31

Marat Tanalin

13,927
1
36
52

In other words there is no workaround except images. Small core web fonts wont look the same. – dbd Mar 06 '12 at 08:00
Do you have references for IE and Chrome? [edit: found this link: http://blog.mozilla.org/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/ it's a bit old though] – Sam Hasler May 31 '12 at 13:05
Found the Chrome bug for directwrite support: http://crbug.com/25541 Here are all the current chrome bugs for directwrite: http://code.google.com/p/chromium/issues/list?can=2&q=FONT+directwrite&sort=-stars&groupby=&colspec=ID+Pri+Stars+Mstone+ReleaseBlock+Area+Feature+Status+Owner+Summary&nobtn=Update – Sam Hasler May 31 '12 at 13:22
@SamHasler: Direct2D/DirectWrite has been mentioned in the official IE blog [multiple](http://blogs.msdn.com/b/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx) [times](http://blogs.msdn.com/b/ie/archive/2010/11/03/sub-pixel-fonts-in-ie9.aspx) as for IE9. – Marat Tanalin May 31 '12 at 22:10

score 1 · Answer 2 · answered Mar 05 '12 at 22:24

Different browsers use different engines.

And even FF will use different algorithm on Linux than on Windows.

And even user settings (zooming, color schemes; possibly for accessibility reasons) can (and will) break your beautiful style mercilessly.

As "workaround" I see two options:

Well if you really desperately must, render the font at home and put a PNG on the site
Change your style so that it does not depend on any font size, type or other proportions. So that it will look good (at least readable) in every browser

score 1 · Answer 3 · answered Mar 05 '12 at 22:32

Certain font rendering engines may honor the CSS properties that others don't (like letter-spacing, text-rendering, font-stretch, font-size-adjust and others - see the CSS3 Font Module). You could try playing around with those you find, to eventually come up with (almost) uniform rendering across different browsers.

score -1 · Answer 4 · answered Sep 30 '14 at 14:07

Not an expert but this worked for me...

 html, body {
    zoom:1; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1)
}

All browser fonts seem to now rendered the same cross-browsers.

Rendering font differs from IE compared to FF and Chrome

4 Answers4

Linked