Steve Matteson on Choosing Type
By Shelly Wilson on Friday 4th of November 2011
We all want to create better sites with better web type, but choosing type isn’t easy for everyone. So we asked Steve Matteson, Creative Type Director at Fonts.com, for some advice.
If you don’t know Steve Matteson by name, we bet you know his work. If you’ve ever used Windows Vista, an Android phone or the original Xbox and Xbox 360, you will have seen his typographic creations at work. Segoe, Droid Sans and Droid Serif are among his more recent designs, but he also contributed to the well known Arial®, Times New Roman® and Courier New™ font families.
Choosing a Web Font
Typography is tricky. There are tens of thousands of families to choose from, with tens of thousands more weights and styles available. You can’t possibly review and evaluate each one’s suitability. Likewise, as with other design elements, the feel each evokes is subjective and can also be influenced by colour, size and the other elements it sits alongside. But despite the subjectivity, according to Matteson, there are some non-subjective clues to look for to help you decide if a font will work on the web.
Firstly, size matters. “Choosing a typeface that works well at the intended size is the most difficult part,” says Matteson. “Some display or headline fonts work fine in print at 18pt but become problematic on screen. For example, on the web, a fashionable ultra light sans serif may not look very good until 48px or bigger.”
Readability & Spacing
Secondly, while screen typefaces are less challenging than they were even five years ago, and technological developments have improved clarity at smaller screen sizes, readability can still be problematic with some typefaces, and readability should be your paramount concern.
So what are the clues that a font will work well at a smaller size on screen?
“The openness and proportions of the apertures of lowercase letters (for example the opening of an e, a and c) are crucial for good reading,” says Matteson. “Some sans serif typefaces, such as Helvetica and Eurostile, are particularly bad for reading in text because of their tight inter-character spacing and closed forms.”
If you get it right, you can create a measurable difference. “I recently did some work with the aviation industry to improve navigational charts,” says Matteson, “ and a switch from geometric sans serifs to grotesque sans serifs created a 13% increase in reading performance.”
Matteson also points out that there’s an added challenge when you’re replacing an existing, readable, web-safe font in use, like Georgia. The replacement needs to be well-crafted enough to not degrade the reading experience. “A typeface like Georgia was built very well for screen, and there are only a few existing designs that exist that will stand up to the reader’s expectations if you change it,” he explains. In these situations, he finds it helpful to use a web font service that lets you to experiment and compare. This helps avoid big investments in fonts up front that either don’t work across all browsers later on or don’t introduce an improved or equal reading experience when compared to its predecessor.
Although designing with web fonts is a relatively new phenomenon, it turns out the creation process for typography remains steadfast. “The process itself hasn’t changed,” says Matteson. “I always design types with a purpose in mind because they are, principally, tools to get a job done. If the job is to make a good web text face, then you test it on the web at the sizes you intend to have it used. And since web browsers render typefaces in slightly different ways, we need to test our designs under each of those conditions. But we would have always done the same when designing print typography, testing it instead in those conditions: on posters, or books, or glossy magazines.”
So while it’s common to think of print type and web type as completely different beasts, and while web type does introduce some unique considerations for a designer, it’s more new, less different, and Matteson offers this little reassurance to anyone feeling insecure or intimidated about designing with web fonts.
“There is a parallel to the ‘old world’ of print” he explains. “Good screen legibility is really just a print typographer’s intuition played out in electronic form. Once, printing press speeds, inks, applied pressures and paper types (like newsprint vs card stock) had an effect on how good a typeface would look. Now, it’s browser variations and screen resolutions that affect rendering. But good type is still good type. It’s just a different generation of designers who need to hone their skills and intuition how well their typography will read.”
Typecast lets you style over 23,000 web fonts by eye and check for legibility and readability right in the browser. Watch our creative director explain more, or
Try Typecast now to give it a go.