40 lines
1.1 KiB
Markdown
40 lines
1.1 KiB
Markdown
---
|
|
title: Font Weight and Style
|
|
---
|
|
## Font Weight and Style
|
|
|
|
Font-weight can be written as text values:
|
|
```
|
|
font-weight: normal;
|
|
font-weight: bold;
|
|
```
|
|
|
|
Or as a numerical value from `100` to `900` (in multiples of 100):
|
|
```
|
|
font-weight: 400; /* equal to 'normal' above */
|
|
font-weight: 700; /* equal to 'bold' above */
|
|
```
|
|
|
|
Numerical value and their common description
|
|
|
|
| Value | Common Description |
|
|
| ----- | ---------------------------- |
|
|
| 100 | Thin (Hairline) |
|
|
| 200 | Extra Light (Ultra Light) |
|
|
| 300 | Light |
|
|
| 400 | Normal |
|
|
| 500 | Medium |
|
|
| 600 | Semi Bold (Demi Bold) |
|
|
| 700 | Bold |
|
|
| 800 | Extra Bold (Ultra Bold) |
|
|
| 900 | Black (Heavy) |
|
|
|
|
Not all weights are available for all fonts. Some specialised fonts may only be available in one weight (generally `normal` `400`).
|
|
|
|
Font-weight can also be specified relative to an element's parent (if a font has more than one weight):
|
|
```
|
|
font-weight: lighter;
|
|
font-weight: bolder;
|
|
```
|
|
|