Typography
Font families, weights, sizes, and line heights used throughout the design system.
Font Families
Body / UI
Inter
The quick brown fox jumps over the lazy dog. 0123456789
Code
JetBrains Mono
const greeting = 'Hello, World!'; // 0123456789
Weight Scale
300 Light
The quick brown fox jumps over the lazy dog
400 Regular
The quick brown fox jumps over the lazy dog
500 Medium
The quick brown fox jumps over the lazy dog
600 Semibold
The quick brown fox jumps over the lazy dog
700 Bold
The quick brown fox jumps over the lazy dog
Size Scale
12px
Design System
13px
Design System
14px
Design System
15px
Design System
16px
Design System
18px
Design System
20px
Design System
24px
Design System
28px
Design System
32px
Design System
40px
Design System
48px
Design System
Line Heights
Tight (1.2)
The quick brown fox jumps over the lazy dog. This is a longer sample to demonstrate line height differences across multiple lines of text.
Normal (1.4)
The quick brown fox jumps over the lazy dog. This is a longer sample to demonstrate line height differences across multiple lines of text.
Relaxed (1.6)
The quick brown fox jumps over the lazy dog. This is a longer sample to demonstrate line height differences across multiple lines of text.
Loose (1.8)
The quick brown fox jumps over the lazy dog. This is a longer sample to demonstrate line height differences across multiple lines of text.
css
/* Font Families */
font-family: 'Inter', sans-serif; /* Body & UI */
font-family: 'JetBrains Mono', monospace; /* Code */
/* Font Weights */
font-weight: 300; /* Light */
font-weight: 400; /* Regular */
font-weight: 500; /* Medium */
font-weight: 600; /* Semibold */
font-weight: 700; /* Bold */
/* Import (Next.js) */
import { Inter } from 'next/font/google';
import { JetBrains_Mono } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
weight: ['300', '400', '500', '600', '700'],
});
const jetbrainsMono = JetBrains_Mono({
subsets: ['latin'],
weight: ['400', '500'],
});