Typography for Interfaces

By the end of this lesson you will be able to pick a typeface for an interface, build a type scale, and set size, line height and line length so text is easy to read on phones and laptops.

Most of an interface is text: labels, buttons, prices, messages. Typography is the craft of choosing and arranging that text. Good typography is mostly invisible. People simply read without effort. Poor typography makes them squint, skip and give up.

Words you need first

• Typeface: a family design, such as Inter, Roboto or Noto Sans.
• Font: one specific style of a typeface, such as Inter Bold. People often use the two words interchangeably, and that is fine in daily work.
• Serif: small strokes at the ends of letters (like in many printed newspapers). Sans-serif typefaces have no such strokes and are common in interfaces.
• Weight: how thick the strokes are, from Thin (100) to Black (900). Regular is 400, Bold is 700.
• Line height: the vertical distance from one line of text to the next.
• Line length: how many characters fit on one line.

Choose a typeface

For interfaces, choose a typeface that is easy to read at small sizes, has several weights, and supports every language your users need.

A safe beginner rule: use one typeface family, and create variety with size and weight. Two families are fine if they contrast clearly (for example a serif for headings and a sans-serif for body). Three or more usually looks messy.

The operating system already has good interface fonts. The CSS value system-ui uses them, which costs no download and suits low-bandwidth users.

Size and the type scale

On mobile web, body text of 16px is a sensible minimum. Smaller body text forces people to zoom. Labels and captions can go to 12 to 14px, but only for short secondary text.

A type scale is a fixed set of sizes you reuse everywhere. Instead of choosing sizes randomly (15, 17, 21, 23), you pick a base and multiply by a ratio. With a base of 16px and a ratio of 1.25:

Think of the sizes of Indian currency notes. They follow a pattern, so you can tell values apart quickly by size. A type scale does the same for text.

Run this example to see the scale.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Type scale</title>
  <style>
    :root { --base: 16px; --ratio: 1.25; }
    body { font-family: system-ui, sans-serif; padding: 16px; color: #1a1a2e; }
    .h1 { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); font-weight: 700; }
    .h2 { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio)); font-weight: 700; }
    .h3 { font-size: calc(var(--base) * var(--ratio) * var(--ratio)); font-weight: 600; }
    .h4 { font-size: calc(var(--base) * var(--ratio)); font-weight: 600; }
    .base { font-size: var(--base); }
    .small { font-size: calc(var(--base) / var(--ratio)); color: #4b5563; }
    p { margin: 0 0 8px; line-height: 1.3; }
  </style>
</head>
<body>
  <p class="h1">Book your visit</p>
  <p class="h2">Choose a doctor</p>
  <p class="h3">General physicians</p>
  <p class="h4">Dr Anjali Mehta</p>
  <p class="base">Available today from 9:00 am. Fees are paid at the clinic.</p>
  <p class="small">Slots refresh every 5 minutes.</p>
</body>
</html>

You should see six lines, each a step smaller. Change --ratio to 1.2 or 1.333 and run again. A smaller ratio gives a gentle scale for dense apps; a larger ratio gives drama for marketing pages.

Line height and line length

Line height for body text works well around 1.4 to 1.6 times the font size. Too tight and lines crash into each other. Too loose and the paragraph falls apart.

Line length for comfortable reading is roughly 45 to 75 characters per line for body text. Very long lines make the eye lose its place when jumping back to the next line. In CSS, the ch unit (about the width of the "0" character) makes this easy: max-width: 65ch.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height and length</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; color: #1a1a2e; font-size: 16px; }
    h2 { font-size: 15px; color: #5b21b6; }
    .bad { line-height: 1.05; }
    .good { line-height: 1.55; max-width: 65ch; }
  </style>
</head>
<body>
  <h2>Tight and full width</h2>
  <p class="bad">Please arrive ten minutes before your appointment and carry your old prescriptions and any recent test reports. If you are late by more than fifteen minutes, the reception may move you to the next free slot so that other patients are not kept waiting.</p>
  <h2>Comfortable height, limited width</h2>
  <p class="good">Please arrive ten minutes before your appointment and carry your old prescriptions and any recent test reports. If you are late by more than fifteen minutes, the reception may move you to the next free slot so that other patients are not kept waiting.</p>
</body>
</html>

Widen the preview window. The first paragraph stretches across the whole width with cramped lines. The second stops at about 65 characters and has room to breathe.

Weight, case and colour

• Use two or three weights at most: Regular for body, Semibold or Bold for headings and buttons.
• Avoid long text in ALL CAPS. Capitals are harder to scan. Short labels are fine.
• Body text should be dark (near black) on light backgrounds. Light grey text looks elegant but often fails contrast checks.
• Do not underline text that is not a link. People will try to tap it.

Typography for Indian scripts

Many Indian products need English plus one or more Indian scripts, such as Devanagari (Hindi, Marathi), Bengali, Tamil or Telugu. These scripts have marks above and below the main letters, so they often need more line height than English.

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="utf-8">
  <title>Hindi and English text</title>
  <style>
    body { font-family: system-ui, "Noto Sans Devanagari", "Nirmala UI", sans-serif; padding: 16px; color: #1a1a2e; font-size: 18px; }
    p { max-width: 40ch; }
    .tight { line-height: 1.1; }
    .roomy { line-height: 1.7; }
  </style>
</head>
<body>
  <p class="tight">कृपया अपनी अपॉइंटमेंट से दस मिनट पहले पहुँचें और पुरानी पर्चियाँ साथ लाएँ।</p>
  <p class="roomy">कृपया अपनी अपॉइंटमेंट से दस मिनट पहले पहुँचें और पुरानी पर्चियाँ साथ लाएँ।</p>
  <p lang="en" class="roomy">Please arrive ten minutes early and bring old prescriptions.</p>
</body>
</html>

You should see the same Hindi sentence twice. In the tight version the vowel marks crowd the line above. The roomy version reads comfortably. The lang="hi" attribute tells the browser and screen readers which language the text is in.

Common mistakes

• Too many sizes. Stick to your type scale.
• Body text below 16px on mobile. It forces zooming.
• Light grey body text that fails contrast.
• Fancy display fonts for body text. Save decorative fonts for short headings, if at all.
• Forgetting other scripts until the end, then finding the font does not support them.

Key points

• Use one typeface family (two at most) and create variety with size and weight.
• Build a type scale from a base size and a ratio, and reuse only those sizes.
• Body text: about 16px on mobile, line height about 1.4 to 1.6, line length about 45 to 75 characters.
• Use two or three weights and avoid long ALL CAPS text.
• Indian scripts need fonts that support them and usually more line height.

:root { --base: 18px; --ratio: 1.2; }