Why font-weight: 300 Can Make Text Unreadable

Tomáš Janoušek highlights a widespread Web design habit that causes readability problems for many users: setting font-weight: 300 in stylesheets. When he uses DejaVu Sans as his preferred font, this results in extremely thin, hard-to-read text. The reason, as he explains, is that the “DejaVu Sans ExtraLight” variant (weight 200) gets selected for weights below 360 in Chrome, and below 400 in Firefox.

400 weight on the top, 300 weight on the bottom

Designers often turn to the 300 weight because of how it renders on macOS. Comparing system fonts at 400 versus 300 on Catalina shows noticeable differences. A weight of 300 has its place — it even appeared in Chris Coyier's own “Better Helvetica” snippet from 11 years ago.

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

However, the problem runs deeper than preferences. If a fallback font lacks a 300 weight, the CSS spec allows the browser to fall back all the way to weight 100. For users like Janoušek, whose default font is DejaVu Sans — a common default on Linux and Android — that results in text that is, technically speaking, pretty gosh-darned thin.

Anyone who experiences this issue across many sites may want to apply Janoušek’s suggested local fix, laid out in his article. For those who write CSS, the advice is to either avoid setting a weight you don’t actually load, or ensure web fonts that include the 300 face are available before requesting it.