The font-weight property specifies the weight or boldness of the font (their degree of blackness or stroke thickness). Note that some fonts are not available in all weights; some are available only on normal and bold.
Overview tablenormal
fontWeight
font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900font-weight: boldfont-weight: bolderfont-weight: lighterfont-weight: normalA selection of examples showing some typical uses of the font-weight property. In practise, you most probably won’t see much difference when using any values except for normal and bold.
<p class="example-one">Set text to be bold.</p>
<p class="example-two">Set text to two step darker than normal but less than a standard bold.</p>
<p class="example-three">Sets text to be one step lighter than the parent.</p>
p { font-size: 150%; }
p.example-one { font-weight: bold; }
p.example-two { font-weight: 600; }
p.example-three { font-weight: lighter; }
Quite often there are only a few weights available for a particular font family. When a weight is specified for which no face exists, a face with a nearby weight is used:
600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight).
100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight).
This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.
Although the practice — also called “Faux bold” — is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces.
100 to 900
These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. These roughly correspond to the commonly used weight names below:
Mozilla Developer Network : Article
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4