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

Question

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.

Overstep

If you want your text Bold then you should use font-weight:bold; – Blockhouse

Generally speaking, when the font has an appropriate typeface for one of the numeric weights, browser should display that typeface. Back in the days browsers like Safari and IE didn't follow this and displayed instead of the appropriate font-weight: 600 typeface the normal one in faux bold. See also destination-code.blogspot.com/2009/01/… – Daystar

From a semantic standpoint, I prefer the words over the numbers. It reads easier as thin over 300, or bold over 700. Personal preference, though. – Hash

Answer 1

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

Monometallism

fine. but is it works in all major browsers regarding adjustments of the values? – Overstep

Nope. Firefox at least doesn't even support bolds other than 400 and 700. – Deventer

In Chrome, nothing under 700 works for me. Everything over 700 is the same thing as font-weight:bold. If this is the case in your browser/most browsers, you should probably use font-weight:bold, right? – Tatyanatau

@IamGues That happens when no fonts are provided for weight heavier than bold (which is 700). The browser is simply "rounding" to the nearest defined font - if you tell browser font-weight: 900, but it doesn't find that font in weight 900 (nor 800) but it finds in 700, then it displays 700 one. – Norma

Ah, that makes more sense. Thanks @RobertKusznier – Tatyanatau

Answer 2

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.

Rani

Firefox doesn't respect this. I don't know about others. – Deventer

@Deventer It may depend on which fonts you have installed on your system, and which weights/styles are available. If you declare font faces in CSS with varying weights and styles (and the same font name), FF seems to understand and apply as expected, although it sometimes applies faux-bold and faux-italic differently from other browsers sometimes. – Appointment

Actually, the referenced list itself is not the correct source, as it says the following right above that list: “These [integer values] roughly correspond to the commonly used weight names below”. But still, right below that list of integer values, in the section that you also quoted, it says “normal – Same as ‘400’” and “bold – Same as ‘700’”. – Mcdevitt

Answer 3

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.

Verisimilar

so which one is better to go ? – Overstep

You asked which one is correct. The answer is that both are correct, and synonymous. You also asked which one to use, and the correct technical answer is: whichever you prefer. I gave some things to consider when deciding on your preference. – Verisimilar

Answer 4

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.

Norma

Answer 5

In certain browsers on Windows (IE, FF), doing font-weight:800 will not work with various UTF-8 fonts.. Use font-weight: bold or font-weight: bolder ..

I found this out the hard way while producing a thing for BBC Kyrgyz ..

Amphidiploid