font-weight: 300 considered harmful | CSS-Tricks

Tomáš Janoušek:

Many web pages these days set font-weight: 300 in their stylesheet. With DejaVu Sans as my preferred font, this results in very thin and light text that is hard to read, because for some reason the “DejaVu Sans ExtraLight” variant (weight 200) is being used for weights < 360 (in Chrome; in Firefox up to 399). Let’s investigate why this happens and what can be done about it.

Why are people setting font-weight: 300; at all? Well, Mac people, probably. On my macOS Catalina computer, look at the differences between some of the default and built-in fonts between 400 and 300.

400 weight on the top, 300 weight on the bottom

I wouldn’t blame a designer for going using a 300 weight in some cases. In fact, 11 years ago I published a snippet called “Better Helvetica” that touted this.

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

But for Tomáš, whose default font is DejaVu Sans (a default on many Linux and Android systems) the font is difficult to read when the type is that thin. Part of the issue is that if a fallback font doesn’t happen to have a 300, the spec says it can fallback all the way to 100 if needed. I believe the technical term for that is pretty gosh-darned thin.

I’ll try to avoid that myself (or use it when I’m loading web fonts I know have it), but check out Tomáš’ article for a fix on your computer if this bugs you on many sites. This actually reminds me of the different Levels of Fix.

Direct Link →