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.
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>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
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;
}
</style>
</head>
<body>
<p>Hello World! <span>-- Normal</span></p>
<p>Hello World! <span>-- Bold</span></p>
<p>Hello World!
<span>-- Bolder
<br>
-- child is bolder than parent
</span></p>
<p>Hello World! <span>-- Lighter
<br>
-- child is lighter than parent
</span>
</p>
<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>
</body>
</html>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.
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:
<html>
<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>
<style>
span {
font-weight: bolder;
}Click the 
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.
Conclusion
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.
"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
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.
