How to adjust font weight, spacing, line-height for dark mode
- Step 1Set light mode baseline — Light mode font-weight (e.g., 400), letter-spacing (0), line-height (1.5). The Generator computes adjusted dark-mode values from these.
- Step 2Get the dark mode CSS — Output: @media (prefers-color-scheme: dark) { body { font-weight: 350; letter-spacing: 0.01em; line-height: 1.55; } }. Drop into your stylesheet.
- Step 3Test on OLED screens — Halation effects are most pronounced on OLED displays. Test on iPhone OLED or modern Mac with the Pro Display. The adjustments should be visible but subtle.
Frequently asked questions
Why reduce weight in dark mode?+
Halation — light pixels on dark bloom outwards in the eye, making thin strokes appear thicker. Reducing weight class by 50–100 (e.g., 400 → 350) restores equivalent perceived density. Apple's Human Interface Guidelines and Material Design both recommend this.
Will users notice the adjustments?+
Most won't consciously, but they'll perceive better readability. The point is invisible improvement — text 'just feels right' in both modes. Direct comparison reveals the difference.
What about variable fonts?+
Variable fonts let you fine-tune weight (e.g., 350 in dark mode vs 400 in light) precisely. The Generator emits font-variation-settings: 'wght' 350; for variable fonts. Less abrupt than the static font-weight: 350 fallback.
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.