The weight of text is its degree of boldness or thickness. The property used to control it is the font-weight property.
1. font-weight
The font-weight property is an inherited property that is used to specify the weight or boldness for the textual content of an element. While some fonts are only available in normal and bold, others are in various weight levels. This means that a variety of values are supported by the property, including normal, bold, lighter, and bolder keywords, and numeric weight values, which include 100 (thin), 200 (extra light), 300 (light), 400 (normal), 500 (medium), 600 (semi bold), 700 (bold), 800 (extra bold), and 900 (heavy). In order for these values to have an effect, the relevant typeface must have them. If the specified value is not available, the browser uses various schemes to determine an alternative. Note that weights hold no semantic meaning to the browser. If you want to assign importance to a text, you should use the <strong> element introduced in Chapter 3. Figure 13.24 shows how the font-weight property is used and Figure 13.25 the result.
2. Font Weight in Design
Font weight is used to achieve various goals. When combined with the font size it can help to enhance the effects of visual hierarchy of importance. It can be used to direct attention to a word or short texts, or give text a specific feeling. Used properly, different levels of weights can help the reader navigate a long complex document with little difficulty. However, the use of weights on too many texts can be confusing and disruptive, making the eyes jump about. Furthermore, saying too many words are important defeats the purpose of saying any is important. A balance is therefore necessary. The standard use of weights involves applying them to headings, subheadings, short messages, and page numbers (where applicable). Here are some guidelines to bear in mind.
- When selecting a typeface, an important consideration is whether or not it has a bold weight. The more weights it has the better, as this provides more options and opportunities to experiment.
- Bold texts should be bold enough to stand out from surrounding text, but not so bold that it is overpowering, as this can cause visual interference, which, for example, can be in the form of the eyes being continually drawn to back them.
- Weight level should not make text illegible at the intended size. Typically, lighter weights are better for smaller text sizes and while darker ones are more appropriate for larger text sizes.
- Using a single typeface with a variety of weights is always safe, but can be a bit too conservative in some contexts, while using more than one typeface can provide more variety and more visual contrast and interest.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.