Improve Windows Type Rendering With ttfautohint

In a stroke of genius, Werner Lemberg has started the ttfautohint project, which repurposes FreeType‘s autohinting system to automatically hint TrueType fonts for improved Windows rendering. While no autohinter will be able to match the eye and skills of a manual hinter, ttfautohint provides real world improvements, sometimes dramatically.

For example, I’m working as a contractor on a project using the classic VAG Rounded font. 13px bold looks great in Photoshop comps and Mac browsers, but fails horribly under Windows. I decided to run VAG Rounded Bold through ttfautohint 0.2 to see if it would offer improvements. In short: wow. In the screenshots below, ttfautohint goes head-to-head with the Fontsquirrel generator‘s autohinting (which I believe is powered by FontForge).

Rendering modes are shown in the captions. Click for full size. (I’m restricted to screenshots because the font is only licensed for the client site.)

Standard (grayscale)

GDI ClearType

DirectWrite ClearType

As you can see, there’s a dramatic improvement in all 3 Windows rendering environments. 11px-13px sizes move from awful, with completely closed counters, to suprisingly readable. At 14px, the counters open up with standard hinting, but closer inspection reveals other defects such as no separation between the body and dot of the i and j characters. The improvements are even more dramatic under Standard (grayscale) antialiasing, which looks terrible below 18px. Even under DirectWrite ClearType, ttfautohint produces superior results (although a true test would also provide a completely unhinted version to see what the DirectWrite rasterizer is capable of on its own).

The only real downside is a modest file size increase. I haven’t tested across multiple fonts, but in this case our font jumped from 49kb to 63kb. I consider it an excellent trade-off for such improved rendering.

So, you want to use it? Well, first you should support the project. Currently you need to compile ttfautohint, but with our support, Werner will build a GUI version for the command line-phobic. If you’re on a Mac and want to compile, I put together an installation script.

Edit: In an email exchange, Werner pointed out that Dave Crossland—who has done much of the ttfautohint promotion—had the actual idea to use FreeType for hinting, although Werner still deserves massive praise for the execution. Werner also pointed out that VAG Rounded is a good showcase font, and that ttfautohint will not perform such striking results in all circumstances.

Better Google Fonts

Google Web Fonts is an awesome source of free, open source fonts hooked up to a world-class CDN. It’s also, sadly, filled with one-off novelty fonts vying for the title of “the new Comic Sans.”

I quickly discovered that a good metric for higher-quality fonts was the presence of at least one alternate. The Google Web Fonts directory does not allow that type of filtering, so I built this simple one-off page that allows you to browse multi-variant typefaces. The layout is responsive, and clicking the font name takes you to Google’s specimen for that font.

All listed fonts are all downloaded. It should go without saying that the page will load slowly.

Missed the link above? Go view Better Google Fonts. And, if you like code, it’s on GitHub for your forking pleasure.

Environment Canada Mobile

The state of mobile weather apps isn’t awesome. I find that it’s even worse in Canada, where weather data is sourced through non-Canadian providers such as Yahoo (iOS’s built-in weather app) or AccuWeather, neither of which I find tend to provide very good Canadian forecast data.

Environment Canada is my go-to forecast provider, but their site has been beaten with the Canadian government’s standard website ugly stick. And, while a mobile site exists, it’s not much better. In fact, it’s worse in some ways.

All of this has led me to make a mobile web app version. Or, at least, a mobile web app version for Winnipeg, where I live. I scrape the HTML via a proxy and restyle it in a iOS-esque style. (I might get around to integrating a city-switcher, but that’s a lot of work and I built this for me and for fun.)

I optimized the design for two uses: 1) what are the current conditions? and 2) what’s the immediate forecast? Most other forecast data is hidden by default, but can be shown. There are a few media queries for portrait/landscape view, and I snagged icons from the open-source Oxygen project to replace the drab ones from Environment Canada. It also makes use of HTML5 Application Cache to speed up launch time. And, although it should work anywhere, it’s been heavily optimized for iOS Safari.

View my Winnipeg mobile weather app. The source is on GitHub, of course.

FontFriend 3.2 Released: Now With More Google

When I released FontFriend 3.1, I mentioned that Google Web Fonts didn’t have a proper API, making things difficult. They still don’t have a public API, but on Thursday I was given “trusted tester” access to the new API. It won’t look that much different, but there’ll be a few fonts working now that weren’t before (multi-variants like PT Sans and IM Fell).

I’ve started using FontFriend extensively on my Soma Web Font Specimen (or, if you like, on the original) as a great way to evaluate Google Web Fonts, as the directory looks like an app, not a web page (although v2 of the directory looks awesome). If you have FontFriend installed already, you’re already up to date. If you don’t, go install it now!

Some Cranky WordPress Plugins

It looks like I may carve out a niche for cranky WordPress plugins. This could either be seen as a personality flaw or as a perfect fit within open-source culture. In either case, WordPress makes it easy for irritable people to release plugins to change what they don’t like about it. I’ve done so twice recently.

Kill Adminbar Search

WP 3.1 introduced the admin bar, which is generally quite useful. However, because WordPress’s search is generally not useful, having the search field take up so much real estate is somewhat frustrating. So, I made a plugin to remove it. You can download Kill Adminbar Search from the plugins repo.

Use Helvetica Dangit

WP 3.2 (currently in beta 2) has revamped the admin styles. It looks good, but we’ve made the grievous error of placing Arial before Helvetica in the font stack, which I protested. What we should do instead is simply declare font-family: sans-serif; and be done with it: this would render Helvetica Neue on Macs, Arial on Windows, and whatever Helvetica-like default system sans-serif is set on any given Linux distro. But, since my plugin is optional, I’ve declared every Helvetica variant under the sun, because nobody should have to look at Arial if they don’t have to. Download Use Helvetica Dangit from the plugins repo.