What Is the 2+1 Typography Rule in Hallmark? A Design System Deep Dive

The 2+1 typography rule in Hallmark limits every page to a maximum of three distinct font families: two core families (display and body) plus one optional outlier for special typographic moments.

This constraint, sometimes called the "2+I" rule, is a foundational principle in the Hallmark design system that enforces visual harmony and prevents cluttered type stacks. According to the Hallmark source code, exceeding three families results in a failed typographic audit—designers refer to this violation as slop.

The Three-Faces Ceiling: Breaking Down the Rule

The rule is explicitly documented in skills/hallmark/references/typography.md with the heading "The 2+1 rule — three faces is the ceiling" (lines 13-16). This constraint serves as a hard gate in Hallmark's design workflow.

Core Components

The 2+1 structure breaks down as follows:

1. Display font — Used for headings, hero sections, and prominent visual elements
2. Body font — Used for prose, UI text, and regular content
3. Optional outlier — Reserved for singular typographic moments (wordmarks, hero statistics, pull-quotes, mastheads)

Outlier Usage Constraints

Lines 27-33 of typography.md specify strict limitations on how the third family may appear:

Constraint	Specification
Maximum locations	≤ 2 places per page
Typical roles	Wordmark + hero statistic, or masthead + pull-quote
Consistency requirement	Same outlier family across all instances of that role

What Counts as One Family

Hallmark's family-counting logic keeps the rule practical while preventing loopholes:

• Different weights of the same family count as one family (e.g., Geist Regular and Geist Bold together still equal one slot)
• Monospace fonts count as a separate family if designated as the outlier (e.g., Geist Mono)
• Fallback fonts in CSS stacks are ignored for audit purposes; only the primary intentional family matters

CSS Implementation in Hallmark

The site/css/components.css file implements this rule through CSS custom properties:

/* Root font variables – obeying the 2+1 rule */
:root {
  /* Display face – headlines, hero sections */
  --font-display: "Fraunces", ui-serif, Georgia, serif;

  /* Body face – prose, UI text */
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;

  /* Optional outlier – used only in ≤2 places (e.g., wordmark) */
  --font-outlier: "Geist Mono", ui-monospace, monospace;
}

/* Applying the fonts */
h1, .hero__display { font-family: var(--font-display); }
p, .ui-text      { font-family: var(--font-body); }
.wordmark, .hero-stat { font-family: var(--font-outlier); }

The site/js/main.js file handles dynamic theme switching that preserves these font variables, ensuring the 2+1 rule remains enforced across all themes.

When the Rule Is Violated

If a page exceeds three font families, Hallmark's audit system flags it as non-compliant. The prescribed fallback is straightforward:

• Collapse to two families (display + body only)
• Drop the outlier entirely
• Compensate with weight, color, or tracking adjustments for visual distinction

Relationship to Other Hallmark Constraints

The 2+1 rule operates alongside related typographic policies:

• No single-font pages — Hallmark explicitly bans designs using only one family; the minimum is display + body
• Audit gate validation — Every page runs through automated font usage validation
• Intentionality principle — Each family must serve a clear, distinct purpose

Summary

• The 2+1 typography rule caps pages at three intentional font families: display, body, and one optional outlier
• The outlier appears in no more than two locations and must serve a specific typographic function
• Weight variations within a family do not count toward the limit
• Violations fail Hallmark's automated audit and require collapsing to two families
• Implementation lives in typography.md with CSS variables defined in site/css/components.css

Frequently Asked Questions

How does Hallmark count font families in the 2+1 rule?

Hallmark counts each distinct font family as one unit, regardless of how many weights or styles you use. Using Geist Regular, Geist Medium, and Geist Bold together consumes only one of your three allowed slots. Color, tracking, and other typographic properties are similarly unrestricted. Only introducing a new family name—such as adding Inter alongside Geist—increments the count.

Can I use a monospace font as my outlier in Hallmark?

Yes. Monospace fonts like Geist Mono are commonly designated as the outlier family in Hallmark implementations. They count as a separate family from their sans-serif or serif counterparts. For example, using Geist (body), Fraunces (display), and Geist Mono (outlier) satisfies the 2+1 rule exactly.

What happens if my page needs more than three font families?

Hallmark considers this slop and your page will fail typographic audit. The prescribed remedy is to remove the outlier entirely, returning to a two-family structure of display plus body. Designers must then achieve visual hierarchy through weight, color, size, or letter-spacing rather than introducing additional families.

Where is the 2+1 rule documented in the Hallmark repository?

The authoritative source is skills/hallmark/references/typography.md, which introduces the rule under the heading "The 2+1 rule — three faces is the ceiling" (lines 13-16). Detailed constraints on outlier usage follow in lines 27-33. The practical CSS implementation appears in site/css/components.css with supporting logic in site/js/main.js.

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