Font Weight
Typography weight scale for establishing visual hierarchy and emphasis.
Weight Scale
Font weight controls the thickness of text characters, helping establish hierarchy and emphasis in your UI.
| Class | Weight | CSS Value | Use Case |
|---|---|---|---|
font-thin | Thin | 100 | Decorative, large display |
font-extralight | Extra Light | 200 | Stylized headings |
font-light | Light | 300 | Subtle, elegant text |
font-normal | Normal | 400 | Body text (default) |
font-medium | Medium | 500 | Slightly emphasized text |
font-semibold | Semibold | 600 | Subheadings, labels |
font-bold | Bold | 700 | Headings, strong emphasis |
font-extrabold | Extra Bold | 800 | Impact headings |
font-black | Black | 900 | Maximum impact |
Visual Examples
Thin (100) — The quick brown fox
Extra Light (200) — The quick brown fox
Light (300) — The quick brown fox
Normal (400) — The quick brown fox
Medium (500) — The quick brown fox
Semibold (600) — The quick brown fox
Bold (700) — The quick brown fox
Extra Bold (800) — The quick brown fox
Black (900) — The quick brown fox
Core Weights
For most interfaces, you only need 3-4 weights:
| Weight | Purpose |
|---|---|
| 400 (Normal) | Body text, paragraphs |
| 500 (Medium) | Subtle emphasis, nav items |
| 600 (Semibold) | Labels, buttons, subheadings |
| 700 (Bold) | Headings, strong emphasis |
CSS Variables
:root {
--font-thin: 100;
--font-extralight: 200;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--font-black: 900;
}Usage Examples
Headings
<h1 class="font-bold">Page Title</h1>
<h2 class="font-semibold">Section Heading</h2>
<h3 class="font-medium">Subsection</h3>Body & UI
<p class="font-normal">Regular body text for reading.</p>
<span class="font-medium">Navigation item</span>
<button class="font-semibold">Call to Action</button>
<strong class="font-bold">Important information</strong>Display Text
<h1 class="text-6xl font-black">IMPACT</h1>
<h1 class="text-5xl font-thin">Elegant</h1>Weight + Size Pairing
Larger text can handle lighter weights, smaller text needs heavier weights for readability:
| Text Size | Recommended Weights |
|---|---|
| Display (5xl+) | 100-400 (thin to normal) |
| Headings (2xl-4xl) | 600-800 (semibold to extrabold) |
| Body (base-lg) | 400-500 (normal to medium) |
| Small (xs-sm) | 400-600 (normal to semibold) |
Variable Fonts
If using a variable font like Satoshi, you can use any weight value between 100-900:
.custom-weight {
font-weight: 450; /* Between normal and medium */
}
.smooth-bold {
font-weight: 650; /* Between semibold and bold */
}Best Practices
- Limit weights — Use 3-4 weights max per project for consistency
- Hierarchy first — Weight should reinforce visual hierarchy, not compete with size
- Readability — Body text should be 400-500; lighter weights hurt legibility at small sizes
- Contrast — Ensure sufficient contrast between weight levels (jump 200+ units)
- Variable fonts — Prefer variable fonts for flexibility and smaller file sizes
- System fonts — Not all system fonts support all weights; test on target platforms