font-weight:700 or font-weight:bold which one we should follow in CSS?

You can find a full breakdown of all valid values for font-weight in the CSS Fonts Module Level 3 Specification. Under section 3.2 (font-weight property) we find the following list:

  • 100 – Thin
  • 200 – Extra Light (Ultra Light)
  • 300 – Light
  • 400 – Normal
  • 500 – Medium
  • 600 – Semi Bold (Demi Bold)
  • 700 – Bold
  • 800 – Extra Bold (Ultra Bold)
  • 900 – Black (Heavy)

You likely noticed that 700 is “bold”. So either way, you’ll get the same results. (The only other one which corresponds to a number is “normal” – 400.)

The complete list is:

normal – Same as ‘400’
bold – Same as ‘700’
bolder – Specifies a bolder weight than the inherited value
lighter – Specifies a lighter weight than the inherited value

There’s no real difference. It’s more about what you and your team are used to.

Leave a Comment