CSS Font Weight

Please Share On:

Definition:

CSS font-weight is used to set the boldness of the font. Its property values are normal, bold, bolder, lighter, or defined in hundreds like 100, 200, 300,…. up to 900. 100 is the lightest, 400 is the normal font-weight and 700 is the same as bold value.

Syntax:

font-weight: normal | bold | bolder | lighter | 100 |200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Property Value:

Property ValueDescription
1) normalThis is a default font weight, where browsers display normal fonts.
2) boldThis property value defines the thickness of the font.
3) bolderThis property value defines thicker fonts
4) lighterThis property value defines the lighter fonts.
5) NumbersDefines in number like 100, 200,300,400,500,600,700,800 and 900.
5.1) 100100 is the lighter font-weight
5.2) 200200 is a little bolder than 100 & little lighter than 300.
5.3) 300300 is a little bolder than 200 & little lighter than 400.
5.4) 400400 is the same as a normal font-weight
5.5) 500500 is a little bolder than 400 & little lighter than 600.
5.6) 600600 is a little bolder than 500 & little lighter than 700.
5.7) 700700 is the same as bold font-weight
5.8) 800800 is a little bolder than 700 & little lighter than 900.
5.9) 900900 is the bolder font-weight

1. normal

Definition:

This is a default font-variant, where browsers display normal fonts.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .normal{
      border: 3px solid black;
      background-color: pink;
      font-weight: normal;
    }
    </style>
  </head>

  <body>
  	<div class="normal">This is a paragraph with a normal font-weight.</div>
  </body>
</html>

Output:

font-weight: normal;

try it yourself

2. bold

Definition:

This property value defines the fonts thickness. 700 in number has the same font-weight like bold.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .bold{
      border: 3px solid black;
      background-color: pink;
      font-weight: bold;
    }
    </style>
  </head>

  <body>
  	<div class="bold">This is a paragraph with a bold font-weight.</div>
  </body>
</html>

Output:

font-weight: bold;

try it yourself

3. bolder

Definition:

This property value defines thicker fonts. 900 in number is the bolder font-weight.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .bolder{
        border: 3px solid black;
        background-color: pink;
        font-weight: bolder;
      }
    </style>
  </head>

  <body>
  	<div class="bolder">This is a paragraph with a bolder font-weight.</div>
  </body>
</html>

Output:

font-weight: bolder;
try it yourself

4. lighter

Definition:

This property value defines the lighter fonts. 100 in number is the same font-weight as lighter.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .lighter{
      border: 3px solid black;
      background-color: pink;
      font-weight: lighter;
    }
    </style>
  </head>

  <body>
  	<div class="lighter">This is a paragraph with a lighter font-weight.</div>
  </body>
</html>

Output:

font-weight: lighter;

try it yourself

5. number

Font-weight can be defined in number from 100 to 900, which is from lighter to bolder. 100 is the lighter font-weight. 400 is the normal font-weight and 700 is the bolder font-weight. Let see each font-weight output using in number.

5.1) font-weight: 100;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.number{
  border: 3px solid black;
  background-color: pink;
  font-weight: 100;
}
</style>
</head>
   
<body>
<div class="number">This is a paragraph with font-weight is equal to 100. This font-weight is as same as lighter.</div>
</body>
</html>

Output:

font-weight: 100;
try it yourself

5.2) font-weight: 200;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .number{
        border: 3px solid black;
        background-color: pink;
        font-weight: 200;
      }
    </style>
  </head>

  <body>
    <div class="number">This is a paragraph with font-weight is equal to 200. </div>
  </body>
</html>

Output:

font-weight: 200;
try it yourself

5.3) font-weight: 300;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .number{
        border: 3px solid black;
        background-color: pink;
        font-weight: 300;
      }
    </style>
  </head>

  <body>
    <div class="number">This is a paragraph with font-weight is equal to 300. </div>
  </body>
</html>

Output:

font-weight: 300;

try it yourself

5.4) font-weight: 400;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 400;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 400. 400 is the same as normal.</div>
  </body>
</html>

Output:

font-weight: 400;

try it yourself

5.5) font-weight: 500;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 500;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 500. </div>
  </body>
</html>

Output:

font-weight: 500;

try it yourself

5.6) font-weight: 600;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 600;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 600. </div>
  </body>
</html>

Output:

font-weight: 600;

try it yourself

5.7) font-weight: 700;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 700;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 700. </div>
  </body>
</html>

Output:

font-weight: 700;

try it yourself

5.8) font-weight: 800;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 800;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 800. </div>
  </body>
</html>

Output:

font-wieght: 800;

try it yourself

5.9) font-weight: 900;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 900;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 900. </div>
  </body>
</html>

Output:

font-weight: 900;

try it yourself

Donate to support writers

You may be interested in the following topics:

Post Views: 348

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial