Typography is used to create clear hierarchies and purposeful alignments that guide users through the website


Design System uses Lato as the main typeface, which is an open source font provided by Google here.

rem pixels Actual size
5.25 84

Display

3.375 54

Header 1

2.75 44

Header 2

2 32

Header 3

1.625 26

Header 4

1.375 22
Header 5
1.25 20
Header 6
1.125 18

Paragraph / Base size

1 16 small

Usage

You can apply the display class to any text you like to have it prominent. For the rest of the headings, replace h1 tag with the size you wish to use from above accordingly.

<h1 class="display">display</h1>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<small>small</small>

Style
Modifier Description
has-text-primary Use when you want to apply primary color to your text
has-text-primary Use when you want to apply secondary color to your text
has-text-weight-light Use when you want to transform text weight to light
has-text-weight-semibold Use when you want to transform text weight to semi-bold
has-text-weight-bold Use when you want to transform text weight to bold
is-lowercase Use when you want to transform all characters to lowercase
is-uppercase Use when you want to transform all characters to uppercase
is-italic Use when you want to transform all characters to italic
has-text-centered Use when you want to make the text centered
has-text-justified Use when you want to make the text justified
has-text-left Use when you want to make the text aligned to the left
has-text-right Use when you want to make the text aligned to the right

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team