SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

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
<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>

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
<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 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>

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component