This article is the fourth and final in a special series covering my notes from Ampersand NYC: The Web Typography Conference.
See also: Part 1, Part 2 & Part 3
The final set of speakers at Ampersand NYC was comprised of front-end developer Jen Lukas and type designer Christian Schwartz. Lukas shared what she’s learned about implementing webfonts from a developer’s perspective. Afterwards, Schwartz closed out the conference with thoughts on type design, webfonts, and the future.
Jen Lukas: On Icon Fonts & Working with Designers
Jen Lukas, a front-end developer with Happy Cog, offered discussion points on how designers can best work with developers to implement type on the web. She used the quirky metaphor of a sandwich – an Ampersandwich that is – to structure her talk, with every topic relating to a sandwich ingredient. While I won’t attempt to reconstruct her metaphor, here are some highlights from her talk.
Setting General Styles
Lukas starts projects by creating general styles. This means setting a base style for every element, creating a foundation of styles that can then be further modified for special cases as needed. A benefit of this method is that it ensures no element will ever be displayed without a style (ie when a client starts using the cms). Additionally, Lukas pairs all heading tag styles with corresponding class names. For example, the primary heading style would be mapped to both the h1 element and a class name of “alpha.” That way, heading styles can easily be reused via the class names, independently of the specific heading tags.
Icon Fonts
Lukas also gave a good survey of the many methods and services available for implementing icon fonts. There are so many, it can be hard to know which one to choose. She cited working with one service that changed drastically, with no warning, during the middle of a project. Her recommendations based on the experience? Do your research. Learn the difference between services and remember to choose one with good customer support and a track record of stability. As an aside, I wrote a detailed tutorial on how to use IcoMoon, my current tool of choice for creating custom icon fonts.
Working Across Browsers
Regarding the implementation of webfonts, Lukas offered some helpful tips. For example, she recommends using -webkit-font-smoothing cautiously. While it can improve the rendering of text in some situations, it can harm it in others. Be sure to always test on actual devices. Additionally, should webfonts look exactly the same on every device? The answer is the same as an even broader question:
Separating Font Kits for Context
Another practical tip dealt with serving font assets. When designing experiences for different device classes, it can be advantageous to create multiple font kits. One font kit, small and basic, can be served to mobile devices where bandwidth limitations are a potential concern. Another kit, larger and fully-featured, can then be treated as progressive enhancement and served to desktop devices.
Christian Schwartz: Webfonts Are Just Fonts
The last presentation of the day was given by type designer Christian Schwartz, partner at Commercial Type. Included among his notable projects is work on Guardian Egyptian for The Guardian. In his talk, Schwartz surveyed a number of points regarding type design, webfonts, and the future of typography.
Good but Not the Same
Echoing a point made by Lukas, Schwartz noted that differences in operating systems render subtle difference in type on screen. Therefore:
Our goal should be to make everything look good but not the same. After all, a typeface looks different on coated and uncoated paper.
Variation in the way type renders is not a new issue, which is a good, grounding thought when working with webfonts.
Typefaces Aren’t Magic Bullets
While using the same typeface on screen as in print for a brand can be great, it’s not a magic bullet. In Schwartz’s words:
Identity also comes through the structure of the content.
He pointed to The Guardian’s website as an example. Even though it uses Georgia as the main text face, it still looks like The Guardian due to other design elements such as grid and color. It was an interesting perspective to hear coming from a type designer.
Two Types of Typefaces
Towards the end of his talk, Schwartz offered a great framework for thinking about typefaces. He stated that there are two kinds. The first kind are typefaces that will do whatever you want them to do. Helvetica is a good example. It can be shaped to do a lot of different things and can be found in a broad range of identities and contexts. The second kind of typeface is one that does most of the work for you. These are typefaces with much more inherent character and flavor. They do more out of the box, but are also less malleable. It’s harder to adapt them to different identities or contexts. Both kinds have their place, but it’s good to be aware of what you’re using.
In making this point, Schwartz noted that he would like to see more of the second kind of typeface on the web. He noted that Commercial Type’s two best-selling webfonts are Atlas and Graphik. Both typefaces are of the do-whatever-you-want-it-to-do variety that possess similarities with Helvetica and Arial. It will be interesting to see how the general character of type on the web evolves in the future.
Ampersand Elsewhere
Since the conference, I’ve run across a number of links from other people who attended the conference:
- Links from each presentation compiled by Helen Holmes.
- Notes and photos of each talk by Sophie Masure
- Photos of the conference taken by Jeffrey Zeldman.
- Reflections on the conference from organizer Richard Rutter.
Closing Thoughts
Attending Ampersand was a great experience. The mix of speakers struck a good balance between focus and diversity. Each talk was relevant to the topic of web typography, while covering it from a broad range of expert perspectives that kept things interesting. Knowing that there will be no Ampersand 2014, I feel especially fortunate to have attended this year’s event. As Nick Sherman stated in his talk, it is truly an amazing time to be working with type on the web. We’ve come a long way, and I’m optimistic for what the future holds.