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>

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>

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>

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>

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>

Breakpoints and media queries

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