---
title: Typography
layout: component.html
---
<h1 class="docs--page-header">
    Typography
</h1>

<h2 class="docs--section-header">Headings</h2>

<div class="docs--visual-example">
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
</div>

<h2 class="docs--section-header">Paragraphs</h2>

<div class="docs--visual-example">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquid consequuntur minima molestias nemo perferendis quisquam repellendus unde. Dicta eos, esse labore natus obcaecati odio officiis reprehenderit tenetur ut.</p>
</div>

<h2 class="docs--section-header">Utility</h2>

<div class="docs--visual-example">
    <p class="uppercase">uppercase</p>
    <p class="lowercase">LOWERCASE</p>
    <p class="font-bold">Bold</p>
    <p class="font-semi-bold">Semi Bold</p>
    <p class="font-semi-light">Semi Light</p>
    <p class="font-light">Light</p>
    <p class="font-base">Base font size</p>
    <p class="font-small">Small font size</p>
    <p class="font-large">Large font size</p>
    <p class="ws-nowrap">Whitespace: nowrap</p>
    <p class="ws-pre">Whitespace: pre</p>
    <p class="ws-pre-line">Whitespace: pre-line</p>
    <p class="ws-pre-wrap">Whitespace: pre-wrap</p>
    <p>Vertical alignment: <span class="va-top">top</span> <span class="va-middle">middle</span> <span class="va-bottom">bottom</span> <span class="va-baseline">baseline</span></p>
</div>