UX6: Visual design: type, colour, space and motion
Typography that people can read
🎯You'll be able to
Choose fonts, sizes, line lengths and spacing that are easy to read on phones, and set a small type scale.
🏠The everyday picture
A medicine label in tiny, tightly packed letters is hard for anyone and unreadable for some. A good label uses a clear size, enough space between lines and bold for the dose.
📘What it really is
-
Font choice: a clear sans-serif or a system font stack (
system-ui, …) loads instantly and suits every script the phone supports, including Devanagari. Avoid decorative fonts for body text. -
Size: body text around 16 to 18 CSS pixels on phones. SehatSlot's tokens set body text at
1.0625rem(17 px at the default size). Useremso text grows when people increase their phone's text size. -
Line height: about 1.4 to 1.6 for body text.
- Line length: about 45 to 75 characters per line on wide screens; set a
max-widthon text blocks. -
A type scale: a few sizes with clear roles. The kit uses four: small (0.9375rem), body (1.0625rem), large (1.25rem) and heading (1.75rem).
-
Weight and emphasis: bold for labels and key facts; avoid long passages in capitals or italics.
- Resizing: text should still work when enlarged to 200% (WCAG 2.2 success criterion 1.4.4).
📝A worked example
Input: the starter's type in prototype/styles.css.
| Starter | Problem | Reference |
|---|---|---|
font-size: 14px on body |
Small on phones; fixed pixels | var(--font-size-body), 1.0625rem |
.back, .small { font-size: 12px; color: #999999 } |
Tiny and faint (2.85 to 1 on white) | Back link at body size, bold, in the link colour |
| Arial | Fine, but may lack some scripts on phones | System font stack |
Expected output: a type scale of four sizes in design-system/tokens.json, used through var(--font-…) in styles.css.
🌍Where it's used
- Government sites, which often set large body text because many readers are older.
- News apps, where line length and line height make long reading comfortable.
- Bilingual products, which test fonts in every script they support.
📝Case scenario
A pension portal used 12-pixel grey text to "fit more on the screen". Calls from pensioners asking what the page said were common. Body text at 18 pixels with darker colour made the pages longer, and the calls dropped.
🖱️Try it
On your phone, increase the system text size to the largest setting and open three apps. Note which ones break. Success: you find at least one app where text is cut off or overlaps, and describe why.
⚠️Common mistakes
- Tiny secondary text. Sign: 11 or 12 px for hints and links. Fix: no smaller than about 15 px for anything people need to read.
- Fixed pixel sizes. Sign: text ignores the phone's text-size setting. Fix: use
rem. - Too many sizes. Sign: eight font sizes on one screen. Fix: a scale of four or five.
🛠️For your project
Project 3's tokens include the type scale; the prototype must use it through var(--font-…).
✅Quick check
About what size should body text be on phones?
Show the answer
Around 16 to 18 CSS pixels, set in rem so it grows with the phone's settings.
How many sizes does a typical type scale need?
Show the answer
About four or five, each with a clear role.