48

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.

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
Pavan Kumar
  • 1,616
  • 5
  • 26
  • 38
  • 1
    If you want your text Bold then you should use `font-weight:bold;` – khurram Jun 06 '12 at 06:37
  • 1
    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 http://destination-code.blogspot.com/2009/01/font-weight-number-keywords-100-900.html – Volker E. Feb 21 '15 at 01:16
  • 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. – Connor Gurney Feb 15 '18 at 16:05

5 Answers5

102

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.

Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
Sampson
  • 265,109
  • 74
  • 539
  • 565
  • Firefox doesn't respect this. I don't know about others. – NH. Jun 13 '14 at 17:42
  • 1
    @NH. 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. – Roy Tinker Jun 07 '17 at 20:15
  • 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’”. – caw Feb 20 '19 at 00:58
19

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

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 1
    fine. but is it works in all major browsers regarding adjustments of the values? – Pavan Kumar Jun 06 '12 at 07:05
  • 1
    Nope. Firefox at least doesn't even support bolds other than 400 and 700. – NH. Jun 13 '14 at 17:41
  • 1
    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? – Cannicide May 04 '17 at 22:11
  • 2
    @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. – Robert Kusznier Feb 15 '18 at 12:37
  • Ah, that makes more sense. Thanks @RobertKusznier – Cannicide Feb 18 '18 at 18:08
18

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.

Phil
  • 1,996
  • 1
  • 19
  • 26
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • so which one is better to go ? – Pavan Kumar Jun 06 '12 at 07:19
  • 3
    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. – Jukka K. Korpela Jun 06 '12 at 07:46
1

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.

Robert Kusznier
  • 6,471
  • 9
  • 50
  • 71
0

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 ..

scottj
  • 1