Tips on choosing type for the Web
It’s been said many times before — the typography is fundamental for any kind of visual and interactive communication. I’ll quote Erica Hall here — Copy is Interface.
With the new age of web typography, many designers jumped into the bandwagon, using all this newly available typefaces. But the abundance of options available is actually a pitfall.
Strong sense of typography is still mandatory. Additionally, we still have a number of technical limitations in the digital space (but that’s a topic for another occasion). Let’s discuss the common mistakes and how to avoid them.
Observe a typeface in the context
When a famous designer suggests their favorite typeface in a blog post or an interview, there is almost instantly a flood of the suggested typeface all over the Internet.
However, we must first understand the personal style of each designer, so we can observe their choice in a given context. You’ll get the most of a designer’s favorite typeface if you observe what they have produced with this particular typeface. What was the context, and what were the goals.
Display fonts won’t work well at small sizes
Most display fonts look great at large sizes, 36px and up, because that is what they are designed for. But many Great Looking™ typefaces can’t be used for body copy or even subheadings. You’d have to pair such typeface with some other that is legible at small sizes, e.g. 16px.
Beautiful typeface?
Beautiful Typefaces™ usually have too much of a personality, triggering emotional reactions by nature. Sometimes the form and style are more important than the content, but in reality that is rarely the case.
For example, communication with a personal touch on a high-profile news portal is not the best of ideas. Journalism should be neutral and objective, but not necessary in Helvetican sense. A smart alternative to a typeface with too much character is a typeface common enough to a broad audience, yet with subtle details in design, so it doesn’t distract the communication.
On choosing ‘something different’
Phantastic Display Font™ that is too similar to a body copy or subheadings font — looks odd. The exception are fonts from the same type family (see further in the article). If you want Something Different™, use a contrast that’s obvious, not just a small shade.
There is a thin line between perfectly balanced and saturated
Meatball Sundae: “A meatball sundae is the unfortunate result of mixing two good ideas.”
It’s still seen so often: mixing and “matching” typefaces that are fighting for a reader’s attention. The reason why type family members work well together is because the designer’s intention was to create a compatible set(s).
Not all typefaces from the same designer will work well together. Make sure you have read the manual, i.e. what a designer had to say about each design. Type designers in fact quite often explain how to combine their type with other kids and what works best.
The checklist
Because this is what you’re here for, right?
Preparation
- List all content and user interface elements, for instance: title, subheading(s), lead, egida, summary, paragraph, list, table, comment, quote, pullquote, caption, infography, link(s), buttons, input(s), textarea, …
- Design the grid: horizontal and vertical rhythm based on content elements
- Establish the baseline (common denominator) and the size hierarchy (element proportions)
by this time you should have a pretty good idea about what you need in terms of style…
Selecting
- Find a single type family, the one that can handle the hierarchy and support both stylistic chunks and general readability. Some great examples of such families are Typonine Sans, Proxima Nova or Meta Serif. Test with the real content.
- If that fails, choose two type families (one for display, another for body text), that the type designer have explained will work well together. Test with the real content.
- If that fails, choose two type families that a savy graphic or web designer explained will work well together. Test with the real content.
- If that fails, do some experiments yourself. Test with the real content.