Section Logo
Facebook   Twitter   LinkedIn   Email  

Page2of 2
< 1 2 >
Web Fonts
What You Don't See

by Ben Kiel

Typeface designers are faced with the challenge of adapting typeface designs made for print to the screen, and paying time and attention to how a design appears across rendering environments is necessary. Peter Bil’ak, whose Typotheque foundry was the first type foundry to offer a hosted webfont system, explains, “We do pay more attention to screen rendering, experimenting with values set in fonts that can affect rendering. While it is not physically possible to hint all fonts produced, we select those that have most potential to be used in small sizes and offer a special screen font series.” Editing is crucial for deciding which designs will benefit from hinting to transition well to the screen. Of course, as screen resolution and rendering engines improve, the need for hinting diminishes. Christopher Slye, technical product manager for type at Adobe, says, “We are hoping, in fact, that ‘adapting for screen’ will soon be a thing of the past. In many of today’s hardware and renderers, we expect a well-made CFF (Compact Font Format) font to perform well with almost no special adaptation.

An example of greyscale rendering. The outline is no longer black and white,
instead differing shades of grey give the eye an impression of smoothness.

So these days, we are, for example, taking a thoughtful but conservative approach to creating fonts in TrueType format for those environments that need it, relying instead on the inherent quality of our type library. Despite the occasional shortcomings of that approach today, we think the longer term will prove that we're using our time and resources appropriately.”

Four different sizes of Gustavo Ferreira’s typeface design Modular shown at the same size. The design is based on the smallest pixel size, as size increases details of the design fill in as more pixels become available.

Beyond hinting, the design of the typeface has a large role in how it works on screen. Jonathan Hoefler explained in his lecture to the 2011 AIGA Pivot conference that Hoefler & Frere-Jones is, in addition to hinting their typefaces, editing outlines to better fit the grid of the screen. Doing so allows the typeface to feel more like the print version on screen, even though the two outlines are different. Once a designer has a clean slate to design just for the screen, more possibilities emerge. Berlow and The Font Bureau have designed a series of typefaces just for the screen. “The Reading Edge fonts are type designs for the screen that follow the Verdana/Georgia formula of mastering small design sizes. Large x-height and very generous widths, slightly heavier than for print with open counters and apertures, it’s all returned to type design for 7- to 8-point metal.”

Typeface designer Gustavo Ferreira takes another approach when designing for the screen. Instead of working within the constraints of rendering engines and hinting, he uses vectors to design size specific grid-based typefaces. He explains, “Grid-based typeface design is an alternative approach to producing well-formed gridfitted letter shapes, and stands in opposition to the TrueType/WYSIWYG the grid-based model, the type-designer draws each size individually directly on the grid, bypassing the rasterizer. TrueType/WYSIWYG have obscured the pixel; I’m taking it back.” This is the system he has used in his typeface family Elementar. He adds, “One clear advantage of Elementar (and grid-based fonts in general) over TT-hinted outline fonts is the uniform appearance of the typeface in all environments.” By skipping the need for a rendering engine to gridfit his designs, Ferreira gains this advantage.

Comparison of the multiple rendering engines. From top to bottom, Windows Greyscale, Windows ClearType using GDI, Windows ClearType using DirectWrite and Mac OS X. Depending on the rendering engine, type weight, spacing and degree of smoothness will vary.

For web designers, the key to making informed typeface choices is testing. “Luckily, all the webfont systems that are available allow testing of fonts in real situations, so it is a matter of including the testing phase into the designer's workflow,” says Bil’ak. Berlow adds, “The [type] selection process is greatly aided by returning to, or refreshing the idea that special types are needed for each range of sizes used.” Being flexible when choosing a typeface and a style for each size range in a design is important. Some weights and typeface designs that work well in larger sizes won’t work in small sizes. And, choosing well-made typefaces and using them for their intended purpose, while important for print, is doubly so for the screen. Slye notes, “It’s simply important for type consumers to understand how a well-made typeface improves the reading experience. Good design and spacing has always been important, but the technical quality of a font’s more important today than it has been in years.” CA Kiel
Ben Kiel is a typeface designer and developer at House Industries. He also teaches at MICA and the University of Delaware. Before working at House Industries, he worked both as a graphic designer and as an apprentice letterpress printer in St. Louis, Missouri. Kiel received an MA in typeface design from the University of Reading, UK in 2005.