d416b6914e
* Updating GitHub URL for checklist * New illo: a_checklist_for_choosing_type_2.svg * Updating `figcaption` to match new illo * Typeface credits on checklist article * Typeface credits on anatomy article * Typeface credits on language article * Typeface credits for CASL * Typeface credits on all axis gloss. terms * Typeface credits in remaining new gloss. illos
1.9 KiB
Weight (wght in CSS) is an axis found in many variable fonts. It controls the font file’s weight parameter.
The Google Fonts CSS v2 API defines the axis as:
| Default: | Min: | Max: | Step: |
|---|---|---|---|
| 400 | 1 | 1000 | 1 |
Weight is the overall thickness of a typeface’s strokes in any given font. The most common weights are regular and bold, but weights can cover extremes from the very light to the very heavy. With the weight axis in variable fonts, the number of instances or weights is effectively unlimited.
In CSS, we can assign a variable weight property to an element of our choosing:
p {
font-weight: 350;
}
strong {
font-weight: 780;
}
Unlike in non-variable fonts, the font-weight values no longer have to be declared in units of 100. Rather than have body copy set in a Regular weight, which would usually sit at 400, we can set it a little lighter, at 350. Similarly, whereas strong text would usually be set in a Bold weight, most often with a value of 700, we’re setting it at 780: heavier than a Bold, but not quite as heavy as an Extra Bold.