Picking a type scale for product UI
Marketing pages can afford dramatic typography. Dense product screens need a scale that is calm, legible and easy to reuse. Here is how to build one.
Typography is most of what users actually look at in an interface. Get the type scale right and even a plain layout feels considered; get it wrong and no amount of colour or illustration will save it. Product UI has particular needs: lots of small text, dense tables, labels and data, and very few moments for huge display headlines.
Start from the body size
Choose your default body size first, usually 14 to 16 pixels for desktop applications and 16 pixels or more for content-heavy or mobile interfaces. Everything else is defined relative to it. If your users read long passages, err larger; if they scan dense dashboards, 14 pixels with comfortable line height can work well.
Modular scales, gently
A modular scale multiplies the base size by a fixed ratio to produce each step. Ratios such as 1.125 (major second) or 1.2 (minor third) suit product UI, giving distinct but not dramatic steps: 14, 16, 18, 20, 24, 28, 32. Larger ratios like 1.333 or 1.5 are better saved for editorial or marketing sites, where headlines need to shout. Round the results to whole pixels and do not be afraid to adjust a step that looks wrong.
Fewer sizes than you think
Most products need six to eight text styles: a caption or overline, a small body, a default body, a large body or lead, and three or four heading levels. Every extra size is another decision for every designer on the team. Constraint is a feature.
Line height and letter spacing
Body text reads best with a line height of roughly 1.4 to 1.6 times the font size. Headings can be tighter, around 1.1 to 1.3, because large type looks loose with generous leading. Large headings often benefit from slightly negative letter spacing, while tiny uppercase labels need a little positive tracking to stay legible.
Choosing typefaces
For product UI, choose a typeface with a large x-height, open apertures, clear distinctions between similar characters such as 1, l and I, and tabular figures for numbers in tables. Many excellent open-source families meet these criteria. One well-chosen family with several weights is often all you need; add a monospace face for code or IDs if your product shows them.
Make it responsive
Headings can scale down on small screens, while body text should stay put or even get slightly larger on mobile. CSS clamp() lets a heading size flow smoothly between a minimum and maximum based on viewport width, avoiding awkward jumps at breakpoints.
Document it as tokens
Finally, store each text style as a token or style with a semantic name — text.body.md, text.heading.lg — rather than a raw size. When you later tweak the scale, every screen updates together.
