Typography

Documentation and examples for typography.

Display Large

Display Medium

Display Small

<!-- Display  -->
<h1 class="text-display-lg">Display Large</h1>
<h1 class="text-display-md">Display Medium</h1>
<h1 class="text-display-sm">Display Small</h1>
Copy

Headline Large

Headline Medium

Headline Small

<!-- Headline  -->
<h1 class="text-headline-lg">Headline Large</h1>
<h1 class="text-headline-md">Headline Medium</h1>
<h1 class="text-headline-sm">Headline Small</h1>
Copy

Title Large

Title Medium

Title Small

<!-- Title  -->
<h1 class="text-title-lg">Title Large</h1>
<h1 class="text-title-md">Title Medium</h1>
<h1 class="text-title-sm">Title Small</h1>
Copy

Label Large

Label Medium

Label Small

<!-- Label  -->
<h1 class="text-label-lg">Label Large</h1>
<h1 class="text-label-md">Label Medium</h1>
<h1 class="text-label-sm">Label Small</h1>
Copy

Body Large

Body Medium

Body Small

<!-- Body  -->
<h1 class="text-body-lg">Body Large</h1>
<h1 class="text-body-md">Body Medium</h1>
<h1 class="text-body-sm">Body Small</h1>
Copy

Breakpoints and media queries

<p class="text-title-md md:text-title-lg">
  <!-- ... -->
</p>
Copy