Posts

7 Fonts Are All We Need

Did you know that there are about 297 display font families in Google Fonts and 345 in Font Squirrel?

However, we usually use only 2 or 3 per project, and we tend to repeat a lot of the choices we’ve made in the past.

If we already know there is a certain number of fonts that meet the requirements we usually have, why not simplify by limiting the typical research time required by having a pre-selection?

Trash the rest

All too often, I find myself feeling obligated to consider every font to be confident of my final choice.

This can quickly turn the process of typeface selection for each new project into something tedious and time-consuming.

Vignelli Associates studio used a depurative approach in the 70’s when selecting their typefaces.In the words of Massimo himself for the promotion of his show “A few basic typefaces” in 1991:

“In the new computer age, the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest. (…) “

This does not mean that some typefaces are good and the rest are bad. But are they all necessary for our professional development? Does jumping from one font to another in each new project gives us more control over it?

Vignelli fonts

6 fonts are all they needed

Our fonts

As a small internal experiment, we decided to replicate Vignelli Associates’ idea.

Our goal is to expedite and improve our work but also the development team, reducing the options to a handful of fonts that meet different requirements:

  • Designed for screens (since our focus is UI)
  • Wide range of variables
  • Easy to implement (free or specific to an operating system)
  • Features that consider different design possibilities such as being fit for headlines, for long paragraphs, modern, classic, delicate, geometric, and all that other nonsense that we designers pay attention to.

It was also necessary to test how the preselected fonts behaved when implemented on a website. Using its default configuration, observing how good its line spacing, tracking and kerning were, if it required many adjustments or a few to advance further in the filtering process.

default letter spacing

Spectral font (above) didn’t pass the default letter-spacing filter.

The cheat sheet

To ensure easy access to our fonts, we created an online page with different combinations of sizes, weights, kerning and line spacing of the typefaces we selected. Abstracting from other aggregates such as color or content, in order to observe the fonts relate to each other in a more elementary way.

Font pairings

Here’s a starting place

As long as we continue using these typefaces and reap their respective benefits, we will be able to refine our management and selection and this page will also be the place to reflect our learning.

Knowing how to properly work with typefaces requires having a wide knowledge of the font family chosen–this is very important in order to get the most out of it.

Hopefully, by limiting our typeface choices, we will not only improve efficiency in our work, but also become experts in their use.