---
title: Typography
description: The shared type system for Hornet products, documentation, and brand experiences.
group: Foundations
order: 2
status: draft
---

## Type roles

| Role    | Family              | Utility        | Use                                                                     |
| ------- | ------------------- | -------------- | ----------------------------------------------------------------------- |
| Display | Urbanist Variable   | `font-display` | Page titles, headings, short statements, and high-level brand messages  |
| Sans    | Geist Variable      | `font-sans`    | Body copy, controls, navigation, labels, and product interfaces         |
| Mono    | Geist Mono Variable | `font-mono`    | Code, identifiers, measurements, overlines, and compact system metadata |

Set paragraphs in Geist. Use Geist Mono only when the content is technical, not as decoration.

## Scale by context

| Context                     | Scale                                      | Default treatment                 |
| --------------------------- | ------------------------------------------ | --------------------------------- |
| Public and brand            | `text-hornet-hero` to `text-hornet-h6`     | Urbanist, weight `500`             |
| Product interfaces          | `text-2xl` to `text-xs`                    | Geist, compact desktop hierarchy   |
| Documentation and editorial | Shared prose and Hornet display utilities  | Urbanist titles with Geist reading |

The token name does not determine the HTML element. Preserve heading order and use one `h1` per page.

### Display scale

Use the Hornet display scale for public brand pages and spacious editorial layouts.

{% display-scale-specimens /%}

### Interface scale

Use the interface scale for controls, navigation, tables, metadata, and dense product layouts.

{% interface-scale-specimens /%}

## Rules

- Use weight `400` for reading and `500` for headings, controls, links, and emphasis.
- Use sentence case. Reserve uppercase Geist Mono for short technical overlines and wordmarks.
- Keep body text and controls at `1rem` or larger on mobile. Reserve `text-sm` and `text-xs` for compact metadata.
- Keep sustained reading between 60 and 75 characters per line with a line height of at least `1.68`.
- Use `text-pretty` for paragraphs, `text-balance` for short display headings, and `tabular-nums` for changing or aligned numbers.
- Preserve meaning when type, weight, size, and color are removed. Allow text to reflow at 200% zoom without clipping.
- Choose an existing utility. Do not introduce another family, weight, size, or line height for a local preference.

## Implementation

Use the shared utilities. See [Implementation](/design-guide/standards/implementation) for framework mappings, code examples, and documented exceptions.