The correct font sells. Wrong is scary. Learning how to choose

16 minutes of reading · typography · branding · design

The text reads, “Your safety is our priority.” It's written Comic Sans, you laugh. Written in a delicate sanserif - you read indifferently. Written in greasy serif - you feel it's serious. The font doesn't just show the text. The font speaks in a tone of voice – and this tone works before the brain begins to read words.

Most brands choose fonts based on the principle of “like / dislike” or “download free”. This is about the same as choosing the timbre of voice for a speaker at a conference on the principle of “nice person”. Maybe that'll work. But it probably fails at the most important moment.

Typography is the voice of a brand. And the voice has characteristics: height, pace, accent, intonation. The font carries all these characteristics visually. Choosing a font is about choosing how a brand sounds to everyone who reads it.

## What type says without words

The brain processes the shape of letters before their meaning. It's not a metaphor, it's neuroscience. The visual cortex responds to font geometry in milliseconds. The emotional response is formed before the person reads the word.

**Serif — Times New Roman, Garamond, Georgia. Horizontal strokes on the ends of the letters. Historically associated with printing, newspapers, books. Transmitted: authority, tradition, reliability, seriousness. They work well for: legal services, finance, media, luxury brands, publishers.

**Sans-serif - Helvetica, Futura, Gill Sans. No serifs, clean shapes. Transmit: modernity, neutrality, accessibility, functionality. They work well for: technology, healthcare, education, retail.

Geometric grotesques — Futura, Avenir, Montserrat. They are built on geometric shapes (circle, square, triangle). Transmitted: accuracy, technology, ambition. Colder than humanistic grotesques.

Humanist grotesques - Gill Sans, Optima, Myriad. Grotesques with human proportions taken from calligraphy. Transmit: warmth, accessibility, humanity. They are better read in text blocks.

Courier, Source Code Pro. Each letter occupies the same width. Transmitted: technology, accuracy, transparency (like code). Use technology brands for specific accents.

** Manuscripts and decorative ** - a wide range. Transmit: individuality, manual labor, warmth, exclusivity. They are poorly scalable, difficult to read in small sizes.

## Why choosing a font destroys trust

The mismatch between font and content creates cognitive dissonance. The brain picks up the discrepancy quickly and interprets it as a signal of unreliability.

Specific situations where the font destroys trust:

A playful font in a serious context. A medical site with a rounded soft font. Legal contract typed in font for a children's book. No, Comic Sans is not needed for this - just a font that has too "playful" character is enough.

Outdated font in a modern context. Times New Roman on the tech company's website. It’s not a classic, it’s a sign that the company hasn’t been updated since 2005.

**Decorative font where readability is needed. ** Price list written in script. Terms of the contract in decorative letters. It is physically difficult for the user to read – and it is perceived as disrespectful.

** Too many fonts. If three or more different families are used on the same page, the brain considers it chaos. Chaos is associated with incompetence.

System fonts without intent. Arial, Times New Roman, Calibri — Microsoft Office omissions. They say, “We didn’t think about it.” They may be the right choice, but only if they are chosen intentionally.

## How to choose a font for a brand

### Step 1: Identify three character words

Before you look at fonts, describe the character of the brand in three words. Not “quality,” “reliable,” “modern” are the words every brand wants. Specific words that make you different.

"Straight, accurate, a little cheeky" - only fonts. "Warm, expert, human" - others. "Avant-garde, complex, elitist" - the third.

Three words are a filter for selection. When you look at a typeface, you ask: Does it sound like these three words?

### Step 2: Look at your competitors and do the opposite

Collect screenshots of five direct competitors. Pay attention to the fonts (you can use WhatFont or analogue).

If everyone uses grotesques, consider serifs (if it fits the character). If everyone is serious and strict, consider something more individual. Do not “do the opposite” for the sake of contradiction, but “find what no one else has.”.

### Step 3: Testing in real contexts

The mistake is to choose the font in Figma on a clean background. Test in real-world applications:

• Long text block (3-4 paragraphs)
• Heading at 60px
• Signature at 12px
• White text on a colored background
• On a mobile screen
• In the numbers table

A font that looks beautiful in a showcase can be unreadable in real conditions.

### Step 4: Check the specifications

Is there Bold, Italic, Light, Medium? If the font is only in one mark, this is a limitation that will be a problem when creating a hierarchy.

Cyrillic. If you work in Russian - the quality of the Cyrillic shape is critical. Many popular fonts have excellent Latin and mediocre Cyrillic. Specially check the Russian text.

License. Free for personal use . Free for commercial use. The SIL Open Font License is free for everything. Adobe Fonts is available with an Adobe subscription. Google Fonts is open source. Everything else, check.

Formats. Web fonts (WOFF2, WOFF) for the site. OTF/TTF for design programs. Variable fonts for adaptive typography. Make sure you have the right formats.

## Brand typographical system

One font is rarely enough. Two is usually optimal. Three is maximum.

Display: for major titles, hero sections, key messages. It can be expressive, characteristic, memorable. It does not necessarily read perfectly in small sizes.

Body: for long texts, paragraphs, descriptions. Priority is readability. Neutral, comfortable, without unnecessary details that tire when reading.

** Accent font (Accent):** optional. For quotes, signatures, specific elements. Often more characteristic or contrasting with the main two.

### Couples who work

See title + grotesque text. Classic. Title: Authority and character. Text: readability and neutrality. Works for: fintech, media, publishing houses, professional services.

Two grotesques of different nature. Geometric for headings (accuracy, manufacturability) + humanistic for text (warmth, readability). It works for: tech brands that want to be human.

One font in all scales. Maximum consistency. Requires a font with a rich line of characters (Light, Regular, Medium, Bold, Black). Works for: minimalist brands, design studios.

## Working with typography in the system

### Hierarchy

A typographic hierarchy is a visual system that tells the reader, “Here is the most important, here is the least important, here are the details.” Without hierarchy, chaos. With a bad hierarchy, chaos is just less obvious.

Basic levels:

1. *H1 is the main title of the page/section. One per page. Maximum size.
2. H2 - subsection. Clearly less than H1, clearly more text.
3. H3 is a subsection or accent within the text.
4. Body is the main text. Optimal readability: 16-18px on the web, 9-12pt in print.
5. Caption/Small – signatures, footnotes, meta-information At least 11px on the screen.

**The difference between levels should be clear. If H1 and H2 differ by 2px, there is no hierarchy. The minimum step is 1.25× (modular scale).

### The space between the lines

Leading is one of the most underrated elements of typography. Too little - the text is compressed, difficult to read. Too much – the text “disintegrates”, loses coherence.

For main text: 1.5-1.7x of font size. For headings: 1.1–1.3× (large letters require a smaller interval). For long lines (>80 characters): increase the interval.

### Line length

The optimal line length for readability is 45–75 characters. With longer lines, the eye loses a line when moving. With shorter ones, too frequent eye movements are tiring.

On mobile devices, this is usually followed automatically. On wide desktop screens, you need to limit the width of the text container (max-width: 65ch in CSS).

## Typographical anti-patterns

Too many fonts. Three families, maximum. Realistically working rules: one title + one text.

Kerning by default in headers. Automatic font kerning optimized for text. Large titles often require manual adjustment of the interletter distance. Especially critical for logos and slogans.

Justify without transfers. Justify without transfers creates "rivers" - uneven gaps between words. Either align on the left edge, or connect the transfer arrangement.

Capital letters with normal kerning. ALL CAPS without increasing tracking looks clamped. For CAPS, add 50-100 tracking units.

** Design font in the interface.** Decorative fonts that work well on the poster destroy readability in the interface with small elements, large text arrays, hover/active/disabled states.

## AI and typography: how to use Claude

### Prompt: Choose a font pair for the brand

Help choose a font pair for the brand.

About the brand:
- Name and description: [What kind of company sells]
Three words characterizing the brand: [word 1, word 2, word 3]
Audience: [who reads our content]
- Contexts of use: [website, mobile application, printed materials, presentations]
Competitors and their fonts: [what they use]
Font budget: [Free through Google Fonts/will pay for license]
Languages: [Russian/English/both]

Suggest:
1. Three variants of font pairs with a reason why they match the character of the brand
2. For each pair - specific examples of application (header H1, subtitle, text, signature)
3. Links to Google Fonts or source for each font
4. What weights are needed minimally for full work

### Prompt: Site typography audit

Audit the typography of our site.

Current typography:
- Headings: [font, size, weight]
- Main text: [font, size, spacing]
- Secondary elements: [signatures, buttons, navigation]
- Number of font families: [how many]

Website description:
Site type: [landing / blog / online store / SaaS / corporate]
- Audience: [who]
Positioning: [how we want to be perceived]

Estimate:
1. Readability: whether sizes and intervals meet standards
2. Hierarchy: Is the page structure clearly readable?
3. Consistency: Is there chaos of different fonts and styles?
4. Conformity of character: does typography say what you need?
5. Specific corrections with CSS parameters (font-size, line-height, letter-spacing)

### Prompt: Establish a printing system

Help create a typographic system for the brand.

Fonts that we use (or plan to use):
- Headline: [font]
- Text: [font]

Platforms:
- [Site/App/Print - Choose the right ones]

Composition:
1. Size scale for all levels of headings (H1–H4) and text (body, small, caption)
2. For each level: size, weight, line spacing, tracking, color
3. Rules for different contexts (mobile vs desktop, dark vs light theme)
4. Examples of application in CSS variables or design system tokens
5. What not to do - a list of 5-7 bans for our system

### Prompt: Diagnostics of readability problems

The text on our website/app is poorly read. Help diagnose the cause.

Description of the problem: [users complain that...] We can see from the tests that...
Current text parameters:
- Font: [title]
- Size: [px or pt]
Weight: [Regular/Medium/Bold]
- Line spacing: [value]
- Colour of text and background: [hex or description]
- Column width: [px or %]
- Device: [mostly mobile/desktop/both]

Analyze:
1. What parameters violate readability standards
2. Specific corrections with numbers
3. What contrast is achieved (WCAG AA – minimum 4.5:1 for text)
4. Priority of corrections – where to start for maximum effect

### Prompt: Choose Cyrillic

We need a font with high-quality Cyrillic type.

The character to be conveyed: [description]
Context of use: [site/app/print]
Already used for Latin: [font, if any]
License requirements: [free/commercial/unlimited]

Recommend:
1. 3-5 fonts with high-quality Cyrillic alphabet that correspond to the character
2. For each, a brief description and why it fits
3. How the font is combined with the specified Latin font (if any)
4. Download source and license conditions
5. What to look for when testing the Cyrillic alphabet (specific letters that are often painted poorly: J, Y, E, Kommersant)