Typography
Fifteen named roles for dense financial screens, set through Text.
Inter for text, Geist Mono for code. A small scale (11 to 30 px) because the audience is dense dashboards, not marketing pages. Fifteen named roles cover display, heading, body, label, caption, numeric and code; each role fixes size, leading, weight and tracking together. Type does not change with density.
Every string on screen goes through <Text>, so nothing else sets a font size or colour. Pick as for document structure (an h2 for a section, a label for a field) and variant for the role; screen readers navigate by heading level, not by font size.
In practice
Invoices
Body text at 14 px with 20 px leading. Headings tighten tracking; captions widen it.
- Outstanding
- $12,480.00
- Overdue
- $1,112.40