CSS font-weight

Previous Next

Demo of the different values of the font-weight property.

Click the property values below to see the result:

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!
Check out the different font-weight values!

Play more with the code in our Tryit yourself editor: Try it Yourself ❯