[Edit]

CSS - specify font weight

1 contributors

2 contributions

0 discussions

6 points

Created by:

Ela-Davey

663

In this article, we would like to show you how to specify font-weight in CSS.

Quick solution:

xxxxxxxxxx
 
div {
    font-weight: bold;  /* or: normal */
}

or:

xxxxxxxxxx
 
div {
    font-weight: 700;  /* or one of the: 100, 200, 300, 400, 500, 600, 700, 900 */
}

Detailed description

Edit

Setting font-weight parameters we are able to work on absolute or relative values. Additionally, absolute values can be written as names or numbers.

1. Absolute weight by names

Edit

Preview	Style
	`font-weight: normal`
	`font-weight: bold`

2. Absolute weights by numbers

Edit

Note: be careful, some fonts may do not support some number levels.

Preview	Style
	`font-weight: 100`
	`font-weight: 200`
	`font-weight: 300`
	`font-weight: 400`
	`font-weight: 500`
	`font-weight: 700`
	`font-weight: 800`
	`font-weight: 900`

3. Relative weight

Edit

In the below table we present relative weights for the normal font, but you can use relative weights with other parent-weights too.

Preview	Style
	`font-weight: lighter`
	`font-weight: bolder`

Practical examples

Edit

1. Absolute weights

Edit

In the below example we use font combinations that may support different font-weight values (from 100 to 900).

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    div {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
​
  </style>
</head>
<body>
  <div style="font-weight: normal">font-weight: normal</div>
  <div style="font-weight: bold">font-weight: bold</div>
  <br />
  <div style="font-weight: 100">font-weight: 100</div>
  <div style="font-weight: 200">font-weight: 200</div>
  <div style="font-weight: 300">font-weight: 300</div>
  <div style="font-weight: 400">font-weight: 400 (equivalent to normal)</div>
  <div style="font-weight: 500">font-weight: 500</div>
  <div style="font-weight: 600">font-weight: 600</div>
  <div style="font-weight: 700">font-weight: 700 (equivalent to bold)</div>
  <div style="font-weight: 800">font-weight: 800</div>
  <div style="font-weight: 900">font-weight: 900</div>
</body>
</html>

Auto running

Note: use own external font to be sure if different weights are supported.

2. Relative weights

Edit

The font-weight property can be also set to parent-relative value.

1. Lighter

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    div {
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }
​
    .lighter { font-weight: lighter }
​
  </style>
</head>
<body>
  <div>normal</div>
  <div class="lighter">
    lighter x1
    <div class="lighter">lighter x2</div>
  </div>
  <br>
</body>
</html>

Auto running

Note:

If you don't see the difference between lighter levels, it means that the used fonts installed in your operating system do not support these levels.

2. Bolder

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    div {
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }
​
    .bolder { font-weight: bolder }
​
  </style>
</head>
<body>
  <div>normal</div>
  <div class="bolder">
    bolder x1
    <div class="bolder">bolder x2</div>
  </div>
  <br>
</body>
</html>

Auto running

Note:

If you don't see the difference between bolder levels, it means that the used fonts installed in your operating system do not support these levels.