Code highlights logo


Visual Rules

Font Weight

In CSS, font weight defines the degree of thickness in characters of a font. It is used to make text appear bold, semibold, or normal depending on the value set.

By default, the font weight is set to normal. For instance, in the following CSS code, the text will appear normal:

1p {
2 font-weight: normal;

However, if you want to bolden the text, you can set the font weight to bold:

1p {
2 font-weight: bold;

There are other font weight values you can use to represent different degrees of thickness:

  • Bold: Makes the text appear thicker than the normal weight.
  • Bolder: Bolds the text one level heavier than the inherited weight.
  • Lighter: Renders the text one level lighter than the inherited or previous weight.
  • Normal: Displays text at a normal weight.
  • 100-900: Defines the weight of the font on a scale of 100 to 900, with 100 being the thinnest and 900 being the thickest.

It is important to note that not every font comes in all font weight values and the specified weight must be available in a chosen font family to work effectively.
In cases where a font weight value is unavailable, it defaults to the closest available weight in the font family.



Set the font weight of all h2 tags to bold.


Set the font weight of the h1.title tag to lighter.


Set the font weight of the h3 tag to 600.

Sign up to start coding

Already have an account?

Sign In

Course content