Languages
[Edit]
EN

CSS - specify font weight

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:

or:

 

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
PreviewStyle

font-weight: normal

font-weight: bold

2. Absolute weights by numbers

Edit

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

Edit

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

Edit

1. Absolute weights

Edit

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

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

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

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

Edit
  • font-weight: inherit
  • font-weight: initial
  • font-weight: revert
  • font-weight: unset

References

Edit

Alternative titles

  1. CSS - font different weights
  2. CSS - set font weight
  3. CSS - font weight level
1
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
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