LGM: Unusual typography

Libre Graphics Meeting (LGM) always has a healthy serving of typography and font talks on the menu. This year in Vienna, there were several sessions on the program that showcased new and unusual approaches to getting text on screen. One was an OpenGL-based renderer that offers noticeably smoother text in video and animation, while another was a toolkit for web developers to seamlessly integrate advanced type design features into modern web pages — including multi-color fonts.

Fonts and the GPU

Google's Behdad Esfahbod is the author and maintainer of HarfBuzz, the OpenType layout engine in use by Gecko and many other free software projects. HarfBuzz takes a sequence of Unicode characters and returns a set of properly-arranged glyphs that corresponds to them in the current language and script. For simple alphabets, the process of selecting the right output is rarely more complex than looking for pre-composed versions of any accented characters, then deciding how to compose any missing ones out of base glyphs and accents. But for complex scripts like Arabic, the shaping, positioning, and cursive joining process is tricky enough to require a complete shaping engine.

Esfahbod gave a talk about HarfBuzz, which is a well-established project, but he also presented his personal side-project GLyphy, which uses OpenGL to render smooth text in video and animation. He wrote GLyphy in an attempt to circumvent a common rendering problem visible with text rendered in animations: the stuttering of outlines whenever a piece of text moves on screen. The root of the problem, he explained, was that most such text was re-rendered for each frame using the traditional rasterization process designed for still images (on screen or in print). When the text moves in every frame, the anti-aliasing algorithm picks a different set of pixels to shade, and the sharp outlines of the glyphs make visible jumps.

Esfahbod's approach was to ditch the algorithm most frequently used to rasterize the glyphs: coverage-based anti-aliasing. In this approach, the program calculates the portion of each pixel covered by the outline, and uses that percentage to shade each pixel. The fact that the algorithm is pixel-oriented is what causes the jitter when translating or rotating text in an animation. GLyphy instead uses a signed-distance-field (SDF) algorithm to shade the glyphs, which is independent of scaling and other transformations. SDF calculates the distance from each pixel to the nearest point on the outline; together those values form an anti-aliased outline of the glyph — but one that looks good at high resolutions.

SDF is math-intensive, so GLyphy leverages OpenGL to speed up the process. It also decomposes the Bezier curves used in most outline fonts into arc segments, because arcs are easier to compute distances against. Unlike other OpenGL renderers, GLyphy sends the glyph outlines to the GPU in vector format rather than copying pre-rendered samples into textures. The result, as Esfahbod demonstrated, is very smooth text animations. Getting decent performance is not quite as simple, he said — GLyphy hits lots of driver bugs, and the specific font and text directly affect how fast and how much memory is required for rendering. Consequently, making good use of GLyphy requires some knowledge of the content and the graphics hardware, so it will probably never be a general-purpose text renderer. For now, it remains experimental — but other projects certainly may find things to learn from it.

Ana Carvalho and Ricardo Lafuente of Manufactura Independente presented a session on web typography with open fonts and open source software. Manufactura Independente handled the recent redesign of the Open Font Library web site, which they demonstrated during their discussion of other online resources. But in addition to fonts themselves, their talk focused on a set of jQuery-based JavaScript libraries that implement new and (for now) unusual text rendering options for the web.

Covered in the talk were FitText.js, which auto-scales text to fit a given box element (regardless of the screen orientation or size) and Lettering.js, a library that automatically splits typographic elements into individual CSS classes so that they can be manipulated precisely. Both are open source products from design firm Paravel. Also discussed were Kerning.js, which offers CSS rules for altering the size, kerning, weight, slant, and color of text elements — by the word, individual character, or by matching letter patterns — and Ligature.js which allows you to replace specific letter sequences with ligatures, beyond the basic fl, fi, ae, and AE ligatures that the developers say can be reliably rendered in vanilla HTML.

It is certainly possible already to use CSS to manually tweak individual page elements, right down to wrapping individual characters in <span> tags, but web designers will appreciate the simplicity of using a library instead.

The team also presented its own library, Colorfont.js, which implements fonts sporting multiple colors in each glyph, using CSS. The process is specific to the typeface used — you start with a base font and create an "overlay" version separately. The overlay font should match up to the glyphs of the original exactly, but only include the portions of each letter to be shown in the second color. Colorfont.js then allows you to mark up text with the colorfont style class, which it will render with the two versions of the font superimposed.

Here again, a designer could use other means to accomplish the same end result (such as generating a PNG image), but using Colorfont allows the two-tone text to remain actual text — visible to search engines, mouse-selectable, and everything else. Depending on the size of the image it replaces, it is likely to save load time as well, plus fall back gracefully on image-less browsers or those without JavaScript.

Carvalho and Lafuente also led a design workshop in which participants created an overlay font to match an existing base font. I was unable to attend, as it was scheduled at the same time as a workshop I was proctoring. However, I was able to talk to several of the attendees after the fact and see their results. The hands-on experience certainly makes the library more useful to the attendees.

Final word

Having worked with font design and development for the past two years, I am keenly aware how easy it is to take it for granted. Users and developers both count on fonts appearing on screen as desired with little intervention, so it can be quite a reality check to dig into the glyph shaping and rendering process and see how many steps are involved. Esfahbod's work with GLyphy may remain an experimental exercise for the foreseeable future, but as more and more processing gets offloaded from the CPU onto graphics hardware, it is also possible that someday OpenGL rendering will be commonplace — in which case we will be glad that open source software is ready.

Ironically, the jQuery font libraries showcased by Carvalho and Lafuente at the same event are really backward-looking, in the sense that they restore a level of control and precision to typography that was commonplace centuries ago, but lost in the transition to digital fonts and web publishing. After all, illuminated manuscripts are some of the oldest multi-color typography projects in history; it is quite entertaining to see JavaScript and CSS used to reproduce them today.

[Thanks to the Libre Graphics Meeting for assistance with travel to Vienna.]