# Slop Test Gates Related to Typography: 4 Examples in the Hallmark Repository

> Discover 4 typography slop test gates in the Hallmark repository including font family limits, outlier restrictions, italic heading bans, and minimum line-height rules.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-27

---

**The Hallmark repository defines four typography slop test gates in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) that limit font families to three, restrict outlier usage to two slots, ban italic headings, and enforce minimum line-height for all-caps display text.**

The Nutlope/hallmark project is an open-source design system that uses automated slop tests to catch typographic sloppiness before pages ship. Its master list of slop test gates related to typography lives in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) and cross-references [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) for the underlying design rules. Understanding these gates helps developers maintain a disciplined, readable typographic vocabulary free of generic AI-generated styling.

## The Four Typography Slop Test Gates in [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md)

Hallmark's slop test evaluates a series of gates that must all return "no" for a page to pass. The most relevant gates for typography are defined between lines 96 and 111 of the reference file.

### Gate 37: The Three-Font Family Limit

In [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) at line 96, gate 37 asks: "Does the page use more than three distinct `font-family` families?" Hallmark enforces a strict **2 + 1 rule**—one display font, one body font, and one optional outlier font. Exceeding this threshold signals an uncontrolled design and immediately fails the slop test.

### Gate 38: Outlier Face Slot Restriction

Gate 38, defined near line 98, checks whether the **outlier face** appears in more than two slots on the page. The outlier—often reserved for a wordmark or hero statistic—is meant to serve a single typographic role. Reusing it beyond two locations effectively turns it into a third font family, violating the 2 + 1 budget.

### Gate 38a: Italic Heading Detection

At line 100, gate 38a flags any **heading or display type set in italic**. According to the Hallmark source code, italic headings are considered a strong AI-generation tell. Headings should remain roman and convey hierarchy through weight, color, or underline instead.

### Gate 55: All-Caps Line-Height Collision

Gate 55 near line 111 targets all-caps display heads whose `line-height` falls below 1.0. Uppercase headings need at least a `line-height` of 1.0—and preferably 1.02 to 1.08—to prevent cap collisions when lines wrap. Falling below this threshold is classified as typographic slop.

## Underlying Rules in [`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md)

The slop-test gates are grounded in the canonical guidelines found in [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md). Key policies include:

- **The 2 + 1 rule**: At most three font families may appear on a page—display, body, and optional outlier (lines 13–16).
- **Outlier constraints**: An outlier may appear in no more than two places and must serve a single typographic role (lines 27–33).
- **Font-family bans**: Common web fonts such as Inter, Roboto, and Open Sans are prohibited unless deliberately chosen (lines 38–43).
- **All-caps line-height minimum**: Uppercase display headings must use `line-height` ≥ 1.0 (lines 42–44).

## CSS Examples That Pass the Typography Gates

The following snippets demonstrate styles that satisfy the slop test gates. In production, these font tokens are consumed in [`site/css/theme.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/theme.css), while [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) handles dynamic theme switching to keep the correct families active at runtime.

### Respecting the 2 + 1 Font Rule

```css
/* ✅ Correct: exactly three families – display, body, outlier */
: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 / stat */
}

/* Apply the families */
h1, .hero__title   { font-family: var(--font-display); }
p, .copy           { font-family: var(--font-body); }
.wordmark, .hero__stat { font-family: var(--font-outlier); }

```

Only three distinct families are declared, and the outlier is limited to exactly two slots, satisfying gates 37 and 38.

### Keeping Headings Roman

```css
/* ✅ Correct: headings stay roman; emphasis via weight or colour */
h1, h2, h3 {
  font-weight: 700;               /* strong contrast to body */
  font-style: normal;             /* never italic */
}

/* If you need emphasis, use colour or underline instead */
h1.emph { color: var(--color-accent); text-decoration: underline; }

```

This avoids `font-style: italic` on any heading, passing gate 38a.

### All-Caps Display with Safe Line-Height

```css
/* ✅ Correct: caps + sufficient line‑height */
.hero__display {
  text-transform: uppercase;
  line-height: 1.04;              /* ≥ 1.0 prevents cap collision */
  font-size: var(--text-display);
}

```

Setting `line-height` to 1.04 meets the ≥ 1.0 requirement demanded by gate 55.

### Limiting Outlier Usage to Two Slots

```css
/* ✅ Correct: outlier only on wordmark and hero stat */
.wordmark { font-family: var(--font-outlier); }
.hero__stat { font-family: var(--font-outlier); }

/* All other text uses body or display families */

```

The outlier appears exactly twice, complying with gate 38.

## Summary

- Hallmark's slop test gates related to typography are defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) and enforced by [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md).
- **Gate 37** caps distinct font families at three (display + body + optional outlier) to prevent uncontrolled design.
- **Gate 38** restricts the outlier face to no more than two slots, preserving its single-purpose role.
- **Gate 38a** rejects italic headings, requiring roman type with weight or color emphasis instead.
- **Gate 55** mandates `line-height` ≥ 1.0 for all-caps display text to avoid glyph collisions.

## Frequently Asked Questions

### What is the 2+1 font rule in Hallmark?

The 2+1 font rule is Hallmark's core typography constraint that limits any page to a maximum of three font families: one display font, one body font, and one optional outlier font. This rule is codified in [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) at lines 13–16 and enforced by gate 37 in the slop test.

### Why does Hallmark flag italic headings as slop?

Italic headings are flagged by gate 38a because they are considered a strong indicator of AI-generated design slop. Hallmark requires headings to remain roman and express hierarchy through weight, color, or underline rather than italic style.

### How many times can an outlier font appear on a Hallmark page?

An outlier font may appear in no more than two slots on a page according to gate 38 and the outlier constraints in [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) lines 27–33. Using it in additional locations violates the 2+1 font budget and fails the slop test.

### What line-height should all-caps display headings use?

All-caps display headings must use a `line-height` of at least 1.0, with the Hallmark typography reference recommending 1.02–1.08. Gate 55 in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) specifically checks for this to prevent cap collisions on wrapped lines.