Typography That Sells

Typography That Sells

Most generic product design does not fail because the layout is bad. It fails because the typography has no point of view.

This skill exists to fix that.

The difference between a generic SaaS interface and a premium, venture-backed, deeply-considered product is often not color, not motion, not gradients, and not illustration. It is typography. Premium sites use type to create authority, mood, tension, and memory. The typography does not just carry information. It carries identity.

This skill should be used to make a design feel authored rather than assembled.

Its job is not to make typography more decorative. Its job is to make typography more inevitable.

Extracted from patterns seen across Cal.com, Hex, Antimetal, Duna, Incident, Reducto, Shade, AngelList, Cohere, Outseta, Amplemarket, and Autosend.

Core philosophy

Typography is tone made visible.

It is rhythm. It is control. It is restraint. It is emotion without theatrics.

Approach typography the way a great producer approaches sound:

• remove what is unnecessary
• amplify what is emotionally true
• create contrast with restraint
• let one strong move carry the piece
• leave enough silence for the work to resonate

Do not ask:

• How do I make this look more stylish?

Ask:

• What is the typographic mood of this page?
• What is missing: authority, tension, elegance, clarity, intimacy, sharpness?
• What is too loud?
• What is too safe?
• What can be removed so the typography has more weight?
• What single move would make this page feel authored?

Premium typography does not come from adding more. It usually comes from choosing less, but choosing better.

What this skill is for

Invoke this skill when:

• the site uses Inter or system sans for both display and body
• headings feel flat, default, or template-like
• typography feels competent but emotionally anonymous
• the page looks polished but not memorable
• display type is large but badly spaced
• body text is too heavy, too neutral, or too conventional
• the design feels like “good SaaS” instead of “real taste”
• the user says the work feels generic, unrefined, unpolished, flat, or AI-generated

What this skill must do

This skill should not simply suggest fonts.

It should:

1. diagnose why the typography feels generic
2. name what quality is missing
3. define the intended mood
4. identify the fewest changes needed to transform the design
5. explain what should be removed, not just what should be added
6. recommend exact implementation moves
7. preserve restraint

The output should feel like a creative director making typography more inevitable, not a style guide generator dumping options.

The typographic moods

Before changing anything, identify the dominant mood of the page.

Choose one primary direction:

• precise
• editorial
• cinematic
• intellectual
• luxurious
• calm
• institutional
• futuristic
• intimate
• confrontational

Then commit.

Do not mix moods casually. Generic designs are often emotionally indecisive. They use safe fonts, safe hierarchy, safe spacing, and safe contrast, and end up saying nothing clearly.

Each page should feel like it knows what it is.

The decision filter

Before applying any change, test it against these five questions.

1. Does this make the page feel more inevitable?

The strongest typographic moves feel obvious after they are made. If a move feels trendy, ornamental, or too self-aware, it is probably weaker than a simpler one.

2. Does this increase tension in the right place?

Good typography uses controlled tension:

• tighter display tracking
• lighter body against stronger headlines
• wide-tracked mono labels against dense sans copy
• a single serif interruption inside a disciplined system

Tension creates feeling. Too many competing tensions create noise.

3. Does this remove genericness?

The page needs at least one real typographic point of view. That could be:

• a distinctive display face
• unusually disciplined tracking
• a weight strategy with real contrast
• mono used as a structural voice
• a serif accent used sparingly and precisely

Without one of these, the page usually remains forgettable.

4. Is this gesture earned?

Do not add details because they are “designerly.” Italic accents, mono labels, alternate glyphs, and expressive pairings should feel earned by the brand, the mood, and the page.

5. Is there enough silence?

Typography needs restraint to land. If every element is emphasized, none of them matter.

Rules of restraint

• One heroic move is better than five clever ones
• If the display font has character, everything around it should get quieter
• If the body text is elegant and light, do not over-style controls and labels
• Mono is a tool, not confetti
• Serif accents should feel like a whisper, not a costume
• Tight tracking should create authority, not damage readability
• If the UI is visually complex, typography should simplify
• If the UI is sparse, typography can carry more personality
• Premium does not mean louder
• Editorial does not mean chaotic
• Luxury does not mean serif everywhere
• Taste is often subtraction

Response model for this skill

When invoked, respond in this order:

1. Current problem

Describe why the typography is failing in plain language.

Examples:

• The page is visually competent but emotionally anonymous.
• The hierarchy exists, but the type has no tension or signature.
• Everything is readable, but nothing feels authored.
• The typography is too safe for the ambition of the product.

2. Missing quality

Name the exact thing missing:

• authority
• elegance
• sharpness
• warmth
• editorial tension
• visual rhythm
• conviction
• softness
• contrast

3. Emotional direction

Define the typographic mood the page should move toward.

Example:

• Move this from “default SaaS utility” to “precise editorial software.”
• Move this from “safe tech startup” to “calm premium infrastructure.”
• Move this from “template-looking landing page” to “high-conviction product brand.”

4. Typographic strategy

Recommend the minimum set of changes needed.

This usually includes:

• display/body split
• tracking correction
• weight redistribution
• line-height tightening
• eyebrow treatment
• optional accent move

5. Exact implementation moves

Provide specific settings, example pairings, and code when useful.

6. What to avoid

Name the overcorrections that would ruin it.

7. Optional taste move

Give one elevated move only if the design can support it.

The 8 core rules

Rule 1: Display font must have a different voice from the body font

Premium typography usually separates display from body. The display carries identity. The body carries clarity.

Using the same neutral sans everywhere is the fastest way to make a design feel generic.

Proven pairings from case studies:

Minimum viable pairing if bespoke fonts are not available:

--font-display: 'PP Neue Montreal', 'Söhne', 'Geist', 'Instrument Serif', 'Fraunces', system-ui, sans-serif;
--font-body: 'Inter', 'Geist', system-ui, -apple-system, sans-serif;
--font-mono: 'Geist Mono', 'Fragment Mono', 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
--font-serif-accent: 'PP Editorial New', 'Instrument Serif', 'Fraunces', serif;

Anti-pattern:

font-family: Inter, sans-serif;

on everything.

Rule 2: Display text needs tighter tracking than most people think

Large text without tracking adjustment looks blunt and unfinished.

At 48px and above, default tracking is rarely enough.

Observed tracking patterns:

h1-80px { letter-spacing: -0.02em; }
h1-72px { letter-spacing: -0.04em; }
h1-72px { letter-spacing: -0.06em; }
h2-88-160px { letter-spacing: -0.02em; }

h1-46px { letter-spacing: -0.46px; }
h1-44px { letter-spacing: -1.32px; }
h2-40px { letter-spacing: -0.4px; }

Rule of thumb:

• start at -0.02em for display
• push toward -0.03em or -0.04em at larger sizes
• use px-based tracking when you want more foundry-like precision

Anti-patterns:

• leaving display text at default tracking
• relying only on tracking-tight
• making text huge without tightening it

Rule 3: Display line-height should be tight

Large type needs compression to feel composed.

Premium sites typically keep display line-height at or below 1.1.

Examples:

h1 { line-height: 1; }
h1 { line-height: 0.9; }
h1 { line-height: 1.04; }
h1 { line-height: 1.1; }

Body text gets more room:

body { line-height: 1.4-1.55; }

Anti-pattern:

h1 { line-height: 1.5; }

Rule 4: Use weight contrast with intention

Most mediocre typography uses the wrong contrast:

• body too heavy
• headings too blunt
• everything crowded in the 400–700 range with no nuance

Premium systems often use lighter body copy than expected and more disciplined display weights.

Examples:

h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
}

body, p {
  font-family: var(--font-body);
  font-weight: 300;
}

Variable fonts allow more exact control:

--wght-body: 320;
--wght-button: 450;
--wght-label: 480;
--wght-display: 560;

Use the axis if the font supports it.

Rule 5: Mono is for structure, labels, and signal

Mono fonts are not just for code. They are excellent for:

• section eyebrows
• status labels
• metadata
• chips
• timestamps
• technical framing
• subtle system voice

Eyebrow pattern:

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

Mono creates a useful contrast against smoother sans body copy.

Anti-pattern: Using mono everywhere until the whole design feels gimmicky or over-art-directed.

Rule 6: A serif italic accent can make the whole page feel authored

A single serif interruption inside a sans system can add humanity, editorial quality, and intention.

This works best when it is sparse.

Example:

<p>
  A notebook for the next era of
  <em class="accent-italic">intelligence</em>.
</p>

.accent-italic {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
}

Best use cases:

• one word in a hero
• one phrase in a subheadline
• one editorial pull quote
• one short note of emotional contrast

Anti-patterns:

• italicizing too many words
• using the body font’s default italic and expecting it to feel special
• turning the whole brand into serif theater

Rule 7: Use OpenType features when the font deserves it

Many premium type systems feel richer because they use features most default UI work ignores.

Useful details:

h1, h2 {
  font-feature-settings: "ss01" on, "cv11" on;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

Examples from case studies include:

• stylistic sets
• alternate glyphs
• tabular numerics
• common ligatures
• variable weight axes

These are not mandatory, but when available they can make the typography feel truly finished.

Rule 8: Fluid typography beats abrupt breakpoint jumps

Good display type often scales fluidly rather than snapping between arbitrary breakpoints.

Use clamp() for smoother interpolation.

Example:

h1 {
  font-size: clamp(2.625rem, 2rem + 3vw, 4.625rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

This makes typography feel more natural across viewports and avoids awkward jumps.

Complete starter type system

:root {
  --font-display: 'PP Neue Montreal', 'Söhne', 'Geist', system-ui, sans-serif;
  --font-body: 'Inter', 'Geist', system-ui, -apple-system, sans-serif;
  --font-serif-accent: 'PP Editorial New', 'Instrument Serif', 'Fraunces', serif;
  --font-mono: 'Geist Mono', 'Fragment Mono', 'JetBrains Mono', ui-monospace, monospace;

  --text-display: clamp(3rem, 2rem + 5vw, 5rem);         /* 48 → 80px */
  --text-h1: clamp(2.5rem, 1.75rem + 3.75vw, 4rem);      /* 40 → 64px */
  --text-h2: clamp(2rem, 1.5rem + 2.5vw, 3rem);          /* 32 → 48px */
  --text-h3: 1.75rem;                                     /* 28px */
  --text-h4: 1.375rem;                                    /* 22px */
  --text-body-lg: 1.125rem;                               /* 18px */
  --text-body: 1rem;                                      /* 16px */
  --text-body-sm: 0.9375rem;                              /* 15px */
  --text-micro: 0.6875rem;                                /* 11px */

  --wght-display: 520;
  --wght-body: 320;
  --wght-label: 430;
}

h1, .display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--wght-display);
  line-height: 1;
  letter-spacing: -0.035em;
  font-feature-settings: "ss01" on, "cv11" on;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--wght-display);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

body, p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--wght-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.accent-italic {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

Application workflow

1. Identify the page’s missing quality.
2. Choose the intended typographic mood.
3. Separate display and body roles.
4. Lighten body text more than you think.
5. Tighten display tracking.
6. Compress display line-height.
7. Replace generic labels with mono eyebrows if appropriate.
8. Add one serif italic accent only if the page needs a human or editorial note.
9. Enable advanced type features if the font supports them.
10. Remove extra flourishes that compete with the type.

Anti-patterns to kill

• Inter everywhere
• large headings with default tracking
• body text that is too heavy
• headings that are just bold instead of considered
• too many font weights
• too many typefaces
• faux-editorial details with no system behind them
• uppercase labels without added tracking
• serif accents scattered across the whole page
• over-styled badges and buttons when the body is already delicate
• treating type like decoration instead of structure

Stronger critique language this skill should use

Instead of: “This needs more personality.”

Say: “The typography is functional, but it has no real point of view. It reads like polished default software rather than a product with conviction.”

Instead of: “Use a serif accent.”

Say: “Introduce contrast only where it creates emotion. One serif italic interruption inside an otherwise disciplined sans system can make the page feel authored without making it feel costume-y.”

Instead of: “Make the hero bigger.”

Say: “Give the hero more authority by increasing scale, tightening tracking, and pulling line-height down until it feels composed rather than merely large.”

Instead of: “The page feels flat.”

Say: “The hierarchy exists, but the typography is not creating enough tension, rhythm, or signature. Everything is working, but nothing is landing.”

Reference patterns

Final instruction

Do not use this skill to make typography busier.

Use it to make typography truer.

The end result should feel:

• sharper
• calmer
• more confident
• more inevitable
• less generic
• more remembered

If the typography starts feeling self-conscious, you went too far. If it starts feeling obvious in retrospect, you are getting close.