Typography for Product Managers

Why is typography important? And why should product managers understand a little about it?

Why is typography important?

According to Google Material Design — “Typography expresses hierarchy and brand presence”- therefore, it is a way to inform the user, to give clarity on what are the most important parts of your screen, step or user moment. In other words, the typography should help to guide the user through a product flow.

As PMs, we are constantly working along with Designers, helping them to set journeys, analyzing screens, writings, flows and, knowing at least the basics of typography is a way to better evaluate what is going to production. So, as Product Manager, you should consider those concepts, taking hierarchy, readability, availability and loading time of the selected fonts into account.

Considering its importance, I decided to study a little about it and bring a brief summary on the topic.

What are the different font classifications?

Typefaces are classified in five different groups, as shown below:

1. Serif: includes a projection at the end of a stroke. Ex.: Times New Roman. Usage: the classic choice is to use serif style for body text;
2. Sans Serif: does not include any projection at the end of the strokes. Ex.: Helvetica, Arial. Usage: title pages and headings. These fonts calls user attention;
3. Script: constructed with fluid strokes, they have a handwritten feel. Ex.: Brush Script, Bianca. Usage: headlines, flash content where the user doesn’t have to pay much attention;
4. Display: very different in shape. Ex.: Broadway, Cooper Black, Curlz.
   Usage: same as script, headline, flash content;
5. Monospaced: every letter takes the same amount of horizontal space. Ex.: Courier New, Consolas, Source Code Pro. Usage: generally used for displaying code.

On figure 1, examples of each font type:

Figure 1: examples of Serif, Sans Serif, Script, Display and Monospaced fonts.

Some characteristics to pay attention:

1. Baseline: invisible line which a line of text stays. Impacts properties when evaluating the fonts selected;
2. Cap Height: Height of capital letters (M or I) from the baseline;
3. Weight: thickness of the font (light, regular, medium or bold). Increasing the weight suggest more importance to the content;
4. Readability: how easy it is to read blocks of text. To have a sense of readability, one tip from @horvath, Chief Design Officer at GetNinjas: if the “A” is the “ball A”(ex.: “a” from Facebook logo), the font is less recommended for long and important texts. Therefore, the “ball A” font is recommended for logos and displays.

On figure 2, the illustration shows the font properties discussed before and the “A” difference to easily compare readability between fonts.

Figure 2: How to identify font baseline, cap and weight and a tip on how to identify easy to read fonts.

Now, how to verify typography coherence in a product??

Assure information hierarchy: the larger the font size, the more important is the information. Use Bold text as a sub hierarchy, highlighting an important part inside of one phrase. Some references:

1. Title and displays: call user attention, small number of words, large size font, bigger than 24pt. Interesting fonts: Lobster or Berkshire Swash;
2. Headlines, subheads: Help to attract the eye, generally used for more explanatory phrases, medium size fonts ranging from 16pt to 24pt. Interesting fonts: Open sans, San, Montserrat, Lato, Quattrocento Sans, Arvo, Sanchez, and Slabo;
3. Medium Text: 3 to 4 paragraphs, use serif or sans serif font, always checking for font readability. Convenient fonts: Quattrocento, Libre Baskerville, Arvo, Cabin, Raleway;
4. Long Text: more than 5 paragraphs, serif typeface recommended to facilitate reading. Suggested fonts: EB Garamond, Libre Baskerville;
5. Very small text: up to 16 pt. Interesting fonts: Roboto, Montserrat and Raleway.

Verify font parity: there are some fonts that work very well together and checking for parity could help your application to be more coherent and even attractive to customers. An easy way to do it is to simple ask the designer or check on google fonts website.

Lastly, check for loading time and character availability, font disponibility. These two characteristics are very important because they will be a significant ally when expanding your product. Some tips:

1. Loading time is precious on web applications, therefore, it should be a key parameter when selecting fonts. A rule of thumb here is to select fonts that are already installed on most user’s devices, for example, fonts used by Google or the ones used in most websites.
2. If you are working on or thinking about making your product international, available in a variety of languages, select a font that has characters, coverage in the languages that you are going to translate. Some examples with interesting coverage are: Noto, Alegreya, Merriweather, Nunito, Roboto, and Quattrocento.

As mentioned before, the intent here is not to make you an expert, but to give a basic overview, a starting point on the topic. Now, with the initial idea you are capable of evaluating better the screens, the product being developed.

Do you want to understand more about typography?

Since we did not even scratch the surface here, some recommendations to go deeper on the topic are: Google Material Design, Google Fonts, Design Articles on Toptal and, for other Design related themes, the articles on Nielsen Norman and Wurman.

References:

Sources: https://www.toptal.com/designers/typography/typeface-classification, https://material.io/design/typography/understanding-typography.html#readability and https://fonts.google.com/

People that helped in this article:

1. Technical review: Eduardo Horvath, Chief Design Officer
2. Language and writing review: Marilia Cayres