The Interface font family

Last Updated on July 10, 2026 by Editorial Team

Interface is a freshly launched font family, created especially for high legibility on computer screens.

Features

• Interface is a free and open source font family licensed under SIL Open Font License 1.1.
• Works great for English text (Latin characters), and pretty well for latin diacritics (Latin Extended) and Cyrillic. Contributions are welcomed.

Desktop Use

• Download and install. You’re free to bundle copies of Interface with your software, even commercial.

Web Use

• You can self-host the font, or include this in your css file:

  @import url('https://rsms.me/interface/interface.css');

Interface earns its name honestly. The specimen shown here is not a poem or a paragraph of lorem ipsum, it is a wall of UI vocabulary: contact data, business, shop preview, resize to fit, feedback day, reset month, minute grids, cursor app.

That word choice is the whole pitch. This typeface was drawn to sit inside software, not to decorate a poster, and the preview leans into that by showing exactly the kind of copy you would actually set in a dashboard, a settings panel, or a SaaS product.

Look at the top row of small text and you get a second clue about its purpose. Numbers, percentages, pixel values, ppi counts, temperatures, currency symbols, a clock time, hex codes, file paths, even an email address in angle brackets.

These are the exact strings that break cheaper fonts: figures that don’t align, symbols that look like an afterthought, punctuation that crowds the letters around it. Interface is clearly being tested against that reality, which is precisely the reality of building product interfaces, admin tools, and data-heavy screens.

The three “Ag Ag” pairs stacked in the corner tell you the family spans at least a light-to-bold range with matching italics, letting you build real hierarchy without switching typefaces. That range is what makes a UI font usable in practice: a light weight for secondary labels and captions, a regular weight for body and form text, and a bold for buttons, headers, or emphasized states.

Reading the Large Specimen Block

The oversized word column on the right is the most telling part of the image. It sets the font at a size and weight you would actually use for a page heading or a hero statement inside an app, not a display poster.

The letterforms read as a grotesque sans with a tall x-height and open counters, which is what keeps words like “Zenith” and “Cursor” legible even when they are tightly stacked with almost no line gap.

Two words in that block, “Fit” and “Reset,” are highlighted in solid color blocks, green and yellow, mimicking button or tag treatments. That is a strong hint at how the letterforms behave when reversed out of a colored fill or dropped into a badge, which is exactly the context they will meet inside a real product: status pills, toggle labels, call-to-action buttons.

Below the black “interface” wordmark panel sits a chunk of straightforward body copy explaining what a user interface is. That paragraph does double duty as a small-size legibility test, showing how the font holds up in multi-line text at a size closer to what you would use for descriptions, tooltips, or documentation.

The strokes stay even and the spacing between letters doesn’t collapse, which matters more for a screen font than for a display face, since most of an interface’s text lives at 12 to 16 pixels rather than 60.

Given all that, this family fits naturally into product design work: dashboards, admin consoles, mobile app screens, onboarding flows, marketing pages for software products, and documentation sites. It also works for anything that leans on data tables or figures, since the numeral support on show here, including currency symbols and percentages, means spreadsheets, pricing tables, and analytics widgets will render cleanly.

If you’re designing a portfolio case study for a SaaS product, this is a sensible typeface to actually build the mockup screens in, rather than reaching for a generic system font.

When you bring Interface into your own files, start by setting your text hierarchy with the weight range rather than changing point size alone. A light weight at the same size as a regular weight can serve as a visual demotion for secondary information, which keeps your interface mockups feeling like a real design system instead of a single flat block of text.

For buttons and tags, try reversing the bold weight out of a solid fill the way the preview does with “Fit” and “Reset,” and keep the horizontal padding generous since the letterforms are fairly open.

For dense tables or figures, check whether your numerals are lining up in columns; the specimen’s numeral-heavy first line suggests the figures were built with tabular alignment in mind, so pricing tables and stat blocks should sit neatly without manual kerning.

Pair Interface with a monospace font for any code snippets or technical values in the same layout, since the contrast between a humanist grotesque and a mono face is a common and effective convention in product and developer-facing design.

If you need an editorial contrast for marketing pages built around this UI, a single serif headline face alongside Interface’s body text can keep a product site from feeling too utilitarian, while still letting the interface screens themselves stay purely in Interface for consistency.