Licenses

Choosing a Typeface for a Product Interface

· 3 min read

Choosing type for an interface is a different job from choosing it for a brand. Nobody admires an interface font; they read four hundred labels a day in it without noticing. What that rules out is most of what a specimen shows you, and what it rules in is a short list of properties you can actually check.

The characters that decide it

An interface is full of identifiers, order numbers, versions and codes, and it is read in a hurry. The lowercase l, the capital I and the digit 1 have to be distinguishable from each other, and the zero from a capital O. A face that fails this is fine for a headline and a liability in a settings screen.

Test it with a string rather than the alphabet: Il1 O0 rn m contains every confusable pair including the r-n that reads as an m at small sizes. Paste it into the preview box on any font page here at the size you actually ship.

Numbers that line up

Anything with a table, a price column or a live counter needs tabular figures — numerals of equal width, so a value changing from 1 to 8 does not shift the column. Many families include them as an OpenType feature rather than as the default, switched on with font-variant-numeric.

The related trap is old-style figures, which hang below the baseline like lowercase letters. They are beautiful in running text and wrong in a data table.

It has to survive 13 pixels

Interface text is smaller than anything else you set. What holds up at that size is a large lowercase relative to the capitals, open apertures, and moderate contrast between thick and thin strokes. What falls apart is high contrast and tight apertures, which is most of what makes a face interesting at display size.

This is why so many interfaces converge on the same handful of faces. It is not a failure of imagination; the constraints are narrow and they point the same way.

Enough weights, in one file

An interface needs a hierarchy — label, body, emphasis, heading — which means at least three weights, and a variable font carries all of them in one file at less than the size of three static ones. It also lets you use a weight between the named ones when 500 is right and 400 is thin. See the variable font post.

The faces that meet all of it

Inter was drawn for this exact problem and is the default answer for good reasons: a tall lowercase, disambiguated characters, tabular figures, and an optical size axis. IBM Plex Sans is the option when an interface should not look like every other interface — it is engineered rather than neutral, and it comes with a matching serif and mono for documentation. Public Sans was made for US government services, which is a brief with legibility requirements attached. Manrope is the same job with more personality, at some cost in neutrality.

FamilyVariable downloadStatic download
Inter957 KB2 files9.1 MB54 files
IBM Plex Sans637 KB2 files4.8 MB42 files
Public Sans109 KB2 files588 KB18 files
Manrope69 KB1 file292 KB7 files
Work Sans341 KB2 files1.5 MB18 files
Measured from the font files in this archive.

And the boring part that matters most

Whatever you choose, serve it as a WOFF2 from your own domain, cut to the alphabets you actually ship. Interface text is the first thing a user sees and a font that arrives late is a screen full of fallback that reflows a moment later. How much fonts cost your page speed has the numbers.

Questions

What is the best font for a UI?
Inter is the default answer and a well-founded one: it was drawn for interfaces, has a tall lowercase, distinguishes l from I from 1, and includes tabular figures. IBM Plex Sans is the alternative when an interface should not look like every other interface. The choice matters less than checking the confusable characters at the size you actually ship.
What are tabular figures and do I need them?
Numerals drawn to equal width, so a column of numbers stays aligned and a live value changing from 1 to 8 does not shift the layout. You need them anywhere numbers sit in a column or update in place. Many families include them as an OpenType feature rather than by default, switched on with font-variant-numeric.
Should an interface use a variable font?
Usually yes. An interface needs at least three weights for its hierarchy, and one variable file carries the whole range at less than the size of three static files — plus it lets you use a weight between the named ones. The exception is an interface that genuinely uses only one weight.
How do I test a font for interface use?
Set the string "Il1 O0 rn m" at the size you actually ship, not at specimen size. That covers every confusable pair including r-n, which reads as an m when the size gets small. Then set a real screen of labels rather than a sentence, because that is what people will read.

Fonts in this post

  • Inter

    Sans-serif · Rasmus Andersson · Variable

  • Public Sans

    Sans-serif · Dan Williams, Pablo Impallari · Variable

  • Manrope

    Sans-serif · Mikhail Sharanda · Variable