Typography

Use our different classes to change your typography.

The typography classes are made to let you custom the most possible your text.

Font size classes

The font-size classes allow you to change the font size of any text.
The classes are named .font-s1 | .font-s2 | ... | .font-s12

font-s1

font-s2

font-s3

font-s4

font-s5

font-s6

From 1 to 12...

Headings

This is a H1

This is a H2

This is a H3

This is a H4

This is a H5

This is a H6

Heading classes

The heading classes allow you to create fake headers on any text.
The classes are named as the headings so :
.h1 | .h2 | ... | .h6

This is not a real h4

Text alignment

Class name	Description
`.text-left`	Align text to the left.
`.text-center`	Align text to the center.
`.text-right`	Align text to the right.
`.text-justify`	Justify text all over the rows.

Font weight

The font weight classes help you to change the weight of any text.
The classes are .font-w{weight} where the weight value can be :
100 | 200 | 300 | ... | 900

This is a .font-w400 text

This is a .font-w600 text

Line height

You have 3 ways to use the line-height classes :

You can use the .lh-normal to get a normal line-height.
You can use the basic way .lh-{value} where value can be :
1, 2 ... 6
But you can use the way with the rem unit .lh-rem-{value} where value can be :
1, 2 ... 5

Letter spacing

The letter spacing classes help you to change the spacing between the letters of any text.
The classes are .font-ls{spacing} where the spacing value can be :
1 | 2 | 3 | 4 | 5

This is a .font-ls4 text

Word break

The word break classes help you to change the sentence cut behavior.

Class name	Description
`.wb-normal`	Normal word-break behaviour.
`.wb-break-all`	Allows word-break on all characters.
`.wb-keep-all`	Same as the word-break normal but not for Chinese, Japan and Korean.
`.wb-break-word`	Same as word-break normal combined with `overflow-wrap: anywhere` .
`.wb-unset`	Unset the property.