In an interface, typography is not decoration: it is the very structure of the information. Headings, labels, values, notes and error messages are all text, and the way they are set tells users what matters, what can be clicked and what can wait. Confusing typography produces a confusing interface, even with perfect colors and icons.
Choosing the typeface
Interfaces almost always use sans-serif typefaces, designed to stay crisp at small sizes. Some concrete selection criteria:
- clearly distinguishable letters: «Il1», «O0», «rn» and «m» must look clearly different, especially if the interface shows codes, generated passwords or usernames;
- a generous x-height: tall lowercase letters improve reading at small sizes;
- enough weights: at least regular, medium and bold, to build hierarchy without resorting to other typefaces;
- suitable figures: tables and amounts need tabular figures, all the same width, so columns stay aligned;
- language coverage: accented letters, currency symbols, possibly other scripts if the product is international.
System fonts, those already present in the operating system, are a very practical choice: they load instantly, are familiar to users and are optimized for the screen they are shown on.
One or two typefaces, no more
A single family with several weights is enough for the vast majority of interfaces. A second typeface, for example a serif for headings or a monospace for codes and technical data, can add personality or function. Beyond two, the result tends to look messy, and each addition weighs on loading.
A type scale
Rather than picking random sizes for every screen, it pays to define a scale: a limited set of sizes used everywhere. Many systems start from a base size and multiply by a constant ratio.
| Level | Use | Example (16 px base, 1.25 ratio) |
|---|---|---|
| Caption | Notes, metadata | 13 px |
| Body | Text, labels | 16 px |
| Subheading | Section titles | 20 px |
| Heading | Page title | 25 px |
| Display | High-impact headings | 31 px |
Five or six levels are generally enough. The benefit is twofold: visual consistency across screens and faster decisions for designers and developers, who no longer have to wonder whether a heading should be 21 or 22 pixels.
In a dense interface, such as an admin panel, the ratio between levels can be smaller, around 1.125 or 1.2; an editorial site can afford more contrast.
Building hierarchy
Visual hierarchy is built by combining a few tools:
- size: the most obvious, but easy to overuse;
- weight: bold at normal size can set a label apart without making it bigger;
- color and tone: secondary text in dark grey, as long as contrast is sufficient, reads as less important;
- space: an element surrounded by empty space draws more attention than one squeezed between others;
- position: what sits at the top left is read first in Western languages.
A common mistake is using every tool at once for each important element. If everything is big, bold and colored, nothing stands out. It often works better to reduce the emphasis of secondary elements than to increase that of the main ones.
Labels and values
In forms, product cards and data panels, the relationship between label and value is decisive. When users are looking for a piece of data, the value is the main information and the label is the context. In an order summary, for example, «Total» can be small and dark grey, while «€84.50» is larger and bold. Reversing this relationship, with loud labels and anonymous values, forces people to read everything to find what they need.
Uppercase and italics
All caps works for very short labels, such as a word above a group of fields, ideally with slight letter spacing. For whole sentences it is slower to read, because words lose their characteristic shape. On screen, italics at small sizes can look less crisp: keep them for occasional emphasis and quotes.
Check on the real device
Interface typography should always be tested on the devices it will be used on. A size that looks fine on a desktop monitor can be tiny on a phone held at arm's length, and thin weights render very differently on a high-density screen and a cheaper one. In my work I prefer to avoid the lightest weights for functional text: they look elegant in presentations but become fragile in everyday use.
In short
- The right interface typeface has distinguishable letters, enough weights and tabular figures.
- One or two families are enough; system fonts are an excellent base.
- A scale of five or six sizes ensures consistency and quick decisions.
- Hierarchy comes from balancing size, weight, tone and space, not from piling them up.
