Fonts in design: how to choose and pair them

Step 1

Decide what the font is for

You don't choose a typeface for its looks but for its role in the layout. Google Fonts Knowledge gives a simple example: an elaborate script face may look great in a logo but is unlikely to work for body text. First answer three questions:

• •where the text will live: a screen, print, a sign, packaging;
• •what kind of text it is: long reading, a short heading, a caption, numbers in a table;
• •what impression it should make: businesslike, friendly, playful, strict.

💡 Type your layout's real text into the font instead of the catalog's sample sentence. Cyrillic often looks very different from the Latin preview.

Step 2

Learn the basic types

Four groups are enough to start. Serif typefaces have small strokes at the ends of letters and are often associated with classic books. Sans serif faces are neutral and common in interfaces. Monospaced fonts give every character the same width and are used for code and technical data. Display faces are expressive fonts for large headings, not paragraphs. The type sets the tone of a layout before anyone reads a single word.

Step 3

Check the font before you fall for it

Google Fonts Knowledge recommends going through a checklist before using a typeface. For a beginner, the essentials are:

• •Cyrillic: Google Fonts has a language filter; check the Ukrainian letters ґ, є, і, ї and the apostrophe;
• •styles: at least regular, italic and bold; the more weights, the easier it is to build hierarchy;
• •legibility: compare the capital “I”, the lowercase “l” and the numeral “1” so they don't blur together;
• •license: Google Fonts are free and allowed for commercial use, while paid fonts have their own terms, so read them before delivering a project.

Step 4

Pair typefaces carefully

First ask whether you need a second typeface at all. Google Fonts Knowledge puts the rule like this: only introduce a secondary typeface if it can do something your primary one cannot, such as provide a missing italic or change the tone for quotes and data. The hardest part is finding one that's different enough, but not too different. When in doubt, pair a serif with a sans serif or use typefaces from one superfamily. Examples of pairs with Cyrillic on Google Fonts:

• •Roboto and Roboto Slab;
• •Noto Sans and Noto Serif;
• •IBM Plex Sans and IBM Plex Serif;
• •Nunito and Nunito Sans.

💡 Build hierarchy with the size and weight of one typeface, not with five different families. If a layout has more than two typefaces, one is usually redundant.

Step 5

Set it up for reading

Even a good typeface can be ruined by poor setting. Butterick's Practical Typography gives handy reference points:

• •line length: an average of 45–90 characters, including spaces;
• •line spacing for body text: 120–145% of the point size;
• •body text: 10–12 points in print and 15–25 pixels on screen;
• •all caps: for short bits of less than a line, not for paragraphs.

💡 Make a specimen page: a heading, a subheading, a paragraph and a caption. Share it in the community and ask what people read first.