font-weight controls how thick text strokes appear. Use it when text should look bold for visual emphasis but does not carry the semantic meaning of important or keyword text. section 4.13
Choose a keyword or numeric weight:
- Use normal or 400 for regular text, including restoring normal weight on an element that is bold by default. section 4.15
- Use bold or 700 for bold text; use other values from 100 through 900 when the typeface provides those weights. section 4.13
- Remember that an unsupported weight may have no visible effect. section 4.13
Compare three weights
Place different weights on inline span elements: <span style="font-weight: 100">A</span> <span style="font-weight: 400">A</span> <span style="font-weight: 700">A</span>. The letters show thin, regular, and bold treatments when the typeface supports them. section 4.15
| Weight | Keyword | Description |
| 100 | Thin text | |
| 200 | Extra light text | |
| 300 | Light text | |
| 400 | normal |
Regular text |
| 500 | Medium text | |
| 600 | Semibold text | |
| 700 | bold |
Bold text |
| 800 | Extra-bold text | |
| 900 | Black text |
Browse the weight table to match numeric values with descriptions such as thin, light, semibold, bold, and black. section 4.13
