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.