CSS - specify font weight
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 */
}
Setting font-weight
parameters we are able to work on absolute or relative values. Additionally, absolute values can be written as names or numbers.
Preview | Style |
![]() |
|
![]() |
|
Note: be careful, some fonts may do not support some number levels.
Preview | Style |
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
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 |
![]() |
|
![]() |
|
In the below example we use font combinations that may support different font-weight
values (from 100 to 900).
xxxxxxxxxx
<html>
<head>
<style>
div {
font-family: 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.
The font-weight
property can be also set to parent-relative value.
1. Lighter
xxxxxxxxxx
<html>
<head>
<style>
div {
font-family: 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
xxxxxxxxxx
<html>
<head>
<style>
div {
font-family: 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.
font-weight: inherit
font-weight: initial
font-weight: revert
font-weight: unset