How to dark mode typography: quick reference checklist
- Step 1Weight: reduce 50–100 — Light 400 → dark 350 (variable) or 300 (static). Light 600 → dark 500 (variable) or 500 (static). Heavier weights bloom more; reduce more aggressively at upper weights.
- Step 2Letter-spacing: +0.01em — Subtle widening prevents character merging on OLED. Apply via @media (prefers-color-scheme: dark) media query or CSS variable theming. body and headlines both benefit.
- Step 3Background: off-black, not pure — Pure black (#000) intensifies halation. Slight off-black (#181818, #1A1A1A) reduces it without losing the dark-mode feel. Apple uses #1C1C1E as the system dark background.
Frequently asked questions
What contrast ratio should I target?+
WCAG AA: 4.5:1 minimum for body text. Light text on near-black background: easy to hit 12:1+ even with off-white text. Don't pick pure white text just for max contrast — off-white #EAEAEA at 12:1 reads better than #FFFFFF at 21:1.
Should I use a different font in dark mode?+
Almost never. Same font, adjusted weight/spacing. Different fonts feel jarring during system theme transitions and add bandwidth cost (loading two font sets).
What about images and emoji?+
Out of scope for typography but related. Use prefers-color-scheme to swap dark-mode-friendly hero images. Emoji generally render fine in both modes; OS handles the colour adjustment.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.