Languages
[Edit]
EN

CSS - specify font weight

6 points
Created by:
Ela-Davey
303

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

Quick solution:

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

or:

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

 

Detailed description

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

PreviewStyle

font-weight: normal

font-weight: bold

2. Absolute weights by numbers

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

PreviewStyle

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

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

PreviewStyle

font-weight: lighter 

font-weight: bolder 

 

Practical examples

1. Absolute weights

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

// ONLINE-RUNNER:browser;

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

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

2. Relative weights

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

1. Lighter

// ONLINE-RUNNER:browser;

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

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

// ONLINE-RUNNER:browser;

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

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.

Other values

  • font-weight:¬†inherit
  • font-weight:¬†initial
  • font-weight:¬†revert
  • font-weight:¬†unset

References

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join