We’ll be speaking alongside the folks from Fonts.com at FOWD next week on how to create better sites with better type.
But what are the challenges of designing with screen fonts? To get some advice from a typographic perspective, we spoke with Steve Matteson, Creative Type Director at Fonts.com and the man behind the Segoe™ and Droid® typeface families.
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.”