The font-weight property in CSS is used to control the thickness or boldness of text. It helps improve the appearance and readability of webpage content.
- The font weight depends on the font family and browser support.
- Common values include normal, bold, lighter, and numeric values like 100–900.
- Proper use of font-weight enhances the visual appeal of text.
Syntax:
font-weight: normal | bold | lighter | bolder | number | initial | inherit | unset;Property Values
- normal: This is the default font-weight and defines the normal font weight. It is equal to the number value 400.
- bold: This defines the bold font weight, equal to the number value 700.
- lighter: This makes the font weight one level lighter than the parent element, considering the available font weights of the font family.
- bolder: This makes the font weight one level heavier than the parent element, considering the available font weights of the font family.
- number: This sets the font weight according to the number specified. The number can range between 1 to 1000. If the exact weight is unavailable, a suitable weight is applied.
Global Values
- initial: This sets the font weight to the default value.
- inherit: This sets the font weight equal to the value inherited from its parent element.
- unset: This resets the font weight to its inherited value.
When lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined.
Parent Value | lighter | bolder |
|---|---|---|
100 | 100 | 400 |
200 | 100 | 400 |
300 | 100 | 400 |
400 | 100 | 700 |
500 | 100 | 700 |
600 | 400 | 900 |
700 | 400 | 900 |
800 | 700 | 900 |
900 | 700 | 900 |
Example: The following example demonstrates the use of CSS font-weight property in which the property has been set to different values.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<!--Driver Code Ends-->
<!-- font-weight CSS property -->
<style>
body {
font-weight: bold;
font-family: sans-serif;
}
p.one {
font-weight: bold;
}
p.two {
font-weight: lighter;
}
p.three {
font-weight: 1000;
}
p.four {
font-weight: initial;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>CSS font-weight Property</h3>
<!-- font-weight: bold; length; property -->
<p class="one">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a
free online placement preparation course.
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
<!-- font-weight: lighter; length; property -->
<p class="two">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a
free online placement preparation course. The course
focuses on various MCQ's & Coding question likely to
be asked in the interviews & make your upcoming
placement season efficient and successful.
</p>
<!-- font-weight: 1000; length; property -->
<p class="three">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with
a free online placement preparation course. The
course focuses on various MCQ's & Coding question
likely to be asked in the interviews & make your
upcoming placement season efficient and successful.
</p>
<!-- font-weight: initial; length; property -->
<p class="four">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a
free online placement preparation course. The course
focuses on various MCQ's & Coding question likely to
be asked in the interviews & make your upcoming
placement season efficient and successful.
</p>
</body>
</html>
<!--Driver Code Ends-->
The CSS font-weight property is a powerful tool for controlling the thickness and visual impact of text on a webpage. By utilizing different font-weight values, web designers can create a variety of text effects that enhance readability and visual appeal. Understanding how to leverage this property will significantly improve the typography and overall user experience of your web content. For further learning, explore additional CSS properties and techniques to elevate your web design skills.