Documentation Typography

How it works

Use the font classes mentioned in this documentation like <h1 class="mt-0 mb-4 text-primary">Lorem ipsum dolor sit amet.</h1> and add all the transformer classes
Do not use inline styles if possible
If you want to change global classes (this will then adjust everywhere for the site for elements with the class) at the utilities.scss and typography.scss

Typography Builder

Defaults

Configure

Type

Color

Family

Class

Weight

Letter Spacing

Line Height

Alignment

Margin Top

Margin Bottom

Transform

reset

HTML

Headings

Name	Example	Class	Code
H1	Lorem ipsum dolor sit amet.	h1, .h1	`<h1>Lorem ipsum dolor sit amet.</h1>`
H2	Lorem ipsum dolor sit amet.	h2, .h2	`<h2>Lorem ipsum dolor sit amet.</h2>`
H3	Lorem ipsum dolor sit amet.	h3, .h3	`<h3>Lorem ipsum dolor sit amet.</h3>`
H4	Lorem ipsum dolor sit amet.	h4, .h4	`<h4>Lorem ipsum dolor sit amet.</h4>`
H5	Lorem ipsum dolor sit amet.	h5, .h5	`<h5>Lorem ipsum dolor sit amet.</h5>`
H6	Lorem ipsum dolor sit amet.	h6, .h6	`<h6>Lorem ipsum dolor sit amet.</h6>`
Display 1	Lorem ipsum dolor sit amet.	.display-1	`<h1 class="display-1">Lorem ipsum dolor sit amet.</h1>`
Display 2	Lorem ipsum dolor sit amet.	.display-2	`<h2 class="display-2">Lorem ipsum dolor sit amet.</h2>`
Display 3	Lorem ipsum dolor sit amet.	.display-3	`<h3 class="display-3">Lorem ipsum dolor sit amet.</h3>`
Display 4	Lorem ipsum dolor sit amet.	.display-4	`<h4 class="display-4">Lorem ipsum dolor sit amet.</h4>`
Display 5	Lorem ipsum dolor sit amet.	.display-5	`<h5 class="display-5">Lorem ipsum dolor sit amet.</h5>`
Display 6	Lorem ipsum dolor sit amet.	.display-6	`<h6 class="display-6">Lorem ipsum dolor sit amet.</h6>`

Paragraphs

Name	Example	Class	Code
Paragraph Lead	Lorem ipsum dolor sit amet.	.lead	`<p class="lead">Lorem ipsum dolor sit amet.</p>`
Paragraph	Lorem ipsum dolor sit amet.	p	`<p>Lorem ipsum dolor sit amet.</p>`

Font Weights

Name	Example	Class	Code
Normal	Lorem ipsum dolor sit amet.	.fw-400	`<p class="fw-400">Lorem ipsum dolor sit amet.</p>`
Semi Bold	Lorem ipsum dolor sit amet.	.fw-500	`<p class="fw-500">Lorem ipsum dolor sit amet.</p>`
Bold	Lorem ipsum dolor sit amet.	.fw-900	`<p class="fw-900">Lorem ipsum dolor sit amet.</p>`

Line Heights and Letter Spacing

Name	Example	Class	Code
Line Height normal	Lorem ipsum dolor sit amet.	.lh-normal	`<p class="lh-normal">Lorem ipsum dolor sit amet.</p>`
Line Height Large	Lorem ipsum dolor sit amet.	.lh-large	`<p class="lh-large">Lorem ipsum dolor sit amet.</p>`
Letter Spacing Normal	Lorem ipsum dolor sit amet.	.ls-normal	`<p class="ls-normal">Lorem ipsum dolor sit amet.</p>`
Letter Spacing Large	Lorem ipsum dolor sit amet.	.ls-large	`<p class="ls-large">Lorem ipsum dolor sit amet.</p>`

Font Colors and Families

Name	Example	Class	Code
Text Primary	Lorem ipsum dolor sit amet.	.text-primary	`<p class="text-primary">Lorem ipsum dolor sit amet.</p>`
Text Secondary	Lorem ipsum dolor sit amet.	.text-secondary	`<p class="text-secondary">Lorem ipsum dolor sit amet.</p>`
Font Avenir	Lorem ipsum dolor sit amet.	.ff-montserrat	`<p class="ff-montserrat">Lorem ipsum dolor sit amet.</p>`
Font Analouge	Lorem ipsum dolor sit amet.	.ff-analogue	`<p class="ff-analogue">Lorem ipsum dolor sit amet.</p>`