How to Make Text Bold in CSS
Master the font-weight property with this complete reference. Learn numeric values, keywords, and when to use semantic HTML.
Quick Answer
Font Weight Scale (100-900)
The font-weight property accepts values from 100 to 900 in increments of 100. Here is a visual reference for each weight.
Semantic HTML vs CSS Bold
When to Use Semantic HTML
- *
<strong>- Important text (announced by screen readers) - *
<b>- Stylistically bold without extra importance
Best Practices
- +Use
font-weight: 700(numeric) for consistency across teams - +Check if your font supports the weight you need (most fonts only have 400 and 700)
- +Use
<strong>for semantically important text - +Consider variable fonts for access to all weight values
Frequently Asked Questions
font-weight: bold and font-weight: 700 are exactly the same. The keyword 'bold' is simply a shorthand for the numeric value 700. Similarly, 'normal' equals 400.
Use <strong> when the text is semantically important (screen readers announce it with emphasis). Use CSS font-weight when you only want visual boldness without semantic meaning, like in navigation or decorative text.
The font you're using might not support that weight. Variable fonts support all weights 100-900, but most fonts only include specific weights like 400 and 700. Check if your font file includes the weight you need.
More CSS Tutorials
Copy CSS from Website
Extract styles with 2 clicks
Center a Div (CSS)
Flexbox, Grid, and more
Center a Div (Tailwind)
Utility classes for centering
Convert CSS to Tailwind
CSS to utility classes
Glassmorphism Effect
Frosted glass UI style
Neumorphism Button
Soft UI button design
Responsive Navbar
Mobile-friendly navigation
Sticky Header
Fixed navigation on scroll
CSS Pagination
Page navigation styles
CSS Accordion
Expandable content sections
Dropdown Menu
Hover and click dropdowns
CSS Modal
Popup dialog boxes
Toast Notifications
Animated alert messages
Hamburger Menu
Animated menu icon
Animate Gradients
Moving gradient backgrounds
Skeleton Loader
Loading placeholder UI
Element Screenshot
Capture any element as image
Pick Color from Website
Eyedropper tool comparison
Identify Fonts
Find fonts on any website
Download All Images
Bulk save images from any site
Measure Elements
Page ruler and measurements
Extract Colors from Website
Get any color palette instantly
Dark Mode Toggle
CSS variables and localStorage
Responsive Grid
CSS Grid auto-fit and minmax
Center Text in CSS
text-align, Flexbox, and Grid
Add Shadow in CSS
box-shadow, text-shadow, drop-shadow
Round Corners in CSS
border-radius and pill shapes
Style File Input
Custom upload buttons