Don’t make your body text font-weight light
I use the excellent Stylus add-on to fix a lot of broken websites, and by far the most common single line of text I enter is body {font-weight: normal;}
, because someone, somewhere has declared body {font-weight: 300;}
, thereby making all elements render with a lighter font weight than they would by default. That includes paragraphs and list items.
Don’t do this! In one fell swoop, you’re making your website difficult to read for anyone:
- using a less than high-spec mobile phone
- using a less than high-spec desktop monitor
- who doesn’t have perfect eyesight
Assuming your reader does have a great device and perfect eyesight, you’re still taking a risk – it’s quite possible you’ve paired font-weight: 300
with color: #888
on background-color: #fff
. Or you’ve not made your body copy nice and big.
Lighter than normal text is readable over short runs at a large type size, so it might be appropriate for titles and various call-outs. If you want to use font-weight: 300
(or even lighter), only apply it to specific elements, e.g. h1 {font-weight: 300;}
, never to your body
.