Reduce font weight by 50–100, increase letter-spacing by 0.01em, and bump line-height by 0.05 in dark mode. Auto-generates a prefers-color-scheme media query.
Enter your light-mode font-weight, letter-spacing, and line-height
We compute the dark-mode adjustments based on the contrast research from Apple Human Interface Guidelines and Material Design
Get a prefers-color-scheme media query CSS snippet you can drop into any stylesheet
0 bytes uploaded. Dark Mode Font Adjuster runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
Halation — the perceived blooming of light pixels on a dark background — makes thin strokes look thicker. Heavy weights bloat into mush. Reducing the weight class by 50–100 produces equivalent perceived density.
Slightly wider letter-spacing (0.01–0.02em) preserves character distinguishability when light strokes bloom. Slightly taller line-height (0.05) prevents adjacent lines from bleeding into each other on OLED screens.
Yes — variable fonts let you fine-tune the weight axis to e.g. 350 for dark mode versus 400 for light. The output references font-variation-settings when a variable font is detected.
Build a complete typography token system as CSS custom properties: --font-family, --font-size-{xs,sm,base,lg,xl}, --font-weight-{light,regular,bold}, --line-height-{tight,normal,relaxed}.
Open toolBuild a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.
Open toolGenerate @font-face declarations for each named weight (Light, Regular, Medium, Bold, Black) of a variable font using font-variation-settings. Drop-in CSS.
Open tool