← All Articles

Typography for Dark Interfaces

TypographyDesignCSS

Light on Dark Is Different

Text on dark backgrounds behaves differently than text on light backgrounds. White text on black appears bolder than black text on white — an optical illusion called irradiation. Your eyes perceive light areas as spreading into dark areas.

This means you need to adjust:

  • Font weight — go one step lighter than you would on a light background
  • Letter spacing — add 0.5–1% more for body text
  • Line height — increase by 10–15% for better readability

Practical Numbers

For a dark UI at 16px base font size:

| Element | Weight | Size | Line Height | Spacing | |---------|--------|------|-------------|---------| | Heading | 600 | 2rem | 1.2 | -0.5% | | Body | 400 | 1rem | 1.65 | 0% | | Caption | 400 | 0.75rem | 1.5 | 2% |

Color Matters

Pure white (#fff) on pure black (#000) creates uncomfortable contrast. Instead:

  • Body text: rgba(255, 255, 255, 0.85) or #d1d5db
  • Secondary text: rgba(255, 255, 255, 0.5) or #9ca3af
  • Muted text: rgba(255, 255, 255, 0.3) or #6b7280

Font Selection

Sans-serif fonts with open apertures perform best on dark backgrounds. Inter, SF Pro, and Geist are excellent choices — they were designed with screen readability in mind and handle the light-on-dark optical challenges gracefully.