UX & UI Design
03 / Typography in the Interface
Key question
How do you read on a screen?
In an interface, text is almost everywhere: in titles, buttons, labels, error messages and tables. It needs to work at small sizes, across many screens, and often in multiple languages. Good UI typography is understated, highly legible and follows a clear scale.
Learning objective: You will be able to select a typeface for an interface, establish a typographic scale, and typeset text in components for optimal readability.
The best UI font goes unnoticed.
3.1 / Choose font
Readable, versatile, available.
For interfaces, different qualities matter than for a poster:
01
Large x-height
Lowercase letters also appear open even at small sizes.
02
Many cuts
Regular, Medium, Bold, ideally as a variable font.
03
Clear signs
I, l, and 1, as well as O and 0, are distinguishable.
System fonts like SF Pro on Apple devices or Roboto on Android load quickly and feel familiar. A custom font is worthwhile if it supports the brand, but it comes at the cost of loading time.
Two families are almost always enough, often one will do.
3.2 / The typographic scale
Few sizes, clear proportions.
A scale derives all sizes from a base and a ratio, for example 16 px and 1.25. This creates sizes such as 13, 16, 20, 25, 31, and 39 px. Five to seven steps are enough for an entire product.
On mobile, the ratio becomes smaller so that large headings don't break across multiple lines. The values are saved as text styles or tokens, such as heading-1, body, and label.
Every greatness needs a reason.
3.3 / Text in components
Labels, lines, lengths.
In the interface, text is part of the user experience. Buttons need short, unambiguous verbs, labels belong above the field, and error messages should state the solution. Body text needs a line height of around 1.4 to 1.6, titles slightly less.
Allow space for longer text: German words are often considerably longer than English ones. Truncating with "…" is only acceptable for secondary information, never for actions or prices.
Text in the interface is UI.
Exercise
A typography system
Task: Define a typographic system for the Velowerk website.
STEP 1
Choose a font and justify your choice using three criteria.
STEP 2
Create a five to seven-point scale for desktop and mobile.
STEP 3
Name each level after its function, such as title, text and label.
STEP 4
Use this to set up a page with a title, text, form, and error message.
Evaluation: Where did you go off the scale, and was it really necessary?