Typography
We have prepared specific classes for each font size:
- From
.ds-1to.ds-6for Display - From <h1> to <h6>, or
.h1to.h6for Headings - From
.fs-1to.fs-8for body text
| Font Family | Font weight | Font size | Line height | HTML Class | |
|---|---|---|---|---|---|
| Display 1 |
Satoshi |
Bold |
80px |
120% |
|
| Display 2 |
Satoshi |
Bold |
72px |
120% |
|
| Display 3 |
Satoshi |
Bold |
64px |
120% |
|
| Display 4 |
Satoshi |
Bold |
56px |
120% |
|
| Display 5 |
Satoshi |
Bold |
48px |
120% |
|
| Display 6 |
Satoshi |
Bold |
40px |
120% |
|
| Heading 1 |
Satoshi |
Black |
60px |
120% |
|
| Heading 2 |
Satoshi |
Black |
48px |
120% |
|
| Heading 3 |
Satoshi |
Bold |
38px |
120% |
|
| Heading 4 |
Satoshi |
Bold |
31px |
120% |
|
| Heading 5 |
Satoshi |
Bold |
25px |
120% |
|
| Heading 6 |
Satoshi |
Bold |
20px |
120% |
|
|
fs-1 Lorem ipsum |
Satoshi |
Medium |
40px |
150% |
|
|
fs-2 Lorem ipsum |
Satoshi |
Medium |
32px |
150% |
|
|
fs-3 Lorem ipsum |
Satoshi |
Medium |
28px |
150% |
|
|
fs-4 Lorem ipsum |
Satoshi |
Medium |
24px |
150% |
|
|
fs-5 Lorem ipsum |
Satoshi |
Medium |
20px |
150% |
|
|
fs-6 Lorem ipsum |
Satoshi |
Medium |
16px |
150% |
|
|
fs-7 Lorem ipsum |
Satoshi |
Medium |
14px |
150% |
|
|
fs-8 Lorem ipsum |
Satoshi |
Medium |
12px |
120% |
|