The Dark Side of Typography: Why Your Fonts Need to Change in Dark Mode
Dark mode is no longer an optional luxury; it’s a user expectation. Whether it’s for reducing eye strain in low-light environments, saving battery life on OLED displays, or simply satisfying an aesthetic preference, users want the choice.
However, many designers and developers make a fundamental mistake: they assume dark mode is a simple matter of inverting the color palette.
When you flip light to dark, physics and human perception get in the way. Suddenly, your beautifully balanced typography looks cramped, overly bold, and hard to read. Here is why your fonts need to adapt to the dark, and how you can fix them.
The Science of "Halation"
To understand why fonts need to change in dark mode, we have to look at how our eyes process light.
When we view light text on a dark background, a phenomenon called halation occurs. The bright light emitted from the white letters bleeds slightly into the surrounding dark space on your screen. In contrast, dark text on a light background absorbs light, making the characters feel crisper and more defined.
Because of halation, the exact same font weight will look noticeably thicker and more bloated on a dark background than on a light one. This "glowing" effect causes letters to merge together, decreases overall readability, and rapidly increases eye fatigue.
Three Typography Rules for Dark Mode
To combat halation and keep your text legible, you must make purposeful typographic adjustments when transitioning to a dark theme.
1. Lighten the Font Weight
Because white text appears bolder, you should slightly decrease the weight of your copy in dark mode. If you use a font-weight: 500 (Medium) for body copy in light mode, you should scale it down to 400 (Regular) in dark mode to achieve the same optical weight.
2. Increase Letter Spacing (Tracking)
As characters bleed outward on a dark screen, the negative space between the letters shrinks. To prevent characters from clumping together, add a touch of extra letter-spacing. A subtle addition of 0.01em to 0.03em of tracking can dramatically improve reading speed in dark mode.
3. Soften the Contrast
Pure white text (#FFFFFF) on a pure black background (#000000) creates a harsh, high-contrast display that causes visual vibration. Instead, use a soft, off-white or light gray (like #E4E4E7) on a deep charcoal background (like #121212). This maintains readability while protecting the user's eyes.
Implementing Dark Mode Typography with CSS
Let’s look at how we can implement these changes cleanly using CSS custom properties (variables) and the prefers-color-scheme media query.
If you are using modern Variable Fonts, you can adjust the font-grade axis (GRAD). Changing the grade alters the weight of the text without changing its layout width, meaning your text won't reflow or jump when switching themes!
/* Define default light-theme variables */
:root {
--bg-color: #ffffff;
--text-color: #18181b; /* Charcoal, softer than pure black */
--font-weight-body: 450;
--letter-spacing-body: normal;
--font-grade: 0;
}
/* Adjust variables for dark mode */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #e4e4e7; /* Off-white to prevent glare */
--font-weight-body: 400; /* Thinner weight to counter halation */
--letter-spacing-body: 0.02em; /* Extra breathing room */
--font-grade: -0.5; /* Fine-tune variable fonts without reflow */
}
}
/* Apply variables to typography */
body {
background-color: var(--bg-color);
color: var(--text-color);
font-weight: var(--font-weight-body);
letter-spacing: var(--letter-spacing-body);
font-variation-settings: "GRAD" var(--font-grade);
transition: background-color 0.3s, color 0.3s;
}
Conclusion
Typography is the invisible hand of user experience. When translating your product to dark mode, remember that colors are only half the battle. By slightly reducing your font weights, introducing breathing room between characters, and avoiding blinding contrast levels, you ensure your text remains comfortable, legible, and beautiful—no matter what time of day your users are reading.