CSS font-weight property helps set the weight of the given font. It specifies how thin or thick the font will appear in the front end. However, the CSS font-weight property is supported by either the weights specified by the browser or the available font faces in a font family.
You can either define the weight by using the available keywords or by the numbers that are multiples of 100, up to 900. The thickness of the font increases proportionally to the number.
Syntax: font-weight: normal|bold|lighter|bolder|number|initial|inherit|unset;
In the above syntax, normal, bold, lighter, bolder, bolder, and number are general property values whereas initial, inherit, and unset are global values.
Property Values for Font Weights in CSS
Based on this syntax, the property values represent:
- Normal: It represents the default, normal weight of the font. The numeric equivalent to the normal keyword is 400.
- Bold: This property value helps define a bold font. The numeric equivalent for this property is 700.
- Lighter: This property value is associated with the parent class’s font-weight. Using this keyword will make the font’s thickness one level lighter than the font in the parent class.
- Bolder: Like the lighter property value, even bolder is associated with the parent class’s font-weight. However, this keyword will increase the font-weight by one level instead of making the font lighter.
- Number: Instead of writing the “number” keyword as the property value, you need to write numbers 100, 200, …, 900. If the weight for a specified number is not available for a given font family, a preferable number is applied.
Global Values for Font Weights in CSS
Besides the standard property values, font weights in CSS also accept global values.
- Initial: The initial keyword will reset the font-weight to the default value.
- Inherit: This global value will reset the font-weight to the value inherited from the element's parent class.
- Unset: This will reset the value back to the font-weight inherited from the parent class, if available. If the weight is not inherited from the parent class, it will reset it to the initial default value.
Common Relative Font Weights for Lighter and Bolder Values
Using lighter or bolder keywords will either increase or decrease the thickness based on the font-weight inherited from the parent class. The below chart represents what absolute weight will be selected based on the inherited value.
Inherited Value |
Bolder |
Lighter |
|
100 |
400 |
100 |
|
200 |
400 |
100 |
|
300 |
400 |
100 |
|
400 |
700 |
100 |
|
500 |
700 |
100 |
|
600 |
900 |
400 |
|
700 |
900 |
400 |
|
800 |
900 |
700 |
|
900 |
900 |
700 |
Note: When changing to a relative font, only four values, 100, 400, 700, and 900, are considered, regardless of the font family.
Common Font Weights Name Mapping
All the numerical values 100 to 1000 correspond to common weight names as given in the table below. But using names other than normal and bold is not allowed in CSS.
Value |
Mapped Name |
|
100 |
Thin |
|
200 |
Extra light |
|
300 |
Light |
|
400 |
Normal |
|
500 |
Medium |
|
600 |
Semi-bold |
|
700 |
Bold |
|
800 |
Extra bold |
|
900 |
Black |
|
950 |
Extra black |
Now that we know all the possible values for the font-weight property in CSS, let’s use them in an example.
Example of Using Font Weight in CSS
In this example, we will use all the standard property values.
<!DOCTYPE html>
<html>
<head>
<title>Center example</title>
</head>
<body>
<p style="font-weight: normal;">Normal font</p>
<p style="font-weight: bold;">Bold font</p>
<p style="font-weight: lighter;">Lighter font</p>
<p style="font-weight: bolder;">Bolder font</p>
<p style="font-weight: 100;">100 weight</p>
<p style="font-weight: 200;">200 weight</p>
<p style="font-weight: 300;">300 weight</p>
<p style="font-weight: 400;">400 weight</p>
<p style="font-weight: 500;">500 weight</p>
<p style="font-weight: 600;">600 weight</p>
<p style="font-weight: 700;">700 weight</p>
<p style="font-weight: 800;">800 weight</p>
<p style="font-weight: 900;">900 weight</p>
</body>
</html>
Output:
Browsers That Support CSS Font-Weight Property
The CSS font-weight property is supported by the following browsers.
Browser Name |
Version |
|
Google Chrome |
2.0 |
|
Safari |
1.0 |
|
Mozilla Firefox |
1.0 |
|
Microsoft Edge |
12.0 |
|
Opera |
3.5 |
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
Several CSS properties combine to style a web page like the font-weights (bold, extra bold, light, very light, or numbers). You can learn about these properties by referring to Simplilearn's CSS Tutorial for Beginners or the Advanced CSS Tutorial. These tutorials cover the fundamentals of CSS, which will prove to be a stepping stone to becoming a great front-end developer.
CSS is a styling language that helps style a web page, but you need to create the page first. Learn how to do that and how CSS blends with other front-end programming languages by enrolling in our Post Graduate Program in Full Stack Web Development. You can also go for our 90-day free Front-End Web Development Course. These courses are designed to help you acquire practical knowledge and hands-on practice for a deep understanding of the concepts, thereby empowering you with the tools to secure better job opportunities.