Typography

Headings

(h1) Heading

(h2) Heading

(h3) Heading

(h4) Heading

(h5) Heading
(h6) Heading

<h1>(h1) Heading</h1>
<h2>(h2) Heading</h2>
<h3>(h3) Heading</h3>
<h4>(h4) Heading</h4>
<h5>(h5) Heading</h5>
<h6>(h6) Heading</h6>

Display Headings

Display 1

Display 2

Display 3

Display 4


<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Font Families & Weights

Open Sans - Bolder

Open Sans - Bold

Open Sans - Semi Bold

Open Sans - Normal

Open Sans - Light


<p class="fw-bolder">Open Sans - Bolder</p>
<p class="fw-bold">Open Sans - Bold</p>
<p class="fw-semi-bold">Open Sans - Semi Bold</p>
<p class="fw-normal">Open Sans - Normal</p>
<p class="fw-light">Open Sans - Light</p>

Playfair - Black

Playfair - Bold

Playfair - Normal


<p class="font-family-playfair fw-black">Playfair - Black</p>
<p class="font-family-playfair fw-bold">Playfair - Bold</p>
<p class="font-family-playfair fw-normal">Playfair - Normal</p>

Poppins - Black

Poppins - Bolder

Poppins - Bold

Poppins - Semi Bold

Poppins - Medium

Poppins - Normal

Poppins - Light

Poppins - Lighter

Poppins - Thin


<p class="font-family-poppins fw-black">Poppins - Black</p>
<p class="font-family-poppins fw-bolder">Poppins - Bolder</p>
<p class="font-family-poppins fw-bold">Poppins - Bold</p>
<p class="font-family-poppins fw-semi-bold">Poppins - Semi Bold</p>
<p class="font-family-poppins fw-medium">Poppins - Medium</p>
<p class="font-family-poppins fw-normal">Poppins - Normal</p>
<p class="font-family-poppins fw-light">Poppins - Light</p>
<p class="font-family-poppins fw-lighter">Poppins - Lighter</p>
<p class="font-family-poppins fw-thin">Poppins - Thin</p>

Nunito - Black

Nunito - Bolder

Nunito - Bold

Nunito - Semi Bold

Nunito - Medium

Nunito - Normal

Nunito - Light

Nunito - Lighter


<p class="font-family-nunito fw-black">Nunito - Black</p>
<p class="font-family-nunito fw-bolder">Nunito - Bolder</p>
<p class="font-family-nunito fw-bold">Nunito - Bold</p>
<p class="font-family-nunito fw-semi-bold">Nunito - Semi Bold</p>
<p class="font-family-nunito fw-medium">Nunito - Medium</p>
<p class="font-family-nunito fw-normal">Nunito - Normal</p>
<p class="font-family-nunito fw-light">Nunito - Light</p>
<p class="font-family-nunito fw-lighter">Nunito - Lighter</p>

Font Sizes

Large text

Regular text

Small text


<p class="font-large">Large text</p>
<p>Regular text (15px)</p>
<p class="font-small">Small text</p>