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.