Chrome’s Signed Distance Field Font Rendering Still Needs Work

Despite years of research to get it right, rendering crisp, pixel-perfect fonts is a difficult business — Microsoft even has a dedicated API in the form of DirectWrite and as Chrome’s recent update to support it shows, even it’s not considered ideal by everyone. Like many graphics-related tasks however, the prevalence of powerful 3D accelerators in most devices has allowed text-rendering to take the next step in quality, using a technique called “signed distance field”. In fact, you can check it out right now in Chrome.

SDF is an elegant, high-performance method of render fonts without having to worry about resolution by leveraging the strengths of pixel shaders and modern GPUs. The original paper on SDF was published by Chris Green, a programmer at games developer and Steam operator Valve.

Games, which usually must cater to a variety of hardware configurations, performance levels and resolutions, is one of the key benefactors of a technology that renders fonts at superb quality without demanding much in the way of power. Note that SDF can be used for any image or symbol that can be rendered in vector form.

Image: Chris Green, Valve

In basic terms, SDF works by generating a special texture, or image, of the font that stores the distance from the edge of each character to its centre, using the colour channels of the image to record the data. It’s then possible to render the “bulk” of the font at any resolution and use the data to make the edges crisp. The video above does a good job of visualising the technique.

It’s taken time for SDF to make its way outside the realm of games, but it’s being used today in a variety of programs, one of which is Chrome. SDF font rendering is disabled by default in Chrome, but you can activate it by visiting chrome://flags and looking for the tweak “Enable distance field text”.

In terms of a quality difference, well, there really isn’t any. Here’s a comparison shot showing SDF enabled, and regular Chrome with DirectWrite (click the image to get the full-sized PNG):

So, what’s the benefit then? Well, for Chrome users, it’s an interesting one. From what I can gather having used the SDF option for a month is that memory usage for each browser process is reduced. Instead, the GPU process takes the lion’s share — I’m guessing that the browser generates SDF textures for fonts it encounters and stores them in video memory.

The result is that the GPU process’ memory usage will steadily climb (I’ve seen it get close to 2GB), but your other processes will stay the same size, or be smaller, as they’re not storing the font data.

It’s been oddly beneficial for me, as rather than having to close long-lived tabs after a few days, I can just nuke the GPU process. Still, I have had the browser crash on me, thanks to Windows shutting it down as memory became scarce (and this is on a machine with 16GB installed), I am considering switching it off until Google irons out the kinks.

Still, it’s good to see these experimental features popping up in Chrome. Hopefully it’ll get the implementation right and we can enjoy another option to render fonts… even if there’s no visual difference (well, not yet at least).