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
How to set the boldness of the font with JavaScript?
Use the fontWeight property in JavaScript to set the font boldness. This CSS property accepts values like "normal", "bold", "bolder", "lighter", or numeric values from 100 to 900.
Syntax
element.style.fontWeight = value;
Parameters
The fontWeight property accepts the following values:
| Value | Description |
|---|---|
"normal" |
Default weight (equivalent to 400) |
"bold" |
Bold weight (equivalent to 700) |
"bolder" |
Bolder than parent element |
"lighter" |
Lighter than parent element |
100-900 |
Numeric values (100 = thinnest, 900 = boldest) |
Example: Setting Font Weight with Button Click
This example demonstrates changing font weight when a button is clicked:
<!DOCTYPE html>
<html>
<body>
<h1>Font Weight Demo</h1>
<p id="myText">This text will change weight when you click the button.</p>
<button onclick="makeBold()">Make Bold</button>
<button onclick="makeNormal()">Make Normal</button>
<button onclick="makeHeavy()">Make Extra Bold (800)</button>
<script>
function makeBold() {
document.getElementById("myText").style.fontWeight = "bold";
}
function makeNormal() {
document.getElementById("myText").style.fontWeight = "normal";
}
function makeHeavy() {
document.getElementById("myText").style.fontWeight = "800";
}
</script>
</body>
</html>
Example: Using Numeric Values
You can use numeric values from 100 to 900 for more precise control:
<!DOCTYPE html>
<html>
<body>
<p id="demo1">Font Weight 300 (Light)</p>
<p id="demo2">Font Weight 500 (Medium)</p>
<p id="demo3">Font Weight 700 (Bold)</p>
<p id="demo4">Font Weight 900 (Black)</p>
<script>
document.getElementById("demo1").style.fontWeight = "300";
document.getElementById("demo2").style.fontWeight = "500";
document.getElementById("demo3").style.fontWeight = "700";
document.getElementById("demo4").style.fontWeight = "900";
</script>
</body>
</html>
Common Use Cases
Font weight manipulation is commonly used for:
- Highlighting important text: Making headings or key information bold
- Creating visual hierarchy: Using different weights to organize content
- Interactive feedback: Changing weight on hover or click events
- Dynamic theming: Adjusting typography based on user preferences
Conclusion
The fontWeight property provides flexible control over text boldness using keywords like "bold" or numeric values (100-900). Use it to create visual emphasis and improve your web page's typography.
Updated on: 2026-03-15T23:18:59+05:30
182 Views
Advertisements