Table of contents
Font
Font tokens tie an intention to a font family.
| Name | Value | Description |
|---|---|---|
| body | georgia, Times New Roman, serif | -- |
| headline | Postoni, garamond, serif | -- |
| meta | Franklin, arial, sans-serif | -- |
| subhead | Franklin, arial, sans-serif | -- |
Font size
Font size tokens are relative to the baseSize. Use font size tokens to define the size of the font.
| Name | Value | Calculated | Description |
|---|---|---|---|
| 075 | 0.75rem | 12px | -- |
| 087 | 0.875rem | 14px | -- |
| 100 | 1rem | 16px | -- |
| 112 | 1.125rem | 18px | -- |
| 125 | 1.25rem | 20px | -- |
| 150 | 1.5rem | 24px | -- |
| 175 | 1.75rem | 28px | -- |
| 200 | 2rem | 32px | -- |
| 225 | 2.25rem | 36px | -- |
| 250 | 2.5rem | 40px | -- |
| 275 | 2.75rem | 44px | -- |
| 300 | 3rem | 48px | -- |
| 350 | 3.5rem | 56px | -- |
| 400 | 4rem | 64px | -- |
| 450 | 4.5rem | 72px | -- |
| 500 | 5rem | 80px | -- |
Font weight
Font weight tokens define the weight of the font face.
| Name | Value | Description |
|---|---|---|
| bold | 700 | -- |
| light | 300 | -- |
| regular | 400 | -- |
Line height
Line height tokens are unitless values that define the height of a text element based on its current font size.
| Name | Value | Description |
|---|---|---|
| 100 | 1 | -- |
| 110 | 1.1 | -- |
| 125 | 1.25 | -- |
| 150 | 1.5 | -- |
| 160 | 1.6 | -- |
| 175 | 1.75 | -- |
| 200 | 2 | -- |
| 240 | 2.4 | -- |