CSS GUIDE FONT WEIGHT
This document is a work in progress and is subject to change.
Summary
The font-weight property is used to control the weight or boldness of a font for a defined section. The weight can be declared absolutely or relatively to the parent or user's default font size.
| Applicability: | The font-weight property can be used for all CSS elements. | |
| Media Group: | Visual | |
| Inherited: | Yes |
Syntax
TARGET_ELEMENT { font-weight: normal }
TARGET_ELEMENT { font-weight: 700 }
TARGET_ELEMENT { font-weight: bolder }
Legal Values
Values can be entered in 3 ways:
| Method | Range | Example |
|---|---|---|
| Numeric Value | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | '400' represents normal weight, '700' represents bold weight |
| Relative Weight | lighter | bolder | (Relative to parent or user font table) |
| Boolean Weight | normal | bold | 12pt. |
See usage examples section for more details.
Mozilla Recommended Values
Usage Examples
p{font-weight: bold} /*Set paragraph text to be bold.*/
h1{font-weight: 500} /*Set h1 (level 1 heading) text to one step darker than normal but less than a standard bold.*/
span{font-weight: lighter} /*Sets text enclosed within span tag to be one step lighter than the parent or user font table*/
Notes
The World Wide Web Consortium (W3C) provides a free online CSS validation service.