In August A Book Apart released On Web Typography by Jason Santa Maria. This is an excellent introduction to typography and well-timed, since most of the predictions for hot design trends in 2014
include something about fonts. Forbes: large fonts. The Next Web: Non-boring typography. Moveable Online: More experimental type. Web Marketing Today: custom fonts. But in the rush to experiment with large, non-boring, custom typography, we shouldn’t forget, as On Web Typography reminds us, that typography’s job is–fundamentally–to allow readers to read.
And an important part of reading on the web is communicating where you are and where you are going. Typography can do a great job of establishing a hierarchy. As Santa Maria writes:
A typographical system establishes hierarchy, meaning it helps us prioritize content based on individual elements and relationships between them. It also helps our readers easily scan chunks of information and understand what they’re looking at. When done right, a typographic system feels intuitive, like an unspoken set of instructions.
Problem is, it is often done very poorly. On Web Typography, however, offers many good suggestions for over-enthusiastic designers who are in danger of creating a confusing mess by using too many fonts just because they are cool looking.
A few rules of thumb:
- You probably only need two typefaces. All the differentiation you need can probably be accomplished with two.
- Try pairing a serif and a non-serif font.
- Use higher-contrast fonts for headlines or small bursts of text.
- Use medium- to low-contrast fonts for longform text. (In this context “longform” means almost anything longer than a headline.)
- Beware of fonts with too little contrast in longform text, as it is harder to read. (Bad Helvetica!)
- For God’s sake, don’t use dumb quotes! They are dated and, uh, dumb, and Santa Maria really, really hates them. (And yes, I just used them. But I don’t have the time to figure out how to overwrite the default in the template.)
I’ll add: beware of the headings settings that come with many word processing and design packages. The hierarchy they enforce doesn’t make sense to users.
So read On Web Typography, and then go forth and have fun designing with typefaces. (Not designing typefaces–that’s really hard. Design with typefaces that some professional has already made beautiful.)
Fun Ways to Play With Type
Shape Type: Try your hand at creating well-known fonts.
Type Connection: A dating game for pairing fonts.
TypeWar: Test your knowledge of fonts.
Kern Me: Discover the impossibility of kerning.
