What is typography in UX?
Typography in UX is the choice and arrangement of typefaces, sizes, spacing and weights that make text readable and give an interface its character.
also calledtype design · typesetting · type system
Most of an interface is words, which means most of your design is typography whether you planned it that way or not. The right choices go unnoticed because the text simply reads easily. The wrong ones make people squint, skim past what matters, or quietly decide your product looks untrustworthy.
- Typography is most of what people see in an interface, because most of it is text.
- Build a clear hierarchy with a few distinct sizes and weights.
- Readability depends on size, line height, line length and contrast.
- Use one or two typefaces and test with real people and real devices.
The pieces of typography
A few terms cover most of what you will adjust:
- Typeface: the design family, such as a serif or a sans serif
- Size and weight: how big and how heavy the text is
- Line height: the vertical space between lines
- Line length: how many characters fit across a line
- Letter spacing: the space between characters
- Contrast: the difference between text and its background
Small changes add up. A bit more line height can turn a dense block into something people actually finish reading.
Hierarchy comes first
Type tells people what to read first. A clear scale of headings, subheadings and body text shows the structure of a page even before anyone reads a word. Most products need just a few levels, used consistently.
The common error is making everything slightly different: five sizes that are too close together to read as a hierarchy. Fewer, more distinct steps work better. Size is not the only lever; weight, color and spacing help too.
Readability and legibility
These two get mixed up. Legibility is about whether individual characters can be told apart, which depends on the typeface. Readability is about how comfortable longer text is, which depends on size, spacing, line length and contrast.
For body text on screens, go larger than you think. Sixteen pixels is a common starting point for web, and small gray text on a white background is a frequent accessibility failure. Aim for lines of roughly 50 to 75 characters, and test your contrast with a checker.
Choosing typefaces
You rarely need more than two. One typeface for everything is perfectly respectable, and a pair works when there is a clear reason, such as a distinct heading style. Pick faces that have several weights and cover the languages your users write, including accents and symbols.
Personality matters but comes second to readability. A fancy script might suit a wedding invitation and be a poor choice for a settings screen. Performance counts too: every extra font file is something the page has to download.
Typography and accessibility
Let people change text size without breaking the layout. Avoid text in images. Use enough contrast, and do not rely on color alone to carry meaning. Good typography is one of the most effective accessibility tools you have, and it helps everyone, not only people with low vision.
Typography: your questions, answered
What is typography in UX design?
It is how text is chosen and arranged in an interface, including typefaces, sizes, weights, spacing and contrast. Good typography makes content easy to read, shows hierarchy and supports a product's tone.
What font size should I use for body text on a website?
Sixteen pixels is a widely used baseline for body text on the web, and many designs go slightly larger. The right size depends on the typeface, audience and device, so test on real screens and allow users to zoom.
How many fonts should a website use?
One or two is usually enough. Using more tends to look messy and slows loading. Create variety with weight, size and color within one family instead of adding new typefaces.
What is the best line length for readability?
Around 50 to 75 characters per line is a common guideline for body text. Lines that are much longer make it hard to find the start of the next line, and very short lines break the reading rhythm.
Serif or sans serif for screens?
Both work. Modern screens render serifs well, so the choice mostly depends on tone and the specific typeface. Focus on clear letterforms, good spacing and contrast rather than a strict rule.
More quick answers
What is the difference between a font and a typeface?
A typeface is the design family, such as a named serif. A font is one specific style or size of it, like bold at 16 pixels. In everyday talk, people mix them up.
What is typographic hierarchy?
It is the use of size, weight, color and spacing to show which text matters most and how content is organized.
Why does contrast matter for text?
Low contrast makes text hard to read for many people, especially in bright light or with low vision. Check text against accessibility guidelines.
What is a type scale?
A type scale is a set of predefined sizes, often based on a ratio, that keeps headings and body text consistent across a product.
How does typography relate to brand?
Typefaces carry personality, so they are a core part of brand expression, as long as the choices remain readable.
Visual design in UX is the craft of shaping how a product looks, using color, type, imagery, layout and spacing to make it clear, usable and appealing.
Accessibility in UX means designing products so people with disabilities can perceive, operate and understand them, with or without assistive technology.
A style guide in UX is a reference document that sets the visual and writing rules for a product, such as colors, fonts, spacing and tone of voice.
White space in UX is the empty area around and between interface elements, which gives content room to breathe and makes a screen easier to read and scan.
Brand identity in UX is the set of visual, verbal and behavioral traits that make a product recognizable and consistent on every screen.
A grid system in UX is an invisible framework of columns, gutters and margins that helps designers align and space elements consistently across a layout.
Found this useful? A GitHub star helps other designers find it.