Inter: The Complete Font Guide

Inter has become the defining typeface of the modern web. It is the default UI font in Figma, the body text of Linear, Vercel, and GitHub, and the typeface shipped inside products built by thousands of startups and design systems teams around the world. Understanding why Inter succeeded — and where its limits lie — is essential for any designer or developer working on digital interfaces today.

Table of Contents - History and Design Philosophy - Key Characteristics - Best Use Cases - When Not to Use Inter - Best Pairings for Inter - CSS Setup and Optimization Tips

History and Design Philosophy

Inter was created by Rasmus Andersson, a Swedish designer and engineer who spent years at Spotify and later at Figma. The project began around 2016 as a personal undertaking — Andersson needed a typeface specifically engineered for small-size legibility on computer monitors. Unlike most typefaces that start as print designs and get adapted for screens, Inter was conceived entirely in a digital context. Every spacing decision, every curve, every stroke width was calibrated for pixel grids and retina displays from the start.

The project was initially called "Interface" before being shortened to Inter. Andersson released it as open source in 2017, and it quickly gained traction among the developer and design communities. The font benefited enormously from its permissive SIL Open Font License, its GitHub presence, and the rapid word-of-mouth spread through Dribbble and design Twitter at a time when the design community was hungry for a neutral, functional sans-serif that was not locked behind a commercial license.

What makes Inter philosophically distinctive is its prioritization of function over personality. Andersson studied typefaces like Roboto and the older Helvetica Neue closely, aiming to create something that had the neutrality of a Swiss grotesque but with metrics optimized for the rendering environments of the 2010s and 2020s. The design draws from the neo-grotesque tradition but is not slavishly historical — it is a forward-looking sans-serif that acknowledges how text is actually consumed today: at small sizes, on backlit screens, often in dense data tables or compact navigation menus.

Inter became a variable font in its version 3.19 release (2020), and version 4.0 (released in 2023) represented a major overhaul. The v4 update rebuilt the typeface with more refined curves, improved optical sizes via the opsz axis, and a significantly more regular construction throughout the character set. The v4 release also introduced the distinction between "Inter" (the default, with slightly modified spacing optimized for UI) and "Inter Display," intended for large headline sizes where tighter tracking is appropriate.

One of the reasons Inter's evolution has been so well-received by the professional community is that Andersson has kept the project genuinely open — accepting contributions, publishing detailed changelogs, and explaining design decisions transparently on GitHub and in public design discussions. This unusual openness for a type project has attracted contributors who extended the character set, identified spacing inconsistencies, and improved script support in ways that a closed commercial typeface development process would not permit. The Latin Extended character set in Inter is among the most complete of any open-source sans-serif, covering languages from Icelandic to Romanian with full diacritic accuracy.

Key Characteristics

X-Height and Readability

Inter's most technically significant feature is its tall x-height relative to its cap height. The x-height sits at roughly 73% of the cap height — considerably higher than classical typefaces like Times New Roman (around 62%) and even higher than many grotesque sans-serifs. This means that at any given font size, the lowercase letters in Inter appear visually larger than those of a typeface with a more classical x-height ratio.

For screen reading, this is a deliberate advantage. When users read body text at 14–16px, or read labels at 11–12px, the tall lowercase letters ensure that characters like 'a', 'e', 'o', and 'g' remain clearly distinguishable. The open apertures — the openings in letters like 'c', 'e', and 's' — are generous, which prevents letters from appearing to close up at small sizes or under antialiasing pressure.

OpenType Features

Inter ships with an extensive set of OpenType features that differentiate it from many free alternatives. The font supports contextual alternates (calt), stylistic sets (ss01 through ss20), tabular numbers (tnum), and slashed zeroes (zero). The font-feature-settings CSS property gives designers precise control over these features.

Particularly notable are the disambiguation alternates. Inter's ss01 feature changes the lowercase 'l' to a form with a curved foot, distinguishing it clearly from uppercase 'I'. This is critical in passwords, API keys, and code contexts where confusing these characters causes real user errors. The ss02 feature changes the single-story 'a' to a double-story form for contexts where the more conventional letterform is expected.

Variable Font Axes

Inter v4's variable font implementation covers three axes: weight (wght) from 100 to 900, width (wdth) from 75 to 125, and optical size (opsz) from 14 to 32. The optical size axis is particularly valuable: at small optical sizes, Inter opens up its letter spacing and adjusts stroke contrast to improve legibility, while at larger optical sizes (used for display text), the font tightens spacing and refines curves for a more elegant appearance. Using this axis correctly means you can get different optical versions of the same font without loading additional files.

Best Use Cases

Inter is optimized for user interfaces, data-dense applications, and any context where text appears at small-to-medium sizes on screens. The fact that Figma — itself the dominant interface design tool — adopted Inter as its default UI font in 2021 created a powerful flywheel: designers working in Figma see Inter constantly, use it in mockups by default, and naturally carry it into production implementations. This default status has accelerated Inter's adoption beyond what its technical merits alone would explain, though those merits are real and substantial. It excels in product design — navigation items, data tables, form labels, buttons, input text, sidebars, and body copy in productivity applications. Its font-weight range of 100 to 900 provides the full spectrum needed to build a typographic hierarchy without reaching for a different typeface.

In design systems, Inter has become a near-universal choice precisely because of its neutrality. It imposes no strong personality on the products it serves. This can read as a limitation (see the section on when not to use Inter), but for enterprise software, developer tools, dashboards, and analytics products, this visual quietness is a feature. The typeface does not compete with the data or UI chrome; it serves as infrastructure.

Inter also performs exceptionally well in code editors and documentation sites. Its monospace companion, the aptly named "Inter Mono" (part of the extended Inter family), allows for a consistent typographic palette across prose and code in technical documentation. When used on sites built with documentation frameworks like Nextra or Mintlify, Inter provides the kind of clean legibility that technical readers expect without any stylistic friction.

For multilingual products, Inter's character support is broad — it covers all Latin-based scripts, Cyrillic, Greek, and supports Vietnamese with full diacritic mark placement. For truly global products, this coverage eliminates the font-fallback patchwork that plagues less complete typefaces.

When Not to Use Inter

Inter's strength — its studied neutrality — becomes a weakness when a design demands personality, warmth, or expressive differentiation. Brand-forward projects, lifestyle publications, restaurant websites, fashion e-commerce, and any context where the typeface is meant to communicate something beyond pure information will find Inter flat and characterless. There is nothing wrong with the font; it is simply engineered for a different purpose.

Editorial contexts suffer particularly when Inter is used for extended body text. At 16–18px with generous line height on a desktop, Inter is readable but lacks the warmth and rhythm of typefaces designed for long-form reading. Humanist sans-serifs like Source Sans 3 or DM Sans carry more organic variation in their strokes, which reduces reading fatigue over paragraphs and pages. For anything meant to be read in the way one reads an article or an essay — rather than scanning a UI — Inter is not the optimal choice.

Print design is another area where Inter shows its screen-only heritage. The metrics that make it excel on RGB displays — the tall x-height, the open apertures, the slightly heavier strokes — do not translate as gracefully to the different rendering of ink on paper. Print designers who pick up Inter because it is "that clean font from Figma" often find it looks generic or over-spaced at larger print sizes.

Logotype and headline display work at very large sizes — above 48px — is also suboptimal with Inter, unless you are using Inter Display (the v4 display variant). The default Inter is engineered for screen rendering at small sizes and its spacing is tuned for that context. At display sizes, the slightly generous spacing and the purely functional letterforms can look uninspiring against typefaces with more crafted detail and optical refinement for large-size use.

Best Pairings for Inter

Because Inter is so intentionally neutral, it pairs most successfully with typefaces that provide contrast — either in personality (more expressive serifs for headings), or in purpose (a distinct font for display while Inter handles all functional text).

Inter + A Serif for Headings

The most reliable pairing for editorial or marketing pages built on an Inter body is to use a serif or slab-serif for primary headings. Georgia, Playfair Display, or Freight Display create immediate contrast with Inter's mechanical precision. The classicism of the serif heading gives the page warmth and hierarchy, while Inter handles all functional copy without friction.

Inter + DM Sans or Nunito

For projects that need a more playful or approachable secondary face while keeping Inter as a system default, DM Sans provides a close geometric relative with slightly more personality. You might use Inter for body and navigation while using DM Sans for pull quotes or feature headlines. These two typefaces share enough structural DNA to remain harmonious without being identical.

Inter + Source Sans 3

When an editorial context demands two humanist sans-serifs — perhaps a news site that uses Inter for its functional UI and needs a softer reading font for article body text — Source Sans 3 is the natural companion. Source Sans 3 was designed by Paul Hunt at Adobe specifically for readability in extended text, and its warmth provides exactly the counterpoint that Inter's neutrality benefits from in longer reading contexts.

CSS Setup and Optimization Tips

Loading Inter from Google Fonts

The simplest integration path uses Google Fonts, which serves Inter from a CDN with proper compression and cache headers. Include the variable font version to cover the full weight range with a single file:

/* In your HTML <head> */
/* <link rel="preconnect" href="https://fonts.googleapis.com"> */
/* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"> */

body {
  font-family: 'Inter', sans-serif;
}

Self-Hosting for Performance

For production applications where font loading performance is critical, self-hosting Inter gives you full control over caching, compression, and subsetting. Download the variable font WOFF2 file from the Inter GitHub repository and host it on your CDN:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

The font-display: swap directive is essential for perceived performance — it tells the browser to render text immediately with a fallback font while Inter loads, then swap it in. This prevents invisible text during load (FOIT). For pages where layout shift is a concern, font-display: optional is worth considering, as it will only use the web font if it loads within the initial render window.

Enabling OpenType Features

To activate Inter's disambiguated alternates by default — which is highly recommended for any application handling user-generated content or technical strings:

body {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'calt' 1, 'liga' 1;
}

/* For contexts with codes, IDs, passwords */
.monospace-context,
code,
.api-key {
  font-feature-settings: 'calt' 1, 'ss01' 1, 'zero' 1;
}

/* Tabular numbers for data tables */
table,
.metric,
.stat {
  font-feature-settings: 'tnum' 1;
}

Using the Optical Size Axis

With Inter v4, you can use the font-optical-sizing CSS property or manually set the opsz axis through font-variation-settings:

/* Automatic optical sizing (browser uses font-size to determine opsz) */
body {
  font-optical-sizing: auto;
}

/* Manual control for specific contexts */
.display-heading {
  font-variation-settings: 'opsz' 32, 'wght' 700;
}

.label-small {
  font-variation-settings: 'opsz' 14, 'wght' 500;
}

The font-optical-sizing: auto declaration is supported in all modern browsers and tells the browser to automatically select the optical size variant based on the computed font-size. This single declaration meaningfully improves the rendering quality of Inter across all your size breakpoints without requiring manual configuration per element.

System Font Stack Fallback

For resilience in environments where Inter has not yet loaded, define a robust fallback stack that maintains similar metrics:

:root {
  --font-sans: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body {
  font-family: var(--font-sans);
}

Defining this as a CSS custom property under :root — following the font-family custom property pattern used by most modern design systems — makes it trivially easy to swap the font typeface system-wide in a single edit. The system fonts listed in the fallback stack (SF Pro Text on Apple, Segoe UI on Windows, Roboto on Chrome OS) all share broadly compatible metrics with Inter, minimizing layout shift during font load.

Inter's dominance in UI design is not accidental. It emerged from a real need, was built with serious technical craft, and has been continuously improved over nearly a decade. Understanding its architecture — the variable axes, the OpenType features, the optical size system — separates the designer who uses Inter as a default from the designer who uses it intentionally. For UI and product work, few typefaces compete with it. For everything else, knowing when to reach for something different is the other half of the skill.

See also: Choosing a Primary Font for Your Design System, Inter vs. Roboto, Best Google Fonts for Body Text