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:

normal - used to make the text looks normal. This is the default value
bold - used to make the text looks bold
bolder - used to make the text looks bolder
lighter - used to make the text looks lighter
initial - used to use the default value
inherit - used to use the value inherited by the parent element

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 »