📘 How to Make Text Bold with CSS

To make text bold using CSS, use font-weight: bold;. With the demo and copy-ready code below, anyone can easily implement it.

✅ Demo

This is normal text, and this part is bold.

📋 Copy-and-Paste Code

<style>
  .bold-text {
    font-weight: bold;
  }
</style>

<p>This is normal text, and <span class="bold-text">this part is bold</span>.</p>

✅ Copied!

🧠 Practical Techniques for Using Font Weight

font-weight: bold is a fundamental yet powerful CSS property for creating visual hierarchy in text. When used appropriately, it effectively highlights important parts of the content.

🎨 Design Variations

Beyond bold, font-weight can also be specified using numeric values from 100 to 900. For example, font-weight: 600 is considered semi-bold, and font-weight: 800 is extra-bold. Note that the available weights depend on the font family being used.

✨ Advanced Application Techniques

When defining custom fonts with the @font-face rule, you can specify font-weight to load fonts of different thicknesses appropriately. Additionally, applying transition: font-weight 0.3s ease enables smooth transitions on hover effects.

⚠️ Accessibility Considerations

When using bold text, it is important to maintain a contrast ratio of at least 4.5:1. Avoid relying solely on boldness to convey important information—combine it with other visual cues. Excessive use of bold text may actually reduce readability.

Font weight should be used consistently throughout the design system. By defining the specific weights for headings, emphasized text, and buttons in advance, you can achieve a visually cohesive interface.