Skip to content
Leon Paternoster This day’s portion

Don’t make your body text font-weight light

| Comments

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.

Comments

Add a comment

Required fields marked * I won’t publish or share your email address. Privacy statement.

Comments are moderated and won’t appear straight away. Subscribe to the comments feed to see when new comments are published.

No comments yet 🦉.