What Is the 2+1 Font Discipline in Hallmark Typography Rules?

The 2+1 font discipline limits any Hallmark page to exactly three distinct font families: one display face, one body face, and one optional "outlier" face for accent moments. This rule forces intentional hierarchy while preventing typographic clutter.

Hallmark's typography system, documented in skills/hallmark/references/typography.md, treats type as the visual backbone of every design. The 2+1 constraint balances expressive flexibility with strict coherence—ensuring pages feel unified without becoming monotone.

Breaking Down the Three-Family Ceiling

Hallmark's rule is absolute: four families is slop, two is canonical, three is the ceiling. Here's how the slots break down:

1. Display – headlines, hero copy, large UI labels
2. Body – prose, paragraphs, standard interface text
3. Outlier – a single, optional accent face for specific typographic moments

"A page may use at most three distinct font families. One display, one body, and an optional outlier … Four families is slop. Two is canonical. Three is the ceiling." — skills/hallmark/references/typography.md, lines 13-16

The outlier is not a free license. It exists only for calculated impact—wordmarks, hero statistics, pull quotes, or mastheads.

Strict Constraints on the Outlier Face

The outlier carries the tightest restrictions in the entire system:

Rule	Enforcement
Maximum two occurrences	The outlier appears in ≤2 places on the entire page
Single semantic role	Every instance must serve the same purpose
Mono counts as family	Geist Mono consumes the outlier slot, not a weight variant
Weight ≠ family	Geist 400 + Geist 700 remains one family

These constraints live in skills/hallmark/references/typography.md lines 27-33. The two-occurrence limit forces designers to choose their moments deliberately—sprinkling a third typeface everywhere destroys the discipline's intent.

Implementing 2+1 in CSS

Hallmark exposes the system through CSS custom properties. The site/js/main.js file loads these at runtime, and site/index.html demonstrates them live.

/* font vars – the 2+1 system */
:root {
  --font-display:  "Fraunces", ui-serif, Georgia, serif;   /* headings, hero */
  --font-body:     "Geist",   ui-sans-serif, system-ui, sans; /* prose, UI */
  --font-outlier:  "Geist Mono", ui-monospace, monospace;   /* wordmark / code */
}

/* disciplined application */
h1, .hero__display { font-family: var(--font-display); }
p, .body { font-family: var(--font-body); }
code, .outlier { font-family: var(--font-outlier); }

This pattern appears in skills/hallmark/references/typography.md lines 19-24. The variable abstraction enforces the ceiling—deviating requires explicit override, making violations visible in code review.

Typographic Pairing Principles

Beyond the 2+1 ceiling, Hallmark mandates four co-constraints:

• Pairing, not solo – every page needs at minimum a display face and body face; single-font pages require explicit design justification
• Commit to extremes – hierarchy through weight contrast (200 vs. 800), not middle-ground moderation
• Scale by ratio – size steps follow mathematical ratios (major third ≈ 1.25, perfect fourth ≈ 1.333)
• Line-height discipline – tight for display (1.05-1.2), comfortable for body (1.5-1.65); measure capped at 45-75ch with max-width: 65ch default

These principles appear in skills/hallmark/references/typography.md lines 5-12.

Sample Scale Implementation

Hallmark's default typescale uses the major-third ratio, rooted at 16px:

:root {
  --text-xs:   0.64rem;   /* 10.24px */
  --text-sm:   0.80rem;   /* 12.8px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.25rem;   /* 20px */
  --text-lg:   1.5625rem; /* 25px */
  --text-xl:   1.9531rem; /* 31.25px */
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-4xl:  3.8147rem;
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
}

Defined in lines 75-87 of the typography reference.

Banned Defaults and Required Features

Hallmark explicitly forbids reaching for overused system fonts without deliberate reason—Inter, Roboto, Open Sans, Merriweather, Playfair Display as body, and system monospace faces are all discouraged per lines 38-42.

Required implementation details include:

• font-display: swap on every web-font
• Size-adjust and ascent/descent overrides to prevent CLS
• font-variant-numeric: tabular-nums for data tables
• Proper typographic punctuation (smart quotes, em-dash, ellipsis)

Quick Reference: Tone-Based Pairings

Hallmark organizes free, web-ready sources by design tone:

Tone	Display	Body	Outlier
Editorial	Fraunces, Newsreader	IBM Plex Sans, Switzer	JetBrains Mono, Geist Mono
Technical	JetBrains Mono, Geist Mono	Geist, IBM Plex Sans, Switzer	Tomorrow, Cabinet Grotesque
Brutalist	Bricolage Grotesque, Anton	Geist, Switzer	Space Grotesk, Geist Mono
Playful	Bricolage Grotesque, Satoshi	Geist, Newsreader, Satoshi	Geist Mono, Space Mono

Full tables appear in skills/hallmark/references/typography.md lines 15-33.

Summary

• The 2+1 font discipline caps Hallmark pages at three families: display, body, and one optional outlier
• The outlier face may appear maximum twice, serving a single semantic role each time
• Family count excludes weight variations—Geist 400 and Geist 700 remain one family
• All rules are enforced through CSS custom property conventions and code review visibility
• Source authority lives in skills/hallmark/references/typography.md, with runtime implementation in site/js/main.js

Frequently Asked Questions

Can I use the same font for display and body?

Only if it's an intentional design choice—Hallmark permits single-font pages when the constraint is deliberate (e.g., a monospace manifesto). Otherwise, minimum two families are expected to establish proper hierarchy.

Does italic or bold count as a different font family?

No. Weight, style, and width variations within a single typeface family do not consume additional slots. Geist 200, Geist 400, and Geist 800 together count as one family in the 2+1 system.

What happens if I need code snippets and a wordmark—does that use two outlier slots?

Yes. If both require monospace, they compete for the same two-occurrence limit. Designers must choose: consolidate to one outlier instance, promote one use case to body/display, or accept the violation explicitly.

Where is the 2+1 rule actually documented?

The authoritative source is skills/hallmark/references/typography.md in the Nutlope/hallmark repository, specifically lines 13-16 for the core rule and lines 27-33 for outlier constraints.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}