CSS font-weight Property
The CSS font-weight property is used to set the weight or thickness of the font used with HTML text. The font-weight applied will depend on the font-family used and the browser. Some font families are available only in specific weights. Understanding how to use the font-weight property effectively can greatly enhance the visual appeal and readability of your web content.
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.
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<!-- 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>
</head>
<body>
<h1>w3wiki</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>
Output:
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.
Supported Browsers: The browser supported by CSS font-weight Property are listed below:
- Google Chrome 2.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Safari 1.0
- Opera 3.5
Contact Us