Irradiation Illusion: Why white looks bigger than black

• 1 min read
css
Irradiation illusion

White text on dark backgrounds looks heavier than it actually is. Light bleeds past the edges of each letter, making the font appear bolder than it is.

Road sign designers figured this out decades ago. Fonts like Wayfinding Sans Pro built for highway signage ship two versions of every weight. The one meant for light-on-dark is thinner, so both look equal to a driver at speed.

Same idea works on the web. Make your light mode font-weight slightly heavier than your dark mode. Both will feel the same, even though they aren’t.

The fix is rather simple, just adjust the weights for both modes:

:root {
    --font-weight-regular: 450;
}

[data-theme="dark"] {
    --font-weight-regular: 400;
}

The kind of detail no one notices when it’s right. Everyone feels when it’s wrong.

Sometimes even after doing all the right things in theory, there are high chances it can feel off. Some manual adjustments has to be done in order for the design to appear natural in practice (not theory).