Use these typography styles to create clear hierarchies and purposeful alignments that guide users through your content.


Design System uses Lato as its main typeface. Lato is an open source font provided by Google.

rem pixels Actual size Text size helper
5.25 84

Display

is-size-0
3.375 54

Header 1

is-size-1
2.75 44

Header 2

is-size-2
2 32

Header 3

is-size-3
1.625 26

Header 4

is-size-4
1.375 22
Header 5
is-size-5
1.25 20
Header 6
is-size-6
1.125 18

Paragraph

is-size-7
1 16 small text (base font size) is-size-8

Usage
HTML Text Elements
<h1 class="display">h1 display</h1>
<h1>header 1</h1>
<h2>header 2</h2>
<h3>header 3</h3>
<h4>header 4</h4>
<h5>header 5</h5>
<h6>header 6</h6>
<p>paragraph</p>
<small>small text</small>
Using class helpers
<div class="is-size-0">h1 display text size</div>
<div class="is-size-1">h1 text size</div>
<div class="is-size-2">h2 text size</div>
<div class="is-size-3">h3 text size</div>
<div class="is-size-4">h4 text size</div>
<div class="is-size-5">h5 text size</div>
<div class="is-size-6">h6 text size</div>
<div class="is-size-7">p text size</div>
<div class="is-size-8">small text size</div>

Alignment

Align the text with 4 alignment helpers

Class Alignment Usage
has-text-centered Align text to the center
<p class="has-text-centered">Lorem ipsum dolor sit amet.</p>
has-text-justified Makes the text/paragraph justified
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime, laborum.
<p class="has-text-justified">Lorem ipsum dolor sit amet.</p>
has-text-left Align text to the left
<p class="has-text-left">Lorem ipsum dolor sit amet.</p>
has-text-right Align text to the right
<p class="has-text-right">Lorem ipsum dolor sit amet.</p>

Text Transform

Transform the text with the use of one of 4 text transformation helpers:

Class Text Transform Usage
is-capitalized Transforms the first character of each word to upper case
<p class="is-capitalized">Lorem ipsum dolor sit amet.</p>
is-uppercase Transforms the all characters to uppercase
<p class="is-uppercase">Lorem ipsum dolor sit amet.</p>
is-lowercase Transforms the all characters to lower case
<p class="is-lowercase">Lorem ipsum dolor sit amet.</p>
is-italic Transforms the all characters to italic
<p class="is-italic">Lorem ipsum dolor sit amet.</p>

Font Weight

Transform the font weight with the use of one of 4 font weight helpers:

The weights available depend on the font-family you are using. Learn more about fallback text weight
Class Font Weight Usage
has-text-weight-light Transform text weight to light
<p class="has-text-weight-light">Lorem ipsum dolor sit amet.</p>
has-text-weight-normal Transform text weight to normal
<p class="has-text-weight-normal">Lorem ipsum dolor sit amet.</p>
has-text-weight-medium Transform text weight to medium
<p class="has-text-weight-medium">Lorem ipsum dolor sit amet.</p>
has-text-weight-semibold Transform text weight to semi bold
<p class="has-text-weight-semibold">Lorem ipsum dolor sit amet.</p>
has-text-weight-bold Transform text weight to bold
<p class="has-text-weight-bold">Lorem ipsum dolor sit amet.</p>

Feedback

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

Chat with the team