Overview
Typography creates clear hierarchies and purposeful alignments that guide users through your content.
Font Size
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>With helper classes
<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 text with 4 alignment helper classes
| Class | Alignment | Usage |
|---|---|---|
has-text-centered |
Align text to the center |
|
has-text-justified |
Makes the text/paragraph justified Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime, laborum. |
|
has-text-left |
Align text to the left |
|
has-text-right |
Align text to the right |
|
CSS Text Transform
Transform 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 |
|
is-uppercase |
Transforms the all characters to uppercase |
|
is-lowercase |
Transforms the all characters to lower case |
|
is-italic |
Transforms the all characters to italic |
|
Font Weight
Transform 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 |
|
has-text-weight-normal |
Transform text weight to normal |
|
has-text-weight-medium |
Transform text weight to medium |
|
has-text-weight-semibold |
Transform text weight to semi bold |
|
has-text-weight-bold |
Transform text weight to bold |
|
Can't find a component?
Let us know what you need and we’ll be happy to look into it