How thick or thin do you want your text characters? Check out these choices:
That's 9 choices of font-weight. Each weight is available in both normal and italic style. So that's 18 different looks.
In order to get all this fine-grained control, you need to do two things:
1. Use the CSS numerical scale for specifying font-weight. The scale runs from 100 through 900. That gives you 9 font weights to choose from. A font-weight of 100 designates the lightest font-weight. A font-weight of 900 designates the heaviest font-weight. Look at the example below. On the left is the CSS code specifying font-weight. On the right is a sample of the font in that font-weight.
2. The numerical scale works best when a font-family includes lots of different weights. In the example above, the font-family is Raleway, a Google Font that you embed in your HTML document. Raleway weights cover the entire 9-weight scale, from 100 to 900. Most fonts, even most Google fonts, don't offer that many font-weights. For example, Open Sans, another Google Font, offers only 5 font-weights. The graphic below shows how a browser interprets the numerical scale when it faces a more limited range of font-weights.
If, rather than embedding fonts using a system like Google Fonts, you go the traditional route, relying on fonts installed on your user's computer, the numerical scale provides even narrower choices. For example, Arial, one of the most common user-installed fonts, typically includes just 3 font-weights. This is how a browser interprets the numerical scale for Arial:
Many fonts come in only one font-weight. Slabo is a Google Font available only in regular weight. It has no bold. When your styling calls for a weight of 600 to 900, the browser simulates bold.
A browser-simulated bold never looks as good as a designer-created bold, so if you want bold, it's best to choose a font that includes a designer-created bold.
Note: No matter how many weight choices a font-family offers, a font-weight of 400 always designates regular font-weight.
If you use Web fonts, the 100-to-900 scale doesn't apply. Rather than specify font-weight, you specify the font-family name that provides that font-weight. For example:
h1 {
font-family: opensans-bold-webfont, Arial, sans-serif;
}
p {
font-family: opensans-regular-webfont, Arial, sans-serif;
}
In the example above, h1 headings are in Open Sans bold, and paragraphs are in Open Sans regular.
Since Web fonts don't use the 100-to-900 scale, they aren't limited to 9 font-weights. A few of them offer 18 font-weights.
You can adjust font-weight relatively—with bolder and lighter. The keyword bolder specifies a font-weight bolder than the text would normally be. The keyword lighter specifies a font-weight lighter than the text would normally be.
For example, suppose you've styled h4 headings to display in a light, 300-weight Raleway.
An h4 heading would look like this.
Now, if you create a class...
.more-weight {
font-weight: bolder;
}
...and you code this HTML...
<h4 class="more-weight">An h4 heading would look like this.</h4>
An h4 heading would look like this.
If you create a class...
.less-weight {
font-weight: lighter;
}
...and you code this HTML...
<h4 class="less-weight";>An h4 heading would look like this.</h4>
