2 typography Typography

All global typography styles and utility classes should live in the typography.scss file. Whenever possible, use good semantics and these utility classes to change type sizes and fonts, and leave typography details out of the component-level files.

Examples

Default styling

Heading 1 or .text-display-xxl

Heading 2 or .text-display-xl

Heading 3 or .text-display-lg

Heading 4 or .text-display-md

Heading 5 or .text-display-sm

.text-display-xs

.text-display-xxs

.text-display-xxxs

This is a paragraph with .body-lg applied. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ligula eget metus gravida fermentum. Donec eu nunc eros. Donec dictum velit at mauris molestie, et dignissim mauris ultricies. Vivamus interdum iaculis leo, id cursus elit scelerisque id. Donec laoreet ligula rhoncus elit accumsan apibus eleifend nec ipsum. Phasellus congue tellus ipsum

This is a default paragraph or .body-md. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ligula eget metus gravida fermentum. Donec eu nunc eros. Donec dictum velit at mauris molestie, et dignissim mauris ultricies. Vivamus interdum iaculis leo, id cursus elit scelerisque id. Donec laoreet ligula rhoncus elit accumsan apibus eleifend nec ipsum. Phasellus congue tellus ipsum

This is a paragraph with .body-sm applied. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ligula eget metus gravida fermentum. Donec eu nunc eros. Donec dictum velit at mauris molestie, et dignissim mauris ultricies. Vivamus interdum iaculis leo, id cursus elit scelerisque id. Donec laoreet ligula rhoncus elit accumsan apibus eleifend nec ipsum. Phasellus congue tellus ipsum

This is a paragraph with .body-xs applied. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ligula eget metus gravida fermentum. Donec eu nunc eros. Donec dictum velit at mauris molestie, et dignissim mauris ultricies. Vivamus interdum iaculis leo, id cursus elit scelerisque id. Donec laoreet ligula rhoncus elit accumsan apibus eleifend nec ipsum. Phasellus congue tellus ipsum

.inverse

This class provides white text over a darker background

Heading 1 or .text-display-xxl

Heading 2 or .text-display-xl

Heading 3 or .text-display-lg

Heading 4 or .text-display-md

Heading 5 or .text-display-sm

.text-display-xs

.text-display-xxs

.text-display-xxxs

.alt-heading-font

Apply this to a heading directly, or any parent element to apply to all headings within that context.

Heading 1 or .text-display-xxl

Heading 2 or .text-display-xl

Heading 3 or .text-display-lg

Heading 4 or .text-display-md

Heading 5 or .text-display-sm

.text-display-xs

.text-display-xxs

.text-display-xxxs

.alt-heading-font.inverse

Both classes can be used together.

Heading 1 or .text-display-xxl

Heading 2 or .text-display-xl

Heading 3 or .text-display-lg

Heading 4 or .text-display-md

Heading 5 or .text-display-sm

.text-display-xs

.text-display-xxs

.text-display-xxxs

Markup: ../../../../../styleguide/styleguide-examples/typography.njk

<div class="" style="padding: 20px;margin-bottom:3em;">
  <h1>Heading 1 or .text-display-xxl</h1>
  <h2>Heading 2 or .text-display-xl</h3>
  <h3>Heading 3 or .text-display-lg</h3>
  <h4>Heading 4 or .text-display-md</h4>
  <h5>Heading 5 or .text-display-sm</h5>
  <h6 class="sumo-page-subheading">.text-display-xs</h6>
  <h6 class="text-display-xxs">.text-display-xxs</h6>
  <h6 class="text-display-xxxs">.text-display-xxxs</h6>
  <p class="body-lg"><strong>This is a paragraph with .body-lg applied.</strong> Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. <em>Nunc pulvinar ligula eget metus</em> gravida
    fermentum. Donec eu nunc eros. Donec dictum velit at mauris molestie, et
    dignissim mauris ultricies. <a href="#test-link-1">Vivamus interdum iaculis leo</a>,
    id cursus elit scelerisque id. Donec laoreet ligula rhoncus elit accumsan
    apibus eleifend nec ipsum. Phasellus congue tellus ipsum</p>

  <p><strong>This is a default paragraph or .body-md.</strong> Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. <em>Nunc pulvinar ligula eget metus</em> gravida
    fermentum. Donec eu nunc eros. Donec dictum velit at mauris molestie, et
    dignissim mauris ultricies. <a href="#test-link-2">Vivamus interdum iaculis leo</a>,
    id cursus elit scelerisque id. Donec laoreet ligula rhoncus elit accumsan
    apibus eleifend nec ipsum. Phasellus congue tellus ipsum</p>

  <p class="body-sm"><strong>This is a paragraph with .body-sm applied.</strong> Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. <em>Nunc pulvinar ligula eget metus</em> gravida
    fermentum. Donec eu nunc eros. Donec dictum velit at mauris molestie, et
    dignissim mauris ultricies. <a href="#test-link-3">Vivamus interdum iaculis leo</a>,
    id cursus elit scelerisque id. Donec laoreet ligula rhoncus elit accumsan
    apibus eleifend nec ipsum. Phasellus congue tellus ipsum</p>

  <p class="body-xs"><strong>This is a paragraph with .body-xs applied.</strong> Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. <em>Nunc pulvinar ligula eget metus</em> gravida
    fermentum. Donec eu nunc eros. Donec dictum velit at mauris molestie, et
    dignissim mauris ultricies. <a href="#test-link-4">Vivamus interdum iaculis leo</a>,
    id cursus elit scelerisque id. Donec laoreet ligula rhoncus elit accumsan
    apibus eleifend nec ipsum. Phasellus congue tellus ipsum</p>
</div>

Source: ../kitsune/sumo/static/sumo/scss/base/_typography.scss, line 4