left (chrome 28) right (chrome 28 with mactype)

Pretty Google Chrome fonts on Windows

Fix Dat Aliasing

Note: Since 2015 Chrome has been using DirectWrite to render text, and thus follows whatever ClearType setting you have. This breaks using MacType. The default DirectWrite rendering seems to work fine, but is not as good as the one on Microsoft Edge.

I’ve been a fan of Chrome since it was first released in 2008, sporting blazing speed and a simple layout, far different from most major browsers offered then which featured gazillion toolbars, helpers that do not cease to prompt and blink whenever they want your attention.

However, Chrome still uses the dated GDI rendering engine on Windows to render text and fonts, making them look terribly aliased.

Google Fonts’ Faster One (Chrome 28, Win 8)
How ironic that Google Fonts don’t do well on Google Chrome by default
Google Fonts’ Lato (Chrome 28, Win 8)

Most people barely notice the difference, unless you’re designing websites and realize that the beautifully rendered slender Lato in your Photoshop mockups looks absolutely horrendous on the websites you design; or the motion-blurred blazing trails of Faster One shows up as crooked entrails drawn by a child.

Chrome users on Linux and OS X need not bother since you guys have nicely anti-aliased fonts.


Workarounds

Fret not, there is a way around it, though I hope this workaround is only temporary (DirectWrite rendering, used by IE and Firefox, is supposedly in the works by the Chrome team).

From many blogs, forums, and even Google’s own bug thread on the issue, there were some “fixes” proposed such as adding faux text-shadows, or switching on anti-aliasing options in CSS text-rendering. All work somewhat inconsistently, especially with colored texts on colored backgrounds.

Therefore, let me introduce the more elegant workaround — MacType.

Faster One looks truly faster after MacType (Chrome 28, Win 8)

MacType uses a separate rendering engine FreeType to render text, and can be used to actually replace nearly all rendering done in Windows. However, today we won’t go so far, and we’ll just focus on fixing Chrome’s rendering.


Summary of Steps

1. Step one, download MacType from here.

2. Install it to wherever you want.

3. Start up MacType Wizard or MacWiz.exe.

1) MacType Setup tunes the rendering
2) MacType Tray launches a tray application that causes everything in Windows to be rendered in FreeType
3) MacType Wizard is the setup application
4) Uninstall and Update are self-explanatory

4. Select Manual Mode and press Next.

5. Select LCD or, in later cases, whichever rendering setting you wish to use.

In my case, it’s the “test” setting.

6. Go to your MacType installation folder (by default it should be in Program Files) and create a desktop shortcut of MacLoader.exe via right click menu.

7. Go to the Desktop, select the Shortcut to MacLoader.exe, right click it and select Properties.

8. Go to the application you want to be rendered in MacType, right click it and create a Desktop Shortcut of it. In our case, the application is Google Chrome.

9. Go to the Desktop, select the Shortcut to Chrome.exe, right click it and select Properties.

10. Copy the path to Chrome.exe from the Target field

e.g. “C:\Program Files\Google\Chrome\chrome.exe”

11. Paste the path in the Target field of the Shortcut to MacLoader.exe after MacLoader.exe’s own path.

12. If you’d like you can rename or change the icon of the shortcut to the target application’s own icon and name (e.g. Chrome Anti-Aliased as I did).


Extra Customization!

By default, if you have chosen the LCD setting in Step 5, the rendering should already be anti-aliased, but it could have certain issues with hinting or the thin/thickness of certain fonts.

Therefore, to customize the rendering of fonts to your own tastes, open up MacType Setup from the Start Menu, or MacTuner.exe from the installed folder.

If you want to just overwrite the previous setting, just open up the LCD.ini profile and later save over it. To see the changes in effect, you have to close the application that is being rendered in MacType (e.g. Chrome), and reopen it using the same shortcut (ie. the changes are not real time).

I would suggest using the Advanced Mode because it’s easier and you don’t have to go back and forth the Wizard to change options.

Anyway there are a plethora of options and I will try to explain to the best of my ability. Anyone who is better versed in font and typing please correct me :

  • Rendering Core: FreeType is the renderer that allows you to use extra options like gamma, bold, font replacements etc. Win32 is (I think) the default renderer used in Windows.
  • Font linking: Not really sure? I just put FreeType since we’re using it’s renderer.
  • Bold mode: Different bold modes for fonts that are faux-bolded. I use the FreeType bold.
  • Gamma mode: Use custom value allows you to customize gamma values in the next section, which is actually useful. Use default value would use the default Windows value of between 1.8 to 2.2 depending on how your Windows is configured.
  • Kerning: Switching it on allows the renderer to place characters next to each other on prior adjustments made by the font-maker. I switch it on.
  • Anti-aliasing mode: No Anti-aliasing gives you the default no anti-aliasing mode which looks terrible. Grey Scale Anti-aliasing smooths fonts out using only grey “colors”. The other options are variations of RGB Anti-aliasing which use subpixels to smooth fonts, which can appear sharper, but might introduce moire (to my eyes).
  • Hinting: Switching hinting on forces fonts to fit into predefined pixels instead of subpixels, thus making them a lot sharper, but they lose a bit of their original shape. I switch it off because I’m a font purist, you might want it on if you find the text too “blurry”.
  • LCD Optimization: Honestly I’m not sure what this does, but it seems to affect the thickness and subpixel arrangement of the text, albeit very subtly.
  • Font replacement: You can switch them on if you want to replace certain fonts, which you can specify later in the other option tabs.
  • Sub-processes: Auto load will make MacType render any subsequent programs/processes/applications that the current MacType-rendered program opens. For e.g. Chrome opens a text document in Notepad, and thus MacType also affects Notepad. Put it to “leave” if you don’t want other processes to be affected.

Font property

  • Normal/Bold/Italic options adds thickness and strength to fonts that are rendered. I personally favor a slightly thicker normal, thus I add about 8 to 10 points there.

Mapping property

  • Render Weight affects all text’s strength, and I usually put it to 1.2 points, as the default 1.0 points makes text too wimpy. Adjust to taste.
  • Gamma affects the contrast of the text against the background. I put it to 1.4. Higher values make it lighter, while lower values make it darker.
  • Contrast affects the sharpness of the text. I have it at 1.2. Higher values might make edges sharper, but seem more unnatural, while lower values might be too “blurry” for font edges.
  • Words Tuning: These values affect the individual subpixel strength in the anti-aliasing. Seems to be similar to setting gamma, but perhaps for individual colors, as higher values lighten the contrast on text.
  • Shadow: Adds shadow to the text, if you like. I avoid this.
  • These options are pretty self explanatory: They either skip MacType rendering for certain fonts, or you can even replace fonts entirely (e.g Arial for Helvetica!)
  • Personally if I find certain fonts too thin to read (e.g. Courier, for some strange reason) I would add them to the exception list and so the next time the page loads text whose font family is Courier would be rendered using the default Chrome GDI renderer.

This serves as a preview section so you can see the effect of your tuning on certain fonts.


That’s all, hopefully it’s helpful for those out there who are frustrated with the default aliased rendering of fonts in Chrome in Windows.