---
title: "Typography — Brand system"
description: "Inter for the interface, DM Sans for headings, Source Code Pro for machine values only. One size scale and named type-* roles from theme.css."
url: https://www.unitpost.com/brand/typography
section: "Brand"
updated: 2026-09-10
---
# Typography — Brand system

> Inter for the interface, DM Sans for headings, Source Code Pro for machine values only. One size scale and named type-* roles from theme.css.

This page is a visual specimen of the Unitpost design system. The written contract it illustrates is [design.md](https://www.unitpost.com/design.md) (§2.8 Typography). Load design.md to build on-brand UI; it is the authoritative source.

## Roles

| Class | Declarations |
| --- | --- |
| `type-display` | `-family: var(--font-heading); -size: clamp(2.75rem, 7vw, 5.5rem); -weight: 600; -spacing: -0.055em; -height: 0.98` |
| `type-page-title` | `-family: var(--font-heading); -size: clamp(2rem, 4vw, 3rem); -weight: 600; -spacing: -0.04em; -height: 1.05` |
| `type-section-title` | `-family: var(--font-heading); -size: clamp(1.5rem, 2.5vw, 2rem); -weight: 600; -spacing: -0.025em; -height: 1.15` |
| `type-title` | `-family: var(--font-heading); -size: 1.5rem; -weight: 600; -spacing: -0.02em; -height: 1.2` |
| `type-heading` | `-family: var(--font-heading); -size: 1.125rem; -weight: 600; -spacing: -0.015em; -height: 1.35` |
| `type-subheading` | `-family: var(--font-heading); -size: 1rem; -weight: 600; -spacing: -0.01em; -height: 1.4` |
| `type-body` | `-size: 1rem; -height: 1.65` |
| `type-body-muted` | `-size: 0.9375rem; -height: 1.6` |
| `type-label` | `-size: 0.875rem; -weight: 600; -spacing: -0.005em; -height: 1.35` |
| `type-caption` | `-size: 0.75rem; -height: 1.45` |
| `type-overline` | `-size: 0.75rem; -weight: 600; -spacing: 0.14em; -height: 1.35; -transform: uppercase` |
| `type-code` | `-family: var(--font-mono); -size: 0.8125rem; -height: 1.55` |
| `type-nav` | `-size: 0.8125rem; -height: 1.25rem` |

## Other brand pages

- [Brand system](https://www.unitpost.com/brand): Unitpost design foundations: colors, typography, materials, interface components, and page patterns. One set of tokens and one kit for every surface. ([Markdown](https://www.unitpost.com/brand.md))
- [Colors — Brand system](https://www.unitpost.com/brand/colors): The neutral ladder, semantic roles, and every color token with its light and dark value, read live from theme.css. ([Markdown](https://www.unitpost.com/brand/colors.md))
- [Materials — Brand system](https://www.unitpost.com/brand/materials): Card appearances and tones, the four-step elevation ladder, and radius roles: pills for controls, soft rectangles for panels. ([Markdown](https://www.unitpost.com/brand/materials.md))
- [Components — Brand system](https://www.unitpost.com/brand/components): Every Unitpost interface primitive with its variants and states, shown in light and dark themes and checked against the components' own types. ([Markdown](https://www.unitpost.com/brand/components.md))
- [Patterns — Brand system](https://www.unitpost.com/brand/patterns): How Unitpost pages are built from the kit: one shape each for list, detail, settings, empty, and error pages. ([Markdown](https://www.unitpost.com/brand/patterns.md))