To bold text in CSS you need to use the font-weight property. The font-weight property controls the thickness of your text from very thin through bold and beyond.
Throughout this guide we will discuss:
- How to bold text
- How to control the thickness of fonts (with extreme granularity)
- Common mistakes and how to avoid them
The Quick Way to Bold Text in CSS
The quickest way to bold text in CSS is to set the font-weight property to bold.
selector {
font-weight: bold;
}Understanding CSS Font-Weight Values
The font-weight property gives you granular control over the thickness of your font. It can accept named values, numeric values (between 100-900, in increments of 100), or can get super granular when using it alongside a variable font (values between 1-1000).
Named values (normal, bold, lighter, bolder)
Setting font-weight to a named value, gives you more human-readable code. Named values are aliases for numeric values, either absolutely (ie bold = 400), or relative based on the current font-weight.
Valid named values include:
- normal
- bold
- lighter
- bolder
/* Alias for font-weight: 400; */
font-weight: normal;
/* Alias for font-weight: 700; */
font-weight: bold;
/* Relative value, will make a font thinner than it currently is */
font-weight: lighter;
/* Relative value, will make a font thicker than it currently is */
font-weight: bolder;Numeric values (100–900)
As an alternative to named values, the font-weight property can be set to numeric values. These values range from 100-900 (inclusive) and need to be in increments of 100. Using numeric values gives you more granular control over the thickness of your font.
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* font-weight: normal; */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* font-weight: bold; */
font-weight: 800;
font-weight: 900;If you’re familiar with common weight names such as thin, semi bold, and black - the font-weight numeric values roughly line up with them (see chart below).
For more details check out the usWeightClass section of the OpenType specification.
Advanced: Variable fonts and custom weights
If you’re looking for extremely granular control over your font thickness (great for designers), then using a variable font may be what you’re looking for. Variable fonts can respond to tiny differences in the font-weight property, sporting 1000 valid values between 1-1000 (inclusive).
font-weight: 1; /* Thinnest */
/* ...and everything in-between */
font-weight: 1000; /* Thickest (most bold) */If you accidentally use a font-weight value meant for a variable font on a non-variable font, it will use a fallback weight based on an algorithm. You can learn more about Fallback weights on MDN.
Common CSS Mistakes When Bolding Text
When you're first learning how to bold text in CSS, it's easy to run into a few common pitfalls. Below are some frequent mistakes and how to avoid them.
font-style: bold vs font-weight: bold
One of the most common mistakes is confusing the font-style and font-weight properties.
/* ❌ Incorrect */
p {
font-style: bold;
}
/* ✅ Correct */
p {
font-weight: bold;
}The font-style property is used for italic and oblique styles, not bold. To bold text, always use the font-weight property.
Fonts Without a Bold Weight
Not all fonts include bold weights—especially custom or decorative typefaces. If a font doesn't have a bold (700) or bolder variant, the browser might simulate it by thickening the normal text, which can look awkward or inconsistent.
p {
font-family: 'SomeCustomFont';
font-weight: bold;
}Tip: Always test your font at different weights. If needed, add more weights via a font service like Google Fonts or provide a fallback font.
Forgetting Inheritance Rules
The font-weight property is inherited in CSS. That means child elements will often take on the boldness of their parent unless they override it.
.bold-parent {
font-weight: bold;
}<div class="bold-parent">
<p>This paragraph will also be bold.</p>
</div>If a child element sets its own font-weight, it can override the boldness applied by the parent. Always double-check inherited styles when debugging font issues.
FAQ
How do you bold text in CSS?
You can bold text in CSS by setting the font-weight property to bold.
Can I make text extra bold?
Yes, to make text extra bold in CSS you can set your font-weight property to 800 .
Can I bold text with inline CSS?
Yes, to bold text with inline CSS you can set your style attribute to font-weight: bold;.
How to bold text in HTML without a B tag?
To bold text in HTML, you can use inline CSS via the style attribute.
<!-- Example: Bolding a paragraph in HTML via inline styles -->
<p style="font-weight: bold;">This is a paragraph.</p>Want to learn more CSS?
Learn to code using Scrimba with their interactive follow-along code editor.
Join their exclusive discord communities and network to find your first job!
Use our affiliate link for a 20% discount!!
- Click the link to take you to the Scrimba site
- A pop-up should appear on your screen with the discount amount and instructions on how to claim it
- Discount is for new accounts only
We receive a monetary kickback if you use our affiliate link and make a purchase.
