The Typography Problem: Why Inter Is Killing Your Brand

Open the dev tools on the last five AI-built sites you visited. Four of them declare font-family: Inter, system-ui, sans-serif somewhere near the top of the cascade. The fifth uses Geist, which is just Inter with a haircut. That's the problem: Inter is a genuinely great typeface, so safe and so readable that every AI coding tool reaches for it by reflex. The result is a web where half the sites share one typographic voice, and your brand's first impression becomes "we look like everyone else."

How Inter Became the AI Default

Inter was designed by Rasmus Andersson specifically for computer screens. It's clean, neutral, legible at 13px, and free on Google Fonts. Those qualities made it the obvious default for design systems, component libraries, and CSS frameworks.

Tailwind's font-sans resolves to a system stack, but every Tailwind tutorial and starter loads Inter on top of it. next/font/google makes Inter() a one-line import. Vercel's own marketing site ran on Inter for years; the Tailwind docs still do. So when a model learns to code by reading millions of repos that all import the same font, it internalizes Inter as *the* font, not *a* font. Ask v0, Lovable, or Cursor to build a landing page and you get Inter unless you say otherwise. This is one of the core mechanisms behind why every AI-generated website looks the same.

# Audit how monolithic your type stack is
sailop scan ./src --dimension typography --verbose
# Typography slop score: 78/100 (high = generic)
# Findings:
#   [HIGH]   Inter/system-ui is the only font family
#   [HIGH]   No serif or display contrast font
#   [MEDIUM] Uniform font-weight: 700 across all headings

The successor doesn't help. Vercel's Geist now ships as the default in v0 and the Next.js docs, and it carries the exact same fingerprint problem, just newer. We unpack that shift in Geist: the new Inter, the AI font fingerprint of 2026.

The Brand Erasure Effect

Typography carries a large share of a brand's visual identity, arguably more than color, because readers process letterforms before they consciously register hue. When your headings, body, and buttons all run on Inter, you hand most of that differentiation away for free.

Hold four headlines side by side, all set in the same words:

• Inter: clean, neutral, invisible. Could be any site.
• Bitter: warm, slab-serif, authoritative. Has a posture.
• Playfair Display: high-contrast, editorial, dressed up. Makes a statement.
• Space Mono: technical, deliberate, slightly off. Signals "engineer wrote this."

Font choice isn't decoration, it's tone of voice. Inter communicates nothing, which is precisely what an AI default communicates. Typography is one of the 7 dimensions of AI slop a design linter can actually score.

The Serif Revival

The single fastest way to break out of AI typography is to set your display text in a serif. Models almost never emit serif declarations on their own, because the training data is overwhelmingly sans. So a serif headline is, mechanically, the opposite of the average prediction.

Why it works:

• Statistical rarity. Sans is the model's default guess, so serif reads as a human decision the moment it lands.
• Built-in contrast. A serif headline over a sans body creates typographic tension that *feels* art-directed without any extra effort.
• Cultural cargo. Serifs carry associations sans-serif can't fake: publishing, authority, age, craft.
• Memory. At 56px, the bracketed serifs on a Fraunces or Playfair headline leave a shape that sticks; Inter at 56px is just bigger Inter.

10 Font Pairings That Beat Inter

Ten pairings that score low (good) on a typography audit. Each sets a display face against a body face. For the full build, see the guide to a unique landing page that doesn't look AI-generated.

1. Bitter + Karla Warm slab serif over humanist sans. Friendly but authoritative.

--f-display: 'Bitter', Georgia, serif;
--f-body: 'Karla', system-ui, sans-serif;

2. Playfair Display + DM Sans High-contrast serif over geometric sans. Editorial luxury.

--f-display: 'Playfair Display', Georgia, serif;
--f-body: 'DM Sans', system-ui, sans-serif;

3. Cormorant Garamond + Work Sans Refined oldstyle serif over clean geometric sans. Elegant clarity.

--f-display: 'Cormorant Garamond', Georgia, serif;
--f-body: 'Work Sans', system-ui, sans-serif;

4. Bricolage Grotesque + Raleway Quirky grotesque over thin-weight sans. Playful and modern.

--f-display: 'Bricolage Grotesque', system-ui, sans-serif;
--f-body: 'Raleway', system-ui, sans-serif;

5. Space Mono + Barlow Monospace display over clean sans body. Technical authority.

--f-display: 'Space Mono', 'Courier New', monospace;
--f-body: 'Barlow', system-ui, sans-serif;

6. Fraunces + Source Sans 3 — soft, wonky serif over a reliable sans. Approachable expertise. 7. Instrument Serif + Instrument Sans — matched serif/sans superfamily. Cohesive but not flat. 8. Newsreader + Public Sans — reading-optimized serif over neutral sans. Content-first. 9. Outfit + Crimson Pro — geometric sans display over classical serif *body*. The inverted pairing; rare enough that almost no AI produces it. 10. Syne + Libre Franklin — experimental grotesque over traditional sans. Loud personality.

Beyond Font Choice: The Settings AI Never Touches

Picking the pair is step one. The defaults you change afterward are what separate "designed" from "generated." These four are the tells, the same ones a CSS audit catches in seconds.

Letter spacing

AI ships headings at default tracking. Display sizes need it pulled tighter; body needs it left alone.

h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.02em; }
h3 { letter-spacing: -0.01em; }
body { letter-spacing: normal; }

Line-height variation

AI reuses one value everywhere, usually 1.5. Real type tightens headings and opens up body.

h1 { line-height: 1.05; }
h2 { line-height: 1.15; }
h3 { line-height: 1.2;  }
body { line-height: 1.62; }

Weight distribution

AI sets font-weight: 700 on every heading. A weight ramp reads as intentional.

h1 { font-weight: 800; } /* primary heading */
h2 { font-weight: 700; } /* section heads   */
h3 { font-weight: 600; } /* sub-sections     */

Text wrap

Two one-line properties that AI virtually never emits, and that instantly upgrade your rag:

h1, h2, h3 { text-wrap: balance; } /* even line lengths in headings */
p, li, dd  { text-wrap: pretty;  } /* no orphans in body copy       */

Measuring Your Typography

A typography linter checks the same six things by hand you'd otherwise eyeball:

• Font diversity (serif + sans pairing, not Inter-only)
• Weight ramp across heading levels
• Negative tracking on display text
• Distinct line-heights for headings vs. body
• text-wrap usage
• Font preconnect for load performance

sailop scan ./src --dimension typography
# Typography slop score: 15/100 (low = distinct, good)
# All checks passing:
#   Serif display font detected (Fraunces)
#   Sans body font detected (Source Sans 3)
#   Negative letter-spacing on headings
#   Variable line-height (1.05 / 1.62)
#   text-wrap: balance on headings
#   <link rel="preconnect"> present

Lower is better here: the score measures how generic the type is, so 78 was the Inter-only failure and 15 is the pair above.

The Bottom Line

Inter is a tool, and a good one. But when it's the *only* tool, when every AI-generated site reaches for it by default, it stops being a choice and becomes the absence of one. Typography is where your brand actually lives. Don't let a model's most likely next token speak for you. For the full anti-slop workflow across all seven dimensions, read the complete guide to anti-AI design.

Generate a unique type system with sailop generate, or browse pairings at sailop.com.