Typography: choosing fonts, pairing, type scales, line length and height, readable text and web font performance

Most of a website is text: headings, paragraphs, prices, buttons, forms. Typography is the craft of making that text readable, clear and attractive. Good typography makes visitors stay and understand; poor typography (tiny grey text, five clashing fonts, lines running the full width of a laptop screen) makes them leave. This unit covers how to choose and pair fonts, set sizes with a type scale, control line length and spacing, and load web fonts without slowing down your site.

Font categories

<div style="display:grid;gap:10px;font-size:20px">
  <p style="font-family:system-ui,sans-serif;margin:0">Sans-serif: Fresh cakes delivered in Nairobi</p>
  <p style="font-family:Georgia,serif;margin:0">Serif: Fresh cakes delivered in Nairobi</p>
  <p style="font-family:Impact,sans-serif;margin:0;letter-spacing:.03em">Display: FRESH CAKES DELIVERED</p>
  <p style="font-family:ui-monospace,monospace;margin:0">Monospace: KSh 2,500.00</p>
</div>

Choosing fonts

1. Readability first: body text needs clear letter shapes, open spaces inside letters (counters), and distinct characters (Il1, O0).
2. Match the brand personality: modern and friendly (rounded sans), professional (neutral sans), luxury (elegant serif), playful (rounded or display for headings).
3. Check language support: accents and characters you need.
4. Check weights available: at least regular (400), medium/semibold (500–600) and bold (700).
5. System font stack: using the device's built-in fonts is fastest and looks native:

font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Font pairing

• Use 1–2 fonts (3 maximum). One family with several weights can be enough.
• Classic pairings: a serif heading + sans-serif body, or a strong sans heading + neutral sans body.
• Pair fonts that contrast clearly (not two similar sans-serifs that look like a mistake).
• Keep display fonts for large headings only.

Examples: Playfair Display + Inter; Poppins + Open Sans; Merriweather + Source Sans 3; Montserrat + Lato.

Size and type scales

• Body text on the web: 16–18px minimum (phones are read at arm's length, often outdoors).
• Small print: not below about 13–14px.
• Use a type scale: sizes multiplied by a ratio (e.g. 1.25) so headings feel related.

const base = 16, ratio = 1.25;
const names = ["small", "body", "h4", "h3", "h2", "h1"];
names.forEach((name, i) => {
  const size = base * ratio ** (i - 1);
  console.log(name.padEnd(6), Math.round(size * 10) / 10 + "px");
});

Responsive sizes with clamp()

clamp(min, preferred, max) lets headings grow smoothly between phone and desktop:

h1 { font-size: clamp(1.8rem, 1.2rem + 3vw, 3.2rem); }
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }

Use rem units (relative to the root font size) so text respects users who enlarge their browser's default font.

Line height, line length and letter spacing

<style>
  .bad { font: 14px system-ui; line-height: 1.1; color: #9ca3af; }
  .good { font: 17px system-ui; line-height: 1.6; color: #334155; max-width: 60ch; }
</style>
<p class="bad">Bad: small, cramped, light grey text that runs very wide becomes tiring to read. Visitors skim, miss important details, and often leave without contacting you, especially on phones in bright light.</p>
<p class="good">Good: comfortable size, generous line height, strong contrast and a limited line length make reading easy. Visitors understand your offer and are more likely to call, WhatsApp or buy.</p>

Weight, style and hierarchy

• Use weight (400 regular, 600 semibold, 700 bold) and size to show hierarchy.
• Avoid using many weights at once; 2–3 is enough.
• Italics for occasional emphasis; avoid long italic passages.
• ALL CAPS only for short labels or buttons, with a little letter spacing; long all-caps text is hard to read and feels like shouting.
• Don't underline text that isn't a link.

Alignment and readability

• Left-align body text (for left-to-right languages). Centred text suits short headings and hero text, not paragraphs.
• Avoid fully justified text on the web: it creates uneven gaps ("rivers").
• Break long text with subheadings, lists, short paragraphs and images: people scan web pages.
• Make links obvious (colour + underline in body text).

Numbers and prices

• Use tabular numbers in tables so digits line up: font-variant-numeric: tabular-nums;.
• Format money consistently: "KSh 2,500" (with thousands separators).
• Make prices prominent with size/weight, not with flashing colours.

Web fonts and performance

Custom fonts add download time. Best practices:

1. Use few families and weights (each weight is a separate file).
2. Prefer WOFF2 files.
3. Self-host fonts (download from Google Fonts and serve from your server) or use Google Fonts with preconnect.
4. Use font-display: swap so text shows immediately in a fallback font while the custom font loads.
5. Preload the most important font file.
6. Consider variable fonts: one file containing many weights.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
body { font-family: "Inter", system-ui, sans-serif; }

Always include fallback fonts in the stack.

Typography checklist

Summary

• Sans-serif suits screens and UI; serif adds elegance; display and script fonts are for big headings only.
• Choose readable fonts that match the brand; pair 1–2 fonts with clear contrast.
• Body text 16–18px; build sizes with a type scale; use rem and clamp() for responsive text.
• Line height ~1.5–1.7, line length 45–75 characters, left-aligned scannable paragraphs.
• Load web fonts efficiently: WOFF2, few weights, font-display: swap, self-hosting and fallbacks.