Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the font weight with CSS
The font-weight property controls how bold or light text appears. It accepts keyword values like normal and bold, or numeric values from 100 to 900.
Syntax
font-weight: normal | bold | bolder | lighter | 100-900;
Font Weight Values
| Value | Description | Numeric Equivalent |
|---|---|---|
normal |
Regular text weight | 400 |
bold |
Bold text weight | 700 |
bolder |
Bolder than parent element | Relative |
lighter |
Lighter than parent element | Relative |
Example: Different Font Weights
<!DOCTYPE html>
<html>
<head>
<title>Font Weight Example</title>
</head>
<body>
<p style="font-weight: normal;">This is normal weight (400).</p>
<p style="font-weight: bold;">This font is bold (700).</p>
<p style="font-weight: bolder;">This font is bolder.</p>
<p style="font-weight: lighter;">This font is lighter.</p>
<p style="font-weight: 300;">This font is 300 weight (light).</p>
<p style="font-weight: 500;">This font is 500 weight (medium).</p>
<p style="font-weight: 900;">This font is 900 weight (black).</p>
</body>
</html>
Numeric Font Weight Scale
The numeric scale ranges from 100 (thinnest) to 900 (boldest):
- 100-300: Light weights
- 400: Normal (default)
- 500-600: Medium weights
- 700: Bold
- 800-900: Extra bold to black
Using CSS Classes
<!DOCTYPE html>
<html>
<head>
<style>
.light { font-weight: 300; }
.normal { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
.extra-bold { font-weight: 900; }
</style>
</head>
<body>
<p class="light">Light text (300)</p>
<p class="normal">Normal text (400)</p>
<p class="medium">Medium text (500)</p>
<p class="bold">Bold text (700)</p>
<p class="extra-bold">Extra bold text (900)</p>
</body>
</html>
Conclusion
The font-weight property provides precise control over text boldness using keywords or numeric values from 100-900. Use bold (700) for emphasis and lighter weights for subtle text hierarchy.
Updated on: 2026-03-15T23:18:59+05:30
221 Views
Advertisements