Typography, Color Spaces & Dark Mode
16 min read
Variable Fontsline-heightOKLCHHSLDark Modeprefers-color-schemeColor SpacesTypography Scale
Typography Systems
Variable Fonts
One font file with adjustable axes (weight, width, slant) instead of separate files for each variant. This reduces HTTP requests and file sizes dramatically.
@font-face {
font-family: "Inter";
src: url("/fonts/Inter-Variable.woff2") format("woff2-variations");
font-weight: 100 900; /* Entire range in one file! */
}
h1 { font-weight: 750; } /* Any weight between 100-900 */Line Height & Readability
| Content Type | Optimal line-height |
|---|---|
| Body text (14-18px) | 1.5 - 1.7 |
| Headings (24px+) | 1.1 - 1.3 |
| Small text (12px) | 1.6 - 1.8 |
| Code blocks | 1.5 - 1.6 |
Color Spaces
| Color Space | Syntax | Gamut | Perceptual Uniformity |
|---|---|---|---|
| Hex | #3b82f6 | sRGB | ❌ Poor |
| RGB | rgb(59, 130, 246) | sRGB | ❌ Poor |
| HSL | hsl(217, 91%, 60%) | sRGB | ⚠️ Moderate |
| OKLCH | oklch(63% 0.21 255) | P3+ | ✅ Excellent |
| Display-P3 | color(display-p3 0.23 0.51 0.96) | P3 | ⚠️ Moderate |
OKLCH is the recommended color space for 2025+. It produces visually consistent color palettes where changing lightness doesn't shift the hue (unlike HSL).
Dark Mode Implementation
Two approaches:
- System preference:
@media (prefers-color-scheme: dark) - Manual toggle:
[data-theme="dark"]attribute on<html>
Best practice: Support both — respect system preference as default, allow manual override stored in localStorage.