CSS font-weight options

5
votes

I don't get the values 100 to 900 in CSS font-weight. I see 100 to 500 like regular size and 600 to 900 like bold. Only two font weights. Tried h1, font-size:60px, etc. Is there something I am missing?

2
css

2 Answers

5
votes

As Rich said, depends on the font, but it's a really good question because it does impact how the font renders, especially @font-face fonts. If you get the number wrong, or just use 'bold' instead of the correct number, it can render the font as jaggy.

This is a good article on that: http://css-tricks.com/watch-your-font-weight/

Sorry not to be able to answer your question - I did search and can't find any sites listing available font-weights per font. Would be a handy resource! For now you could just try the various font selling sites like Fontspring, Google Web Fonts etc, or search for the font you're using and go to one of the sites where it's sold; hopefully that site will give its available font-weight sizes.

1
votes

It depends on the font you are using. Some fonts don't have as many weights as others. Helvetica Neue is a good one to test with if you have it - it has quite a few weights.