Improve web font rendering in Windows by autohinting fonts

Updated . Posted . Visible to the public.

Web fonts are awesome Show snapshot . After being restricted to Arial for two decades there is finally a cross-browser way to embed fonts into web pages.

Unfortunately while web fonts look awesome on Linux and MacOS, they look horrible on Windows Show snapshot , a problem that gets worse with smaller font sizes.

The culprit is something called font hinting Show snapshot :

... hinting is about... programming instructions that fine-tune a font’s rasterisation, the process by which its mathematically ideal outlines are mapped onto a monitor’s pixels.

Because hinting is an ardous and time-intensive task, the hinting information embedded into font files is usually very bad, especially for unexpensive fonts. In order to remedy this, Linux and MacOS ignore hinting information in font files and replace it with auto-hinting, an algorithm that works better than embedded hinting most of the time. Windows does not employ auto-hinting, causing horrible rendering for most fonts.

Embedding autohinting information into font files

A solution is to autohint fonts and replace the existing (bad) hinting with the autohinting information.

To do this, first save a badly hinted font in Truetype (.ttf) information. Now use ttfautohint Show snapshot to generate an autohinted TTF font:

ttfautohint myfont.ttf myfont_autohinted.ttf

In order to support all desktop browsers, we need to offer one other font format, EOT. You can use ttf2eot Show snapshot for that, which some friendly soul has also made available on the web Show snapshot .

In order to support iOS devices (not Android), we need to offer one additional font format, SVG. There is a Java application ttf2svg Show snapshot that might help you out, but I haven't tried it yet.

Now you can link your new, autohinted font files in a @font-face declaration like this:

  font-family: 'MyFont'
  src: url('myfont_autohinted.eot')
  src: local("☺"), url('myfont_autohinted.eot?#iefix') format('embedded-opentype'), url('myfont_autohinted.ttf') format("truetype")
  font-weight: normal
  font-style: normal

Congratulations! Your font rendering on Windows is now 10 times more awesome than before. The rendering quality on other OSs should not change since they weren't using embedded hinting information in the first place.

I attached before/after comparison screenshots for all major Windows browsers to this note.

Henning Koch
Last edit
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2011-10-25 20:02)