This article is the second in a special series covering my notes from Ampersand NYC: The Web Typography Conference.
See also: Part 1, Part 3 & Part 4
The second pair of speakers at Ampersand NYC was comprised of two people who create typefaces and webfonts – Jonathan Hoefler and Luc(as) de Groot. Not being a type designer myself, it was interesting to hear their perspectives.
Jonathan Hoefler: Putting the Fonts into Webfonts
Jonathan Hoefler, founder of Hoefler & Frere-Jones, was the third speaker of the day. Using the metaphor of an early, rudimentary bicycle, he explained the difference between putting fonts on the web versus designing fonts for the web. It was a rich and well-articulated presentation that I wish I could watch again. Jeffrey Zeldman called it “the greatest presentation I’ve ever heard on fonts for the web.”
Hoefler Text
It was interesting to learn the origins of Hoefler Text early on in the talk. In comparison to hundreds of years of rich typographic expressiveness in print, fonts on the Mac in 1987 were very limited. The goal of Hoeffler Text was to bring that expressiveness to a digital font by including a wide range of features such as ligatures and small caps. Over twenty years later, Hoefler’s goal was to similarly bring rich typographic expressiveness to the web, where it is largely absent.
“You Make Things in One Way to Experience Them in Another”
Hoefler explained that in type design, it can be required to “deform the typeface to get the result you want.” For example, when designing an f for newsprint, the shape of the strokes is deformed where they intersect to create ink wells. When printed on highly absorbent newsprint, ink absorbs into the paper to fill these gaps. The end result is an f that looks normal.
H&FJ took the same approach to the creation of their webfonts. In order for their fonts to render well on screen – the way they would ultimately be experienced – they needed to “deform” their letters for better results. Their ScreenSmart fonts have been completely redrawn to display well on screen. It was quite striking to see an overlay of the standard and ScreenSmart versions of the same font. The divergence of letter shapes and spacing was quite profound. When viewed separately, however, they still looked like the same typeface.
Clarity at Small Sizes
Hoefler also explained that “typefaces are designed to solve problems.” On the web, lack of clarity is perhaps the biggest typographic problem to solve. Fonts are at their weakest when set at small sizes due to the limited resolution of computer screens. Unfortunately, small text sizes are also precisely where fonts are meant to be read the most.
In order to achieve clarity at small sizes, H&FJ redrew their fonts as described above. This led them to create their own set of in-browser tools, which allowed them to see live previews of their fonts in the browser while they worked. These tools helped enable them to achieve their goal of creating fonts that performed as good or better than standard system fonts. In Hoefler’s words:
If the font you might use isn’t as good as Helvetica, why use it?
Family Weight Problems
Translating multiple weights of a font family to the web can also pose problems. The range of weights in a font can become muddy when viewed on screen. Different weights look lighter or heavier than they should due to limited resolution and anti-aliasing. The result is indistinct visual steps between each weight. To solve this, H&FJ reevaluated each of their ScreenSmart font family in terms of weights. Instead of attempting to maintain the range of weights from the original family, they designed new ranges based on how it would render in a browser. This ensured distinct and clear steps between each weight. As a result, some ScreenSmart font families have more or less weights than the original.
Expressive Features
Hoefler’s love for rich typography expressiveness – especially small caps – was woven throughout his entire talk. To him, features such as small caps shouldn’t be optional in a webfont:
Small caps are essential and not progressive enhancement. If you want small caps, it should work on your mom’s browser.
To ensure they could deliver this kind of typographic expressiveness, H&FJ decided to build their own tools and interface to serve their webfonts. “We had to design the interface to give control over the features of the font.” From the looks of it, their user interface for setting font characters and features is unparalleled.
Luc(as) De Groot: Readability Per Square Centimeter
The next speaker was Dutch type designer Luc(as) De Groot, founder of LucasFonts. Among many notable projects, he designed Calibri, which is the new default typeface of Microsoft Word. One of the first type catalogs I ever acquired was from LucasFonts, so I was excited to hear him speak. In his talk, he surveyed the parameters of a font that can be manipulated to optimize the balance between efficiency and readability.
Adjusting for Readability
The main focus of De Groot’s talk was the idea of “readability per square centimeter.” Starting with a set amount of text and a fixed column size, how can a font be custom-tuned to work its hardest? The goal is to fit the most words in the same amount of space while maintaining maximum readability. Given De Groot’s history of work with various newspapers, you can tell this is a topic he’s thought about a lot.
He showed a plethora of his own explorations with the concept. These explorations ranged from adjusting parameters that a designer has control over (eg type size, line length, line spacing, tracking, word spacing, etc) and parameters a type designer can change (eg shortening ascenders and descenders, varying letter width, and adjusting the grade of the font). His conclusion was interesting:
When you optimize all these parameters, it doesn’t really matter what font you use. It takes a little effort. It’s not necessarily elegant or beautiful, but it is necessary to make these adjustments to fit a lot of information in a small space.
In other words, if you can take control of all these parameters, you can bend most any font to your will in order to achieve a high readability per square centimeter.
Condensed Doesn’t Mean Better Readability
To achieve a high readability per square centimeter, one’s first thought might be to use a condensed typeface. Through his examples, De Groot showed that while a condensed font might fit more words in a space, they are often less readable due to their condensed letterforms. The takeaway is to explore adjusting the parameters of a normal-width font first to see if it can be adjusted to make a good solution.
Fingerprint of a Language
One fascinating section of De Groot’s talk compared the relative efficiency of different languages. English, for example, is very efficient while German is less so. Arabic is perhaps the most efficient. Additionally, the prevalence of certain letter combinations is unique to each language. Viewing the space in-between letters reveals the unique “fingerprint of a language.”
Foam Letters
De Groot interjected some varied, often humorous, asides throughout his talk as well. One of the most interesting was a brief section on foam-cut letters. Using blocks of foam and a foam-cutting machine, he creates large, three-dimensional letters. Using the foam as a form, he also created a large, concrete ampersand (I want one!) that lives in his garden. In talking with him after the conference, he explained that he is continuing to explore new materials, as the foam letters are quite delicate and the concrete letters are (obviously) quite heavy.
Up Next
Web designer Trent Walton and typographer Nick Sherman were the speakers for the next two talks. Continue reading.