Skip to main content

Explore your training options in 10 minutes

CSS Bold: A Guide to Using Font-Weight

Christina Kopecky - December 29, 2020

To create a CSS bold text effect, you must use the font-weight property. The font-weight property determines the “weight” of a font, or how bold that font appears. You can use keywords or numeric values to instruct CSS on how bold a piece of text should be.

As developers, in going to layout a website, sometimes we want to draw attention to something. There are a number of ways we can do that. The most basic of way is to increase the font-weight of the text you want to highlight. This refers to making text appear in emboldened.

In this article, we will talk about font-weight, how to set it and give an illustration of the different possible values for the property.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

CSS Bold: A Guide

The font-weight property sets how bold text should appear on the screen. You can use either keywords or a numeric value to instruct CSS on how bold a particular set of text should appear.

The syntax of the CSS font-weight property is as follows:

font-weight: weightOfFont;

The value of weightOfFont is the weight of the font you want to use for the element to which the style is applied.

The font-weight property accepts a few different values, depending on the font-weight you want to set for a particular element.

The CSS Bold Scale

Think of your font-family as having a scale from 100-1000 on the boldness scale. The higher the number, the bolder the font is.

Do some research on your preferred font-family. This will let you be sure the result will be as light or as bold as you would like on your site. Some font-families don’t utilize the entire scale.

The following code illustrates how light and how dark a popular font called ‘Arial’ can get, using both numbers and keywords:

<!DOCTYPE html>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
     body {
       font-family: 'Arial';
       font-size: 3rem;
     span {
       font-size: 1.5rem;
     p:nth-child(1) {
       font-weight: normal;
     p:nth-child(2) {
       font-weight: bold;
     p:nth-child(3) span {
       font-weight: bolder;
     p:nth-child(4) span {
       font-weight: lighter;
     p:nth-child(5) {
       font-weight: 100;
     p:nth-child(6) {
       font-weight: 200;
     p:nth-child(7) {
       font-weight: 300;
     p:nth-child(8) {
       font-weight: 400;
     p:nth-child(9) {
       font-weight: 500;
     p:nth-child(10) {
       font-weight: 600;
     p:nth-child(11) {
       font-weight: 700;
     p:nth-child(12) {
       font-weight: 800;
     p:nth-child(13) {
       font-weight: 900;
   <p>Hello World! <span>-- Normal</span></p>
   <p>Hello World! <span>-- Bold</span></p>
   <p>Hello World!
     <span>-- Bolder
     -- child is bolder than parent
   <p>Hello World! <span>-- Lighter 
     -- child is lighter than parent
   <p>Hello World! <span>-- 100</span></p>
   <p>Hello World! <span>-- 200</span></p>
   <p>Hello World! <span>-- 300</span></p>
   <p>Hello World! <span>-- 400 'normal'</span></p>
   <p>Hello World! <span>-- 500</span></p>
   <p>Hello World! <span>-- 600</span></p>
   <p>Hello World! <span>-- 700 'bold'</span></p>
   <p>Hello World! <span>-- 800</span></p>
   <p>Hello World! <span>-- 900</span></p>

Lighter and Bolder: What do they actually mean?

The main thing that needs to be pointed out here is that lighter and bolder are not a literal translation. Bolder here doesn’t mean “bolder than bold”.

Bolder and lighter actually mean, in this context, how bold or how light they are in relation to their parent element. So when we make a child element bolder, they will be one relative font-weight darker than their parent – same goes for lighter.

The relative font-weights are as follows:

Relative font-weight Actual font-weight
thin 100
normal 400
bold 700
heavy 900

So, we could use the font-weight: bold property to set the font-weight of a paragraph of text to 800. When a child is one relative weight bolder than their parent, it uses the table above to figure out how bold to make it.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

For example, say I have a child that has a parent with a font-weight of 400. If I set the value of the font-weight on the child to bolder, the font-weight on the child becomes 700.

This is because the child is one relative font-weight darker than the parent. If the parent is already as dark or as light as it can go, those property values won’t do anything.

CSS Font Weight Example

Suppose we are designing a website for The Seattle Stamp Club, a local stamp society. The stamp society has asked us to make the About Us heading on the About page of their website appear in bold. This will draw the visitor’s attention to the heading.

The stamp club has asked us to add a block of text to their website with the history of the club. This block of text should appear in the normal font-weight. Certain phrases, which the club wants to attract the viewer’s attention to, should appear in bold.

We could use the following code to create this block of text, with certain phrases emboldened:


<p>The Seattle Stamp Club, established in 2009, is a community that encourages and promotes the collection of stamps. The Club <span>welcomes all</span>, from beginners to experts, and hosts monthly meetings where members can show each other their stamps, discuss the latest news in stamps, and bond over their shared interests. Right now, the club has <span>250 members</span>.</p>


span {
	font-weight: bolder;

Click the Image of the "Run Code" Button, a triangle inside a circle button in the code editor above to see the output of our HTML/CSS code.

In our HTML file, we have defined a paragraph of text enclosed within <p> tags. We have also enclosed certain phrases within <span> tags, which we are going to embolden in our CSS code.

Next, in our CSS file, we defined a style rule that sets the font style weight of every <span> tag to bolder . This means that the text enclosed within any <span> tag will appear bolder than the parent element.

When we run our code, our paragraph appears with normal font-weight, and the phrases enclosed within <span> tags appear in bold. In this example, the phrases welcomes all and 250 members are enclosed in <span> tags.

Bold Text CSS with Variable Fonts

There are some newer fonts made available to us through the latest Level of CSS Fonts. They are called variable fonts and can take any number between 1 and 1000 as its font-weight. Browser support wasn’t fully implemented until May 2020, so they are fairly new. If you’d like more information about variable fonts, check out this introduction .


In this tutorial, we discussed the CSS font-weight property and how it affects how bold our fonts are.

We learned that bolder and lighter means one relative font-weight away from the font-weight of the parent element. In practice, we saw a range of font-weights to see what the text looks like. You’ll be a pro at styling fonts with font-weight in no time!

To learn more about coding in CSS, read our guide on how to learn CSS . You can read our guide on how to make bold text in HTML if you want to make your text bold without relying on CSS.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy,, and Educative.

Skip to main content