This article is the third in a special series covering my notes from Ampersand NYC: The Web Typography Conference.
See also: Part 1, Part 2 & Part 4
Trent Walton, a web designer, and Nick Sherman, a typographer, were the next speakers at Ampersand NYC. Walton discussed what is possible now with web type while Sherman discussed what he hopes will be possible in the future.
Trent Walton: Get Your Hands Dirty
Trent Walton, founder of Paravel, explored techniques for manipulating webfonts in the browser to create a range of effects for display type. If you’ve read his articles, you know they’re a showcase for his many and varied experiments. He shared what he’s learned and gave a detailed overview of the css properties and JavaScript techniques available. He was kind enough to share both the slides and coded examples from his presentation.
Transform Toolbox
Walton’s talk was very practical and explored specific ways text can be transformed with css. The range of manipulations you can make in the browser is quite impressive. Masked textures can be applied to give type a distressed look. Text shadows can be used to apply sign-painter-like shade effects. Walton’s examples were beautiful and inspiring, making me want to do some experiments of my own. One quick tip I jotted down: the best way to control color and transparency with css is to set color values using rgba (red green blue alpha) and hula (hue saturation lightness alpha). The A in each stands for alpha – as in alpha channel – providing easy control over the opacity (transparency) of a color.
Targeting Type
In order to transform text, you must first be able to target it. There are some helpful selectors in css that provide a good measure of control. For example, you can target the first letter or first line of an element using the pseudo selectors ::first-letter and ::first-line. However, pseudo selectors can still be somewhat limiting. For example, there’s no way to target every even or odd letter within a word. Walton ran into this problem while working on Lost World’s Fairs, a beautiful showcase of typographic explorations sponsored by IE9. The designs are very complex, and a solution for better targeting was needed. As a result, lettering.js was born. In Trent’s words, it’s a “glorified span injector,” offering fine-grain control for targeting type.
More Tools
Walton’s talk covered a wide range of specific selectors, techniques and tools. While checking out his slides or demos is the best way to really dig in, here are three specific tools that stood out:
- FitText – Designed for display typography in responsive layouts, FitText is a jQuery plugin (created by Paravel) that resizes headlines based on the parent element’s width.
- CircleType.js – Built on lettering.js, CircleType is a jQuery plugin for setting type in a circle. I like the arcs – reminiscent of painted signs – that can be achieved with this.
- OpenType sandbox – Created by Ampersand conference organizer Richard Rutter, this tool is a great way to explore css OpenType features within the browser. It’s definitely something I want to explore more fully.
Nick Sherman: The Future of Responsive Typography
Nick Sherman, of Font Bureau and Webtype, was up next. Being a Webtype user and having read his articles for A List Apart, I was excited to hear him speak. It was obvious from his presentation that he wants typography on the web to be better. To begin, he pointed out that “everything is amazing” and that we’re living in “one of the most exciting times in type history.” At the same time, there are some things that we can’t do today that just don’t make much sense. He explored the problems, what we can do to solve them, and ideas for the future.
Basic Typography Support
One problem with current web typography is that it still lacks basic typographic controls. We should be able to reliably use OpenType features such as small caps and ligatures on the web. The reality, however, is that browser support is still spotty. The solution? “If enough people make enough noise to the browser makers, we can make them work the way we want.”1
Guessing About Size
One frustrating problem of setting type on the web is knowing so little about the size at which it will ultimately be displayed. In Sherman’s words, “Decisions about size of type are largely guesses.” Although we can query the size of a the user’s viewport, we know very little about the screen’s pixel density and physical size, much less viewing distance. It’s possible to set units like inches and centimeters in css, but they don’t correspond to those measurements in practice. Along this line, Sherman (along with other presenters) demoed Marko Dugonjić’s experiment to use face detection to adjust the type size.
Size Calculator
Nick also demoed a project he created (in collaboration with Chris Lewis) called Size Calculator. It allows you to make calculations centered around the perceived size of type (or anything for that matter). It’s a fun tool that has practical applications. For example, if you wanted type on a billboard to be a certain perceived size, you could calculate font size, provided you knew the billboard size and viewing distance. To prove its efficacy, Sherman showed off the results of a test to render the letter A on multiple devices at the same perceived size. For more, check out Jefferey Zeldman’s post on Size Calculator written after the conference.
Dynamic Fonts
In thinking about fonts for the web, Nick proposed an interesting idea: dynamic fonts. The premise is that font families are usually designed as flexible systems – often with a large range of weights. However, these flexible systems are delivered statically on the web in the form of individual fonts. For each weight, a separate font has to be called. Instead, what if fonts were delivered in a format that could be dynamically adjusted based on a set of parameters? One font file could be served and then adjusted dynamically based on the context. This isn’t an entirely new idea. Sherman made mention of multiple master fonts, an antiquated font format that allowed you to dynamically interpolate between the “master” font styles. In talking with him after the conference, he told me that, surprisingly, multiple master fonts are still supported in InDesign.
Up Next
The last two speakers of the day were front-end developer Jen Lukas followed by type designer Christian Schwartz. Continue reading.