font-weight:700 or font-weight:bold which one we should follow in CSS?
I have seen some websites, which mentioned in CSS - font-weight: 700 or font-weight: bold. But both results are the same. Which one is the correct and how should we follow? Please suggest me.
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 valuelighter - 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.
Functionally they are equal, but style-wise I'd say choose one of the methods and be consistent with it: either you use only keywords or only numerical identifiers. That makes the CSS code easier to understand.
As fonts have much broader spectrum of weights than only regular and bold, e.g. extra light, light, book, medium, semibold, black, extra black, when using custom fonts it's usually impossible to not use numerical identifiers. In these situations I think it's better to avoid using regular and bold at all, using 400 and 700 instead. That is more consistent and simplifies understanding of CSS - even an unexperienced developer can easily grasp that 400 is thinner than 500, but he may not know which one is thinner when he needs to compare regular and 500.
In situations, where the only weights you use are regular and bold, it's perfectly reasonable and more readable to use keywords instead of numerical identifiers. But at my work such situations almost don't happen at all.