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.
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 model...in 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.
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 outlines...is more important today
than it has been in years.” CA