Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 919
Pavan Kumar Avatar asked Jun 06 '12 06:06

Pavan Kumar


People also ask

What is normal font-weight CSS?

font-weight: 400 is supposed to be equal to normal , while 700 is equal to bold . Finally there are the relative values bolder and lighter that make a bit of text one step bolder or lighter than the default weight (which in turn depends on the absolute font-weight value you defined).

What is bold font-weight CSS?

400 – Normal. 500 – Medium. 600 – Semi Bold (Demi Bold) 700 – Bold.


Video Answer


2 Answers

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.

like image 60
Sampson Avatar answered Oct 05 '22 21:10

Sampson


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

like image 21
sandeep Avatar answered Oct 05 '22 19:10

sandeep