FONT SIZE
Set Font size
You can set the font size using the following classes.
This is a sample text. (.fs-10)
This is a sample text. (.fs-16)
This is a sample text. (.fs-24)
| Class | Value |
|---|---|
.fs-[value]
|
8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
FONT WEIGHT
Set Font weight
You can set the font weight using the following classes.
This is a sample text.
This is a sample text.
This is a sample text.
| Class | Value |
|---|---|
.fw-[value]
|
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
LINE HEIGHT
Set Line height
You can set the line spacing of an item or type using the following helpful classes.
| Class | Value |
|---|---|
.ln-[value]
|
2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 44 | 48 | 50 |
LETTER SPACING
Set Letter spacing
You can set the range of letters by using the following auxiliary classes.
This is sample text.
This is sample text.
| Class | Value |
|---|---|
.ls-[value]
|
1 | 2 | 3 | 4 | 5 |
OTHER
You can set the font properties using the following helpful classes.
| Class | Example |
|---|---|
.text-left
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-right
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-center
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-justify
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores in tempora itaque accusantium ipsum corporis maxime labore, possimus quo recusandae iste, rerum tenetur aliquid provident, mollitia suscipit quisquam, placeat velit. |
.text-uppercase
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-capitalize
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-lowercase
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |