Typography
Type scale, font families, and text styles used across the FRAYT Design System.
Font Families
The design system uses two font families:
| Font | Variable | Use |
|---|---|---|
| Inter | --font-sans | All UI text — headings, body, labels, captions |
| System Mono | --font-mono | Code blocks, technical labels, token values |
Inter is loaded via Google Fonts with the --font-sans CSS variable applied to the <html> element.
Type Scale
Display
3rem / 48pxw700lh 1.1
The quick brown fox jumps over the lazy dog
H1
2.25rem / 36pxw700lh 1.2
The quick brown fox jumps over the lazy dog
H2
1.875rem / 30pxw600lh 1.3
The quick brown fox jumps over the lazy dog
H3
1.5rem / 24pxw600lh 1.4
The quick brown fox jumps over the lazy dog
H4
1.25rem / 20pxw600lh 1.5
The quick brown fox jumps over the lazy dog
Body
1rem / 16pxw400lh 1.6
The quick brown fox jumps over the lazy dog
Small
0.875rem / 14pxw400lh 1.5
The quick brown fox jumps over the lazy dog
Caption
0.75rem / 12pxw500lh 1.4
The quick brown fox jumps over the lazy dog
Overline
0.75rem / 12pxw600lh 1.3
The quick brown fox jumps over the lazy dog
Usage in Tailwind
// Headings
<h1 className="text-4xl font-bold tracking-tight">Page Title</h1>
<h2 className="text-3xl font-semibold tracking-tight">Section</h2>
<h3 className="text-2xl font-semibold">Subsection</h3>
// Body
<p className="text-base">Default body text</p>
<p className="text-sm text-muted-foreground">Secondary text</p>
// Caption / Overline
<span className="text-xs font-semibold uppercase tracking-widest">
Overline Label
</span>Guidelines
- Use
tracking-tighton headings (text-2xland above) for a tighter, more confident feel - Body text uses the default line-height (
leading-normal/ 1.5) - Muted text should use
text-muted-foreground— never reduce opacity on text for accessibility reasons - Code snippets and token values use the monospace stack