BlogSep 1, 2025

Fonts - Spoiled for choice

design

The text you provided is a guide on the principles of good typography for digital products, focusing on how font choices and layout affect user experience. Here is the translation.

Which Three Adjectives Should Users Feel Before Reading the First Sentence?

Choose a font(s) that embodies this attitude (e.g., “competent, calm, modern” vs. “playful, bold, creative”).

Examples

Fintech/Insurance: Humanist sans-serif (friendly, factual, trust-building)
Fashion/Editorial: Characterful serif (elegant, valuable)
Developer Tools: Monospace accent in headlines (precise, technical)
Kids/Education: Rounded sans, larger letterforms (approachable, warm)

Typography Guides the Eye

Good typography establishes a clear hierarchy: What's important? What's secondary? Users first scan for sizes, weights, and spacing—only then do they start reading.

What Users Feel Instantly

Headlines lead; body text explains.
Weights (Regular/Bold) set priorities—too much bold takes the emphasis away from everything.
Whitespace is a design element: breathing room helps the eye recognize connections.
Buttons need clear, high-contrast labels—microcopy + readability = more clicks.

Anti-Patterns

Everything looks equally important (no guidance).
All caps (ALL CAPITAL LETTERS) in longer texts—it looks like "shouting" and makes it harder to recognize word shapes.

Light, Not Loud: Reducing Cognitive Load

Users arrive with a goal—typography should not get in the way.

How to Make Text Feel Lighter

Simplicity over variety: stick to 1–2 font families and a few weights.
Calm text blocks: generous line spacing and sensible paragraph lengths.
Consistent patterns: recurring sizes/spacing provide a sense of security and increase reading speed.
Clear link styles: links must be recognizable as links (not just by color, but also form/underlining).

Trust & Credibility

Typography can appear serious, factual, warm, or luxurious—and this influences credibility.

Think in Opposites

Neutral vs. Characterful: Neutrality helps focus and accessibility. Character creates recognition.
Timeless vs. Trendy: Timeless is durable; a trend makes a statement (ideal as an accent, not for body text).
Platform-Consistent vs. Brand Voice: System fonts (iOS/Android/web stack) feel native and fast; a brand font creates uniqueness. Often, brand fonts are used for headlines and a neutral sans for the body.

Inclusion You Can Feel: Accessible & Respectful

Accessible typography is inclusive—and it improves readability for everyone.

Tangible Principles

Strong contrast between text and background (light gray on white is rarely enough).
Sufficient size—especially on mobile; nobody should have to zoom.
No color as the only signal (e.g., errors only in red → add a label/icon).
Forms that are difficult to confuse (I/l/1): choose fonts where these characters are clearly distinguishable.
Consider dyslexia: left-aligned, mixed case, calm word images.
Respect system settings (e.g., larger font in device settings)—that's real user care.

Web vs. Mobile: Context Trumps Style

The principles are the same, but the context varies:

Mobile: Less space, read on the go → concise headlines, short paragraphs, tappable buttons with clear labels.
Desktop: More elements visible at once → stronger typographic hierarchy helps with scanning large areas.
Both: Test in a real-world setting—in bright sunlight, when tired in the evening, with left- and right-handed users, and with older users.

Trends—Only If They Add Value

Trends are tools, not goals.

Variable fonts: one font with many weights/widths—can adapt to a situation or screen. Tangible benefit: a consistent rhythm, fewer "typo jumps," a strong headline, and a calm body.
Expressive headlines: character in the headline, clear body for reading texts. This combines brand and usability.
Nostalgia/Retro as an accent: emotional, recognizable—great in a hero section, but use sparingly in body text.
Consciously chosen system fonts: as fast as possible, native feel—if performance and simplicity are core to the experience.