❮❮ PREV NEXT ❯❯

CSS - Font Weight

The font-weight property in CSS changes the weight of the text. i.e. It can make the texts thicker or thinner based on the values provided to it.

Font Weight in CSS

As said font-weight property changes the weight of the text.

Usually it accepts few values like normal, bold, bolder, lighter and the numbers 100, 200, 300, 400, 500, 600, 700, 800, 900.

Let us see the font-weight property in action with the below example.

Example of Font Weight in CSS

Example :

<html>
<head>
	<style>
		p.normal {
  			font-weight: normal;
  		}
		p.bold {
  			font-weight: bold;
  		}
		p.bolder {
  			font-weight: bolder;
  		}
		p.lighter {
  			font-weight: lighter;
  		}
	</style>	
</head>
	
<body>
	<p class="normal"> 
		This is a text with normal weight.
	</p>
	<p class="bold"> 
		This is a text with bold weight.
	</p>  
	<p class="bolder"> 
		This is a text with bolder weight.
	</p>
	<p class="lighter"> 
		This is a text with lighter weight.
	</p> 
</body>
</html>

Output :

So, if you look the above example, we have defined four <p> elements.

<p class="normal">
	This is a text with normal weight.
</p>
<p class="bold">
	This is a text with bold weight.
</p>
<p class="bolder">
	This is a text with bolder weight.
</p>
<p class="lighter">
	This is a text with lighter weight.
</p>

And each <p> element is having a class that is linked to a CSS property.

<style>
	p.normal {
		font-weight: normal;
	}
	p.bold {
		font-weight: bold;
	}
	p.bolder {
		font-weight: bolder;
	}
	p.lighter {
		font-weight: lighter;
	}
</style>

And if you look at the output, four texts have different text weights based on the font-weight value provided.

Regarding the numeric values 100, 200, 300, 400, 500, 600, 700, 800 and 900, you can try it on your own and see how the weight changes.

❮❮ PREV NEXT ❯❯