He ain't heavy - it's my font-weight!
CSS allows us set the thickness (or boldness) of text with the font-weight property.
Thick or thin, CSS is "in".
The form for a font-weight declaration is:
font-weight: value
value may be a name or a number.
This table shows the appearance of the font-weight values.
| font-weight: 100 | |
| font-weight: 200 | |
| font-weight: 300 | |
| font-weight: 400 | Normal |
| font-weight: 500 | |
| font-weight: 600 | |
| font-weight: 700 | Bold |
| font-weight: 800 | |
| font-weight: 900 |
Notice that WebTV displays the values 100-500 as normal and the values 600-900 as bold.
Both MSIE 6.0 and Netscape 7.2 display the values 100-500 as normal and the values 600-900 get progressively thicker, but 700 & 800 appear the same.
PC Screenshot (white page)
PC Screenshot (black page)
Since we're discussing font-weight, let's revisit the HTML tags that also give us bold text, bold and strong.
Html's <b>text</b> renders text as bold.
Html's <strong>text</strong> is also rendered as bold text by most browsers.
So why use <strong> when <b> will do the job? While they both look the same, the strong has additoinal meaning. Strong not only looks "strong", but it also sounds strong when it is read by a text reader. So strong is a better choice whenever you want to make a strong statement.
Even though bold text is the default for both of these tags, you can declare precisely just how bold you want them to be with CSS:
b, strong { font-weight : bold }
b, strong { font-weight : 700 }
Use font-weight on a page. Post your page.
Happy coding!
Gnubee
