Typography

Why Typography Matters So Much

Most interfaces are around 80 to 90 percent text: labels, buttons, prices, instructions, error messages. If the typography is right, a design feels clear and trustworthy even with simple colours. If it is wrong, no amount of illustration will save it.

Typography is not about picking a pretty font. It is about making text readable, scannable and clearly organised.

---

Typefaces and Fonts

• A typeface is the design family, such as Inter or Roboto.
• A font is one specific style inside it, such as Inter Semibold 16px.

Main categories

• Sans-serif (Inter, Roboto, SF Pro, Manrope): clean and modern, the default for most apps.
• Serif (Georgia, Merriweather, Playfair): small strokes at the ends of letters. Good for editorial content and some brand headings.
• Monospace (JetBrains Mono, Roboto Mono): every character is the same width. Good for code, account numbers and OTPs.
• Display fonts: decorative, only for large headings and logos.

For product design, one well-made sans-serif family with several weights will cover almost everything. Inter, Roboto and Manrope are free on Google Fonts and used by thousands of products, including many Nigerian fintechs.

---

Hierarchy: Size, Weight, Colour

Typographic hierarchy tells readers what to look at first. You create it with:

1. Size: bigger is more important
2. Weight: bold stands out from regular
3. Colour and contrast: dark text for primary information, grey for secondary
4. Spacing: space above a heading groups it with the text below

A common mistake is using size alone. A 14px bold label can outrank a 16px regular one. Combine properties, but use as few as you need.

---

Type Scales

A type scale is a set of font sizes that relate to each other by a fixed ratio, so sizes feel harmonious instead of random.

Start with a base size, usually 16px for body text, and multiply by a ratio:

Smaller ratios (1.125 to 1.25) suit dense mobile apps and dashboards. Larger ratios (1.333 and up) suit marketing pages with big headlines. Round to whole numbers, and ideally to multiples of 2 or 4.

---

Pairing Fonts

• One family is often enough. Use weights for contrast.
• If you pair two, contrast them clearly: a serif heading with a sans-serif body, for example Playfair Display with Inter.
• Never use more than two families in a product UI.

---

Readability Rules

• Body text at least 16px on mobile. Many Nigerian users read on budget phones in bright sunlight, so small grey text fails quickly.
• Line height of about 1.4 to 1.6 for body text, tighter (1.1 to 1.3) for large headings.
• Line length of 45 to 75 characters per line on desktop.
• Contrast: at least 4.5:1 between text and background (more on this in the colour lesson).
• Left-align body text. Centred paragraphs are hard to read.
• Avoid ALL CAPS for long text. Use it sparingly for small labels, with extra letter spacing.
• Numbers: use tabular figures for prices and tables so digits line up.

---

Try It in the Lab

The type scale builder on the right lets you choose a font, base size and ratio, then previews the full scale on a real banking screen. It warns you when sizes fall below readable limits and exports the scale as CSS variables you could hand to an engineer.