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.


font-weight in numbers is better then then default bold because in numbers you can adjust the bold as per your design requirements.

Check this http://www.w3.org/wiki/CSS/Properties/font-weight


My basic answer is the same as already given twice, but with the correct reference:

They are synonymous by definition, according to CSS 2.1 specification, clause 15.6. This is the authoritative specification.

The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'.

The word bold makes code more readable than the number 700, which has no intuitive significance. The number might be more suitable for readability in situations where you specify font weights using numbers, to get weights for which there are no keywords. Such situations are rare, partly because font weights other than 400 and 700 are not supported for most fonts.