Font weight in CSS

Raleway is an example for a font family that contains all possible font weights.

Some font families usually come with different faces that have varying amounts of thickness or boldness; this thickness is referred to as the font weight in CSS.

The font-weight property is used to select the font thickness of the font (their degree of blackness or thickness).

The weight of the font is usually described by a keyword or a number. The numbers are an ordered sequence starting at 100 through 900, where each number indicates a weight that is at least as dark as its predecessor. Keywords are mapped to appropriate numbers, for example, the keyword normal is synonymous with ‘400’, and bold is synonymous with ‘700’. The keywords are: normal, bold, bolder, and lighter.

The bolder and lighter keywords select font weights that are relative to the weight inherited from the element’s parent. The computed weight is calculated based on the inherited font-weight value using the table below.

Table showing the computed value of the bolder and lighter 

keywords based on the font weight of the element’s parent.

Quite often there are font families that don’t come with all the possible font weights, and come with only a few face weights available. When a weight is specified for which no face exists, a face with a nearby weight is used. In general, bold weights map to faces with heavier weights and light weights map to faces with lighter weights.

Weight mappings for a font family with 400, 700 and 900 weight faces.

This means that sometimes, using the keywords lighter and bolder, may not give the expected result if the font family used does not have a wide range of font weights. The bolder version of a bold face can, a lot of times, look exactly the same as the bold face.


When a certain font family is used that does not have a normal or a bold face, the browser willsynthesize these faces. For the purposes of style matching, these faces must be treated as if they exist within the family. Web developers can, however, disable this feature using the font-synthesis property.

Official Syntax

Syntax:
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Initial: normal
Applies To: all elements
Animatable: yes

Values

100, 200, 300, 400, 500, 600, 700, 800, 900

The Mozilla docs describe these numbers best:

“Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 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.”

There are often value names that are commonly used and that correspond to each of the 9 weights respectively: ‘Thin’, ‘Extra Light (Ultra Thin)’, ‘Light’, ‘Normal’, ‘Medium’, ‘Semi Bold (Demi Bold)’, ‘Bold’, ‘Extra Bold (Ultra Bold)’, and ‘Black (Heavy)’.

normal

Same as ‘400’.

bold

Same as ‘700’.

bolder

Specifies a font that is bolder than the element’s parent’s font weight (among the list of available weights).

lighter

Specifies a font that is lighter than the element’s parent’s font weight (among the list of available weights).

Examples

font-weight: 300;
font-weight: 900;
font-weight: normal
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

The following are all valid font-weight declarations.font-weight: 300; font-weight: 900; font-weight: normal font-weight: bold; font-weight: bolder; font-weight: lighter;

Live Demo

Change the font weights and try different font families in the following demo to see how the font weights are rendered.

HTML

<div class="container"> <p></p> <div class="element element-1"> <p>My font family is 'Arial'. I don't have a wide range of font faces for my font family.</p> <div class="child"> My font weight is bolder than my parent's font weight. Since my parent's font family does not have a wide range of weights, my weight looks exactly the same as my parent's. </div> </div> <div class="element element-2"> <p>My font family is 'Open Sans', and my font weight is set to <code>bold</code>. My font has a wide range of font weights from 100 to 900.</p> <div class="child"> My font weight is lighter than my parent's font weight. </div> <div class="child-2 child"> My font weight is 100. </div> <div class="child-3 child"> My font weight is bolder than my parent's. </div> </div></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300); body { background-color: #2286b9; color: #555; font-size: 1.1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .container { margin: 40px auto 0; width: 90%; } .element { padding: 20px; background-color: white; color: #333; margin-bottom: 30px; } .child { padding: 10px 0 0 40px; } .element-1 { font-family: "Arial", sans-serif; font-weight: bold; } .element-1 .child { font-weight: bolder; } .element-2 { font-family: 'Open Sans', sans-serif; font-weight: bold; } .element-2 .child { font-weight: lighter; } .element-2 .child-2 { font-weight: 100; } .element-2 .child-3 { font-weight: bolder; }

RESULT

Browser Support

The font-weight property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Reference:

https://www.google.com/fonts/specimen/Ralewayhttps://drafts.csswg.org/css-fonts/#font-weight-prophttps://www.w3.org/TR/CSS2/fonts.html#propdef-font-weight