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

> Understand Hallmark's 2+1 font discipline. Learn how this rule uses three font families to create clear hierarchy and prevent clutter on your pages.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-08-04

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) file loads these at runtime, and [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) demonstrates them live.

```css
/* 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) lines 5-12.

## Sample Scale Implementation

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

```css
: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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md), with runtime implementation in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.