How to make Text Font Bold using CSS

The beauty about CSS is that you can control so much of the design simply by applying design properties to the HTML elements.

One of most important parts of design is fonts and text in general.

In this post, we'll learn how to make text bold using CSS.

How to make text bold using CSS

When you want to make text bold, you can use the font-weight property on the text element.

The font-weight property can be set to a number between 100 and 900. The higher the number, the bolder the text.

The default/normal value is 400. You can also use normal and bold as values which are equivalent to 400 and 700 respectively.

Let's look at an example:

HTML
<p class="normal">Normal text</p>
<p class="bold">Bold text</p>

CSS
.normal {
    font-weight: 400;
}

.bold {
    font-weight: 700;
}

That's all you need to do to see change the font weight and render bold text.

Conclusion

In this post, we learned how to make text bold using CSS.

Simply apply the font-weight property to the text element and set it to a value between 100 and 900 or use normal or bold.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share