> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.signoffkit.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.signoffkit.com/_mcp/server.

# Fonts

> The 18 display and body font pairings in SignOff Kit Free, grouped by sector, and the font rules every SignOff Kit build follows.

Every SignOff Kit build uses open-licensed (OFL) fonts that are self-hosted with the site, so there's no font CDN and nothing to license separately. A page uses at most two font families: one display face for headings and one body face for text. The design check fails a site that breaks these rules.

## The 18 pairings in SignOff Kit Free

`site-from-brief-lite` picks from these 18 display and body pairs, grouped by sector. It uses a row exactly as listed and never mixes fonts across rows. The one exception is a font your brief or brand names. Each font is installed from its `@fontsource` package in the weights shown.

| #  | Sector                | Display                     | Body                             | Why it works                                                                                           |
| -- | --------------------- | --------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------ |
| 1  | Food & hospitality    | Imbue (600)                 | Albert Sans (400, 600)           | Condensed didone drama for the menu board, calm geometric sans keeps prices and hours easy to scan.    |
| 2  | Food & hospitality    | Young Serif (400)           | Source Serif 4 (400, 600)        | Chunky, warm serif headline with a bookish text serif, feels like a well-thumbed recipe card.          |
| 3  | Food & hospitality    | Gloock (400)                | Karla (400, 600)                 | High-contrast display serif with a quirky grotesk, a cocktail bar or wine shop with personality.       |
| 4  | Retail & shops        | Schibsted Grotesk (800)     | DM Mono (400, 500)               | Newsy grotesk headline with a monospaced body, an indie shop that labels everything like a spec sheet. |
| 5  | Retail & shops        | Syne (700)                  | Manrope (400, 600)               | Wide, eccentric Syne makes a boutique feel curated; Manrope stays crisp for product details.           |
| 6  | Professional services | Hanken Grotesk (700)        | IBM Plex Mono (400, 600)         | Clean grotesk authority with Plex Mono for numbers, logistics, bookkeeping, anything with data.        |
| 7  | Professional services | Big Shoulders Display (800) | Public Sans (400, 600)           | Tall Chicago-style condensed headline is bold and local; Public Sans is the plain-spoken workhorse.    |
| 8  | Professional services | Newsreader (600)            | Plus Jakarta Sans (400, 600)     | Editorial serif signals expertise without stuffiness; Jakarta Sans keeps it modern and friendly.       |
| 9  | Studios & creative    | Instrument Serif (400)      | Archivo (400, 600)               | Elegant condensed serif for a portfolio title, sturdy Archivo for captions and case studies.           |
| 10 | Studios & creative    | Space Grotesk (700)         | Space Mono (400, 700)            | Techy-quirky pair for design studios and print shops who like their type a bit odd.                    |
| 11 | Tech & SaaS           | Unbounded (700)             | Hanken Grotesk (400, 600)        | Rounded, extra-wide Unbounded is a confident product wordmark; Hanken reads cleanly in UI copy.        |
| 12 | Tech & SaaS           | Sora (700)                  | Inter (400, 600)                 | Sora's geometric display gives a product page character; Inter is used only as the body.               |
| 13 | Wellness              | Literata (600)              | Nunito Sans (400, 600)           | Soft literary serif for calm headlines, rounded humanist sans for gentle, readable body copy.          |
| 14 | Wellness              | Outfit (600)                | Source Serif 4 (400, 600)        | Airy geometric headline with a warm text serif, a clinic or therapist that's modern yet human.         |
| 15 | Trades & local        | Anton (400)                 | Work Sans (400, 600)             | Loud poster headline you can read from a van; Work Sans is practical for prices and areas served.      |
| 16 | Trades & local        | League Spartan (700)        | Figtree (400, 600)               | Bold geometric sign-writer feel with a friendly modern sans, garages, bike shops, builders.            |
| 17 | Nonprofit & community | Bricolage Grotesque (700)   | Atkinson Hyperlegible (400, 700) | Characterful, warm grotesk headline paired with a body face designed for low-vision readability.       |
| 18 | Nonprofit & community | Epilogue (700)              | Lora (400, 600)                  | Sturdy contemporary sans headline with a gentle serif for stories, events, festivals, trusts.          |

## Fonts in the paid Kit

In SignOff Kit, the design direction sets the type. The workflow swaps any font that isn't OFL, self-hosts the fonts it picks, and runs the same design check before handoff. The font licenses are listed in `HANDOFF.md`.