Typography
UI is set in Geist; data, codes, and monospaced labels in Geist Mono.
Both are self-hosted via @fontsource-variable and imported from
@ship-it-ui/ui/styles/globals.css — consumers don't depend on Google Fonts.
Type ramp#
Sizes are named, not numeric, so utilities stay semantic.
display56pxThe graph stays quiet.h134pxThe graph stays quiet.h228pxThe graph stays quiet.h322pxThe graph stays quiet.h418pxThe graph stays quiet.body-lg15pxThe graph stays quiet.body13pxThe graph stays quiet.mono11pxThe graph stays quiet.eyebrow10pxThe graph stays quiet.Weights#
400 (regular), 500 (medium, the workhorse), 600 (semibold for emphasis), 700 (bold — rare). 300 (light) is reserved for display-size headings that sit on quiet backgrounds.
Tracking#
| Token | Value | When |
|---|---|---|
xtight | -0.9px | display sizes |
tight | -0.3px | h1 / h2 |
normal | 0 | body |
wide | 1.4px | eyebrow / mono labels |
xwide | 1.8px | uppercase section headers |
Tabular numerals#
Numbers in any "tick" or "compare" surface use font-variant-numeric: tabular-nums. The .font-mono class enables this automatically; pair it with
a tabular-nums utility on data cells.
Usage#
tsx
<h1 className="text-display font-medium tracking-xtight">Headline</h1>
<p className="text-body text-text-muted">Body</p>
<code className="font-mono text-mono">match (s:Service)</code>
<span className="font-mono text-eyebrow tracking-wide uppercase text-text-dim">PROPERTIES</span>