Back to Explore
Modern Classic|sans
minimalprofessionaltechclean

Inter

Interface Standard

The typeface of the modern web

Inter was built for screens, designed for interfaces, and optimized for every size. It's become the default choice for a reason. Reliable, readable, refined.

The industry standard. Inter's comprehensive character set and optical sizing make it perfect for any digital interface.

saas uidashboardcorporate

Typefaces Used

Primarysans

Inter

The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Designed by Rasmus Andersson

Released 2016

Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900

Recommended Scale

H1

Headline One

Inter · 700 · 46px · 1.1

H2

Headline Two

Inter · 600 · 30px · 1.15

H3

Headline Three

Inter · 600 · 22px · 1.25

Body

Body text for paragraphs and long-form content.

Inter · 400 · 16px · 1.7

Caption

Caption and metadata text

Inter · 400 · 14px · 1.5

In Context

Design Essay · 12 min read

Interface Standard

The typeface of the modern web

Inter was built for screens, designed for interfaces, and optimized for every size. It's become the default choice for a reason. Reliable, readable, refined.

“Good design is invisible.”

Jared Spool

Developer Exports

Google Fonts
<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:wght@400;600;700&display=swap" rel="stylesheet">
CSS
h1 {
  font-family: "Inter", sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-family: "Inter", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
}

h3 {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.body-text {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.caption {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
Tailwind Config
// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        inter: [""Inter"", "sans-serif"],
      },
      fontSize: {
        "h1": ["46px", { lineHeight: "1.1", fontWeight: "700" }],
        "h2": ["30px", { lineHeight: "1.15", fontWeight: "600" }],
        "h3": ["22px", { lineHeight: "1.25", fontWeight: "600" }],
        "body": ["16px", { lineHeight: "1.7", fontWeight: "400" }],
        "caption": ["14px", { lineHeight: "1.5", fontWeight: "400" }],
      },
    },
  },
};

export default config;

AI-Ready Exports

Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.

System Description

Explain this type system to an AI

Use this typographic system:

Headings:
  Inter, 700 weight
  Used for H1–H3
  The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Body:
  Inter, 400 weight
  Used for paragraphs and UI
  The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Tone:
  minimal, professional, tech
  The industry standard. Inter's comprehensive character set and optical sizing make it perfect for any digital interface.

Use this scale:
  H1 — 46px / 1.1 / -0.02em
  H2 — 30px / 1.15
  H3 — 22px / 1.25
  Body — 16px / 1.7
  Caption — 14px / 1.5

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Inter — 700 — 46px — line-height 1.1 — letter-spacing -0.02em
H2 — Inter — 600 — 30px — line-height 1.15
H3 — Inter — 600 — 22px — line-height 1.25
Body — Inter — 400 — 16px — line-height 1.7
Caption — Inter — 400 — 14px — line-height 1.5

Headings should feel minimal and professional.
Body text should feel readable and modern.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.