How It Works CSS Font-Weight Values

CSS font-weight numbers: how do they work?

The details of how numeric values are mapped to font weights are covered in the spec which states:

The values '100' to '900' form an ordered sequence, where each number
indicates a weight that is at least as dark as its predecessor. The
keyword 'normal' is synonymous with '400', and 'bold' is synonymous
with '700'. Keywords other than 'normal' and 'bold' have been shown to
be often confused with font names and a numerical scale was therefore
chosen for the 9-value list.

'599' is not a valid value for the font-weight property

What's the meaning of the font-weight integer values in CSS?

Regarding the question in the title: The integer values of font-weight denote different possible font weights of typefaces, and they may need to be re-interpreted if the font format does not have a scale of 9 font weights. For the TrueType format, the value is the one assigned to the typeface in the OS/2 table, item usWeightClass.

Typefaces typically have names with attributes like “regular”, “light”, “heavy”, “bold”, etc. The use of such words varies, though CSS3 Fonts describes a “rough correspondence” between numbers and names.

The numbers constitute an ordinal scale only; e.g., the only thing we can say about typefaces with weights 100 and 200 is that the latter is not lighter tan the former. The correspondence between a number and the “blackness” or stroke width of characters is font-dependent.

The value normal equals 400 by definition, and the value bold equals 700 by definition. These are just keywords available in CSS as alternatives to the two numbers.

The values bolder and lighter are relative to the font weight of the parent; they map numeric values to larger or smaller values, respectively. So they do not constitute new weights.

The value inherit means that the value of a property is to be set equal to the value of the property of the parent element.

So the only real weights are the nine values from 100 to 900. For most fonts commonly used on web pages, only a few of these weights are available (most often just 400 and 700, or maybe just 400).

Regarding “Why are there such possible integer values?”, a scale of 9 weights was considered sufficient – fonts just don’t have more weights than that.

Regarding “Why don't we have the listed property string values”, the numbers are neutral and can be used independently of the naming scheme used for a font.

Regarding “why exactly these and not from 1-9”, the scale 100, 200,... allows the introduction of intermediary weights – just in case some font designer some day wants to spend time in designing more than nine typefaces. The somewhat strange numbering scheme would allow the introduction of a more fine-grained scale later.

How is font-weight rendered when fonts have not been loaded?

About font-weight

The 'font-weight' property selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'.

• font-weight - W3.org

The above quote is taken from W3.org's Recommendation mean it is the standard to be used for all browsers.

---

Rendering when weight isn't loaded

When a font weight isn't found, the browser is meant to follow a set of rules to find the nearest available option for it.

Once the font family's weights are mapped onto the CSS scale, missing weights are selected as follows:

• If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
• If the desired weight is greater than 500, weights above desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.
• If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used.
• If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.

Now, it may seem like jargon but for your case, you just need to read the last point of it.

• If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.

So ultimately, it will find if the base font is used, if not it will find anything lower than the base font, and then if nothing is still not found, it will try to find anything higher than it.

---

Rendering when bold

The normal font-weight for bold is 700. This does not chang once you start going up in font weights. If you want the font-weight of a piece of text that needs to be bolder than normal text, you will need to use bolder (or the alternative lighter) as the space between the base font weight and the bolder must always be greater unless it is at it's limit.

Below is a table of what the specific meaning of bolder and lighter is.

Base - 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

Ultimately, all this information can be found in the W3.org spec.

• font-weight - Fonts | W3.org

Why does font-weight: bolder skip boldness steps?

From the font-weight section of the CSS2.1 specification:

Values of 'bolder' and 'lighter' indicate values relative to the weight of the parent element. Based on the inherited weight value, the weight used is calculated using the chart below. Child elements inherit the calculated weight, not a value of 'bolder' or 'lighter'.

Inherited val   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

This means that anything bolder than a font-weight of 400 is given a weight of 700, and anything bolder than a font-weight of 700 is given a weight of 900.

This is exactly what is happening in your JSFiddle demo.

Bolder

This is some text with weight 400.        <!-- 400 -->
This text is one step bolder than above.  <!-- bolder than 400 = 700 -->
This text is one step bolder than above.  <!-- bolder than 700 = 900 -->
This text is one step bolder than above.  <!-- bolder than 900 = 900 -->
This text is one step bolder than above.  <!-- ... -->

Lighter

This is some text with weight 400.        <!-- 400 -->
This text is one step lighter than above. <!-- lighter than 400 = 100 -->
This text is one step lighter than above. <!-- lighter than 100 = 100 -->
This text is one step lighter than above. <!-- ... -->

Font-weight values not working

If you want to use a different type of font weight, it is important that your font supports this weight type.

If the font doesn't have a 500 or 600 type, it is not possible to use this font weight. The browser will automatically pick the closest value to the font that is available. In this case 600 will change in the 700 which is supported

Font weight value is not working properly

This has nothing to do with the CSS you provided and more to do with the font in question (which you did not specify).

Take this font, for example. It has 400 (normal), 600, 700 (bold), 800, and 300 font weight styles.

As stated by CSS-Tricks:

In order to see any effect using values other than 400 or 700, the font being used must have built-in faces that match those specified weights.

In short, if you are not happy with the font-weight available, try using a different font.

Is there a way to say use the current font weight without making it lighter/bolder?

font-weight doesn't have a special keyword value for the "current weight". Instead, you use the CSS-wide inherit keyword to inherit the weight from the parent element (the element that contains the so-called "surrounding text" along with the element in question):

strong {  font-weight: inherit;  text-transform: uppercase;}
header {  font-weight: bold;}

<header>  <h1>Header</h1>  <p>This is a <strong>header</strong>.</p></header><footer>  <p>This is a <strong>footer</strong>.</p></footer>

What is a situation where the CSS bolder can be used properly?

font-weight: bolder is used to set the next level of boldness above the base weight. This is useful if you are already using a bold font, but the font family supports a bolder weight. For example Open Sans (https://fonts.google.com/specimen/Open+Sans) supports 10 weights. If your base font is Open Sans Bold font-weight: bolder will kick it up to Open Sans Extra-Bold if it's available. Or if you are using light it will kick it up to normal, etc.

Here's a fiddle that shows one example in practice:

https://jsfiddle.net/zv03Lf5v/3/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
p {  font-family: 'Open Sans';  font-weight: bold;  font-size: 36px;}
p span {  font-weight: bolder}
p.lighter {  font-weight: 200;}

<p>  Open Sans <span>Bolder</span></p>
<p class="lighter">  Open San Light <span>Bolder</span></p>

---

Related Topics