CSS font-weight

The CSS font-weight property is used when we need to make the text thicker or thinner. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .a{font-weight: normal;}
      .b{font-weight: lighter;}
      .c{font-weight: bold;}
      .d{font-weight: bolder;}
   </style>
</head>
<body>

   <div class="a">
      <h2>font-weight: normal</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
   </div>
   
   <div class="b">
      <h2>font-weight: lighter</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
   </div>

   <div class="c">
      <h2>font-weight: bold</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>

   <div class="d">
      <h2>font-weight: bolder</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>
   
</body>
</html>
Output

font-weight: normal

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

font-weight: lighter

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

font-weight: bold

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

font-weight: bolder

Lorem ipsum dolor sit amet consectetur adipisicing elit.

CSS font-weight Syntax

The syntax of font-weight property in CSS, is:

font-weight: x;

The value of x should be any of the following:

Note - We can also use numbers such as 100, 200, 300, 400, 500, 600, 700, 800, and 900 to make the text looks thinner or thicker. 400 is equal to normal, and 700 is equal to bold.

CSS Online Test


« Previous Tutorial Next Tutorial »