Inter Typography

Historical Context

Inter started as a side project by Rasmus Andersson while he was at Figma — a typeface designed explicitly for computer screens. Not print adapted for digital. Not a geometric exercise. A workhorse built from pixel-level constraints upward. The tall x-height, open apertures, and tabular number sets weren't aesthetic choices — they were functional ones. Every decision optimized for legibility at small sizes on low-density displays. Then something happened. Figma shipped Inter as its default. Vercel adopted it. Next.js made it a one-line import. Suddenly Inter wasn't just a good UI font — it was THE UI font. The new Helvetica of interfaces. You see it on every SaaS landing page, every developer tool, every startup that hasn't thought about typography yet. Is that a problem? Honestly, not really. Inter is genuinely excellent at what it does. The issue isn't the typeface — it's the laziness of reaching for it without considering alternatives. When everything looks the same, nothing has personality. Inter gives you a perfect neutral baseline. Whether you stay there is a design decision, not a default.

When to Use

Inter earns its place in product UI where readability at 13-16px matters more than brand expression. Dense data tables, documentation sites, developer tools, admin panels — anywhere text is consumed rather than admired. It's the right call when you need a type system that disappears, letting content do the work. Skip it when your product needs typographic personality to differentiate. A marketing site in Inter says nothing about who you are.

Design Principles

• Set font-feature-settings with 'cv01', 'cv02' enabled — Inter's alternates exist for a reason, use them to avoid the generic look
• Pair with a monospace that matches its x-height (JetBrains Mono, Fira Code) for developer-facing products — mismatched metrics break visual rhythm
• Use Inter Display for headings above 20px — the standard optical size loses crispness when scaled up, Display cuts tighter and reads sharper
• Stick to medium (500) and semibold (600) for hierarchy — Inter's bold is heavier than you think and muddies dense interfaces
• Let the tracking breathe at small sizes (0.01-0.02em below 14px) but tighten at display sizes — Inter's default spacing optimizes for body, not headlines

Technical Specs