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.

How I became a UX designer and what I learned so far

Background

I design things since I can remember, but the road from graphic design to UX design wasn’t straight.

When I was a kid, my dad copied PC games for me and I designed the covers with magazines cuts and drawings and texts made by myself.

I used to do the same with music CDs, cassettes, logos for friends, flyers for bands, etc. You know, the usual stuff.

When I was 15 years old, I found a FrontPage 2000 guide left out on a shelf in my house. It taught basic and pure HTML, so I also tried out designing a couple of websites.

I will never forget how amazing it seemed to me to write some lines of code and BAM! Internet Explorer gave me back texts and images. I had created something new where there was nothing before.

 

front page 2000 book

CD included. Awesome!

Transition

As time was passing by I had to choose a career to study and I decided (still with some doubts) to start studying Graphic Design at the college.

I met a whole new world in there and found out the idea I had about graphic design was reduced to something trivial. I discovered identity design, packaging, typography, the Bauhaus, I became obsessed with Helvetica, modernism and the impeccable work of Massimo Vignelli.

 

Helvetica movie was a big influence in my view of design.

I learned that designing is much more than assembling shapes, colors, and text.
Designing is solving a problem that is affecting someone. 

Tweet this

Back to coding

But, I don’t know why, that ‘web design’ thing that I once ventured on my own was still there and had not disappeared.

Out of curiosity, and a bit because of not knowing what else to do, I got into a very intensive course where I learned HTML, CSS, and Flash.

Yes, Flash.

At that time I was not entirely clear about how this knowledge would fit with the graphic design I had learned in college, which by then had been in the past… Did I mention that I abandoned it? Didn’t I? Well, that story will go a separate way.

I followed my guts and a few years later I founded a multidisciplinary design studio together with a friend.

Scale

There we faced all kinds of design projects. We didn’t say no to anything.

The knowledge we had acquired in college plus my knowledge of, what I later learned is called front-end, allowed us to cover all kinds of projects.

Over time, however, this lack of specialization began to make me uncomfortable, feeling that we were doing anything very well at all.

I liked writing code and designing interfaces and brands but I did not finish perfecting myself in any, so I decided to leave it behind and create a studio that only focused on one service so that I could do it really well.

New stage: UX

Defining that service to get specialized was something quite natural.

Previously, programming companies had entrusted me with projects where all they needed was interface design. They, of course, would translate it into code.

In UI and UX design I found, a union between two disciplines that I had always enjoyed.

I could solve communication problems for users, be in touch with the graphic aspects of the design and in turn see that all finally embodied in a digital product.

I was still involved with the code as it was always a part of these products, I may not write it directly but I know that it will be affected by what I do and vice versa.

A new service

I was really excited about commissioning this new stage and learning a lot about a new discipline.

But real learning, that one which is not found in any book, blog or video, began a while later: the one that comes with the experience.

When I could see live some of the projects I had participated, I soon discovered several errors… and 90% were mine!

Today, I can reflect that the biggest mistake that encompasses all the others was assuming: not clarifying certain things assuming they were obvious.

  • I assumed that whoever had the honor to inspect my mockups in Photoshop was going to export the icons in SVG instead of PNG.
  • I assumed that they were going to interpret the layers names as indicative.
  • I assumed that they were going to apply different states for links and buttons.
  • I assumed that they would integrate animations.
  • I assumed that they would apply overlays from CSS, etc.

All this led me thinking: “Ok, maybe my work is not as clear as I think it is”

DELIVERABLES 101: Assets folder.

The first step was to avoid the development team having to go into a tangle of files and layers to get the asset they needed. I started to be more organized with the deliverables.

Folders and files named in an understandable way, in the required extension, size, and scale.

Deliverables folder

Pretty easy, right?

UI Style Guide

I came across UI Style Guides when investigating resources to make the implementation of designs more faithful.

With a link to the corporate identity manual, I found it as a valid solution to document the work done. Grids, font variables, colors, styles in inputs, etc.

It also allowed me to specify things that were difficult in a static mockup. For example, the hover and active states of a button; and even going a little further and begin to contemplate components that may not be in the current project, but could be required in the future.

UI Style Guide made for Quickpix

UI Style Guide made for Quickpix

Modals, toasts, validation and error messages, radio buttons, check boxes and other elements made the UI Style Guide begin to contemplate the scalability of a product. A product that may not have the size (or budget) enough to have its own design system.

Interaction design

The final product improved after applying this change when delivering my work.

It continued to perceive, however, that the final result was something rigid, lacking in life and revealing new flaws that affected its usability.

This is how I found that I could begin to contemplate and anticipate this type of problems through the interaction design and its proper documentation.

Column transition and fixed navigation sample

This animation served to indicate simple features like column transition and a fixed navigation bar.

Conclusion

This road I’ve been on taught me how difficult it is to propose a design, to get it right the first time and then forget about that project. The ideal, necessary and logical is having an improvement and constant correction. Not only of the final product but of the service provided as well.

Retrospective, self-criticism, and learning are key factors in all areas of our lives and of course, our work is not exempt from them.

It is my debt today, to find a way to solve the support we must provide to the companies and teams that entrust us with their projects.

Find a way to not forget about the products that have been created and to apply corrections to their possible failures, or ours.

Let’s not forget that behind all these projects there are humans and we all make mistakes.