font-weight
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thefont-weightCSS property sets the weight (or boldness) of the font. The weights available depend on thefont-family that is currently set.
Try it
font-weight: normal;font-weight: bold;font-weight: lighter;font-weight: bolder;font-weight: 100;font-weight: 900;<section> <p> London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. </p></section>section { font-size: 1.2em;}Syntax
/* <font-weight-absolute> keyword values */font-weight: normal;font-weight: bold;/* <font-weight-absolute> numeric values [1,1000] */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;/* Keyword values relative to the parent */font-weight: lighter;font-weight: bolder;/* Global values */font-weight: inherit;font-weight: initial;font-weight: revert;font-weight: revert-layer;font-weight: unset;Thefont-weight property is specified using either a<font-weight-absolute> value or a relative weight value, as listed below.
Values
normalNormal font weight. Same as
400.boldBold font weight. Same as
700.<number>A
<number>value between 1 and 1000, both values included. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. This allows fine-grain control forvariable fonts. For non-variable fonts, if the exact specified weight is unavailable, afallback weight algorithm is used — numeric values that are divisible by 100 correspond to common weight names, as described in theCommon weight name mapping section below.lighterOne relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see theMeaning of relative weights section below.
bolderOne relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see theMeaning of relative weights section below.
Fallback weights
If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:
If the target weight given is between
400and500inclusive:- Look for available weights between the target and
500, in ascending order. - If no match is found, look for available weights less than the target, in descending order.
- If no match is found, look for available weights greater than
500, in ascending order.
- Look for available weights between the target and
If a weight less than
400is given, look for available weights less than the target, in descending order. If no match is found, look for available weights greater than the target, in ascending order.If a weight greater than
500is given, look for available weights greater than the target, in ascending order. If no match is found, look for available weights less than the target, in descending order.
Note:The fallback weight algorithm is only used for rendering. The computed value of the property is still the specified value.
Meaning of relative weights
Whenlighter orbolder is specified, the below chart shows how the absolute font weight of the element is determined.
Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font family has more weights available, they are ignored for the purposes of relative weight calculation.
| Inherited value | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Common weight name mapping
The numerical values100 to900 roughly correspond to the following common weight names (see theOpenType specification):
| Value | Common weight name |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | Extra Black (Ultra Black) |
Variable fonts
While many fonts have a particular weight corresponding to one of the numbers inCommon weight name mapping, most variable fonts support a range of weights providing much finer granularity, giving designers and developers more control over the chosen weight.
For TrueType or OpenType variable fonts, the "wght" variation is used to implement varying widths.
This demo loads withfont-weight: 500; set. Change the value of thefont-weight property in the.sample selector to see the weight of the text change (e.g., 200, 700). Click "Play" in the code blocks below to edit the example in the MDN Playground:
<p> ...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>@font-face { src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf"); font-family: "MutatorSans"; font-style: normal; font-weight: 1 1000;}.sample { text-transform: uppercase; font-weight: 500; font-size: 1.5rem; font-family: "MutatorSans", sans-serif;}Accessibility
People experiencing low vision conditions may have difficulty reading text set with afont-weight value of100 (Thin/Hairline) or200 (Extra Light), especially if the font has alow contrast color ratio.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | all elements and text. It also applies to::first-letter and::first-line. |
| Inherited | yes |
| Computed value | the keyword or the numerical value as specified, withbolder andlighter transformed to the real value |
| Animation type | by computed value type |
Formal syntax
font-weight =
<font-weight-absolute>|
bolder|
lighter
<font-weight-absolute> =
normal|
bold|
<number [1,1000]>
Examples
Setting font weights
HTML
<p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?"</p><div> I'm heavy<br /> <span>I'm lighter</span></div>CSS
/* Set paragraph text to be bold. */p { font-weight: bold;}/* Set div text to two steps heavier than normal but less than a standard bold. */div { font-weight: 600;}/* Set span text to be one step lighter than its parent. */span { font-weight: lighter;}Result
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-weight-prop |