The font-weight
CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the font-family
you are using. Some fonts are only available in normal
and bold
.
/* Keyword values */ font-weight: normal; font-weight: bold; /* Keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* Numeric keyword values */ font-weight: 1 font-weight: 100; font-weight: 100.6; font-weight: 123; font-weight: 200; font-weight: 300; font-weight: 321; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; font-weight: 1000; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset;
The font-weight
property is specified using any one of the values listed below.
normal
400
.bold
700
.lighter
bolder
<number>
<number>
value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. Certain commonly used values correspond to common weight names, as described in the Common weight name mapping section below.In earlier versions of the font-weight
specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900. CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000. This enables variable fonts to provide a much finer-grained range of font weights. Note that this is not yet supported by all browsers.
If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:
400
and 500
inclusive: 500
, in ascending order.500
, in ascending order.400
is 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.500
is 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.When lighter
or bolder
is specified, the following chart shows how the absolute font weight of the element is determined:
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 |
The numerical values 100
to 900
roughly correspond to the following common weight names:
Value | Common weight name |
---|---|
100 | Thin (Hairline) |
200 | Extra Light (Ultra Light) |
300 | Light |
400 | Normal |
500 | Medium |
600 | Semi Bold (Demi Bold) |
700 | Bold |
800 | Extra Bold (Ultra Bold) |
900 | Black (Heavy) |
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
For TrueType or OpenType variable fonts, the "wght" variation is used to implement varying widths.
For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which font-weight can be any number between 1 and 1000.
<header> <input type="range" id="weight" name="weight" min="1" max="1000" /> <label for="weight">Weight</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p> </div>
/* Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans) and is used here under the terms of its license: https://github.com/LettError/mutatorSans/blob/master/LICENSE */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf'); font-family:'MutatorSans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'MutatorSans', sans-serif; }
let weightLabel = document.querySelector('label[for="weight"]'); let weightInput = document.querySelector('#weight'); let sampleText = document.querySelector('.sample'); function update() { weightLabel.textContent = `font-weight: ${weightInput.value};`; sampleText.style.fontWeight = weightInput.value; } weightInput.addEventListener('input', update); update();
<font-weight-absolute> | bolder | lighterwhere
<font-weight-absolute> = normal | bold | <number>
<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>
/* 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; }
People experiencing low vision conditions may have difficulty reading text set with a font-weight
value of 100
(Thin/Hairline) or 200
(Extra Light), especially if the font has a low contrast color ratio.
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 4 The definition of 'font-weight' in that specification. | Working Draft | Defines font-weight to accept any numbers between 1 and 1000. |
.CSS Fonts Module Level 3 The definition of 'font-weight' in that specification. | Candidate Recommendation | No change. |
CSS Transitions The definition of 'font-weight' in that specification. | Working Draft | Defines font-weight as animatable. |
CSS Level 2 (Revision 1) The definition of 'font-weight' in that specification. | Recommendation | No change. |
CSS Level 1 The definition of 'font-weight' in that specification. | Recommendation | Initial definition. |
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | the keyword or the numerical value as specified, with bolder and lighter transformed to the real value |
Animation type | a font weight |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 2 | 12 | 1 | 3 | 3.5 | 1.3 |
<number> syntax |
62 | ? | 61 | No | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | Yes | Yes | 4 | 6 | 3.1 | Yes |
<number> syntax |
? | 62 | ? | 61 | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight