Display styles

There are three display styles in the default type scale: Large, medium, and small. As the largest text on the screen, display styles are reserved for short, important text or numerals. They work best on large screens.

For display type, consider choosing a more expressive font, such as a handwritten or script style.

  <h1 class="text-display-large">
    Display Large
  </h1>

  <h1 class="text-display">
    Display
  </h1>

  <h1 class="text-display-small">
    Display Small
  </h1>

Headline styles

Headlines are best-suited for short, high-emphasis text on smaller screens. These styles can be good for marking primary passages of text or important regions of content.

Headlines can also make use of expressive typefaces, provided that appropriate line height and letter spacing is also integrated to maintain readability.

  <p class="text-headline-large">
    Headline large
  </p>

  <p class="text-headline">
    Headline
  </p>

  <p class="text-headline-small">
    Headline small
  </p>

Title styles

Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. For example, consider using title styles to divide secondary passages of text or secondary regions of content.

For titles, use caution when using expressive fonts, including display, handwritten, and script styles.

  <h3 class="text-title-large">
    Title large
  </h3>
  <h3 class="text-title">
    Title
  </h3>
  <h3 class="text-title-small">
    Title small
  </h3>

Body styles

Body styles are used for longer passages of text in your app.

Use typefaces intended for body styles, which are readable at smaller sizes and can be comfortably read in longer passages.

Avoid expressive or decorative fonts for body text because these can be harder to read at small sizes.

  <p class="text-body-large">
    Body Large
  </p>

  <p class="text-body">
    Body Long
  </p>

  <p class="text-body-small">
    Body Small
  </p>

Utility styles

The utility styles are used with productive and expressive moments and include styles for code snippets, labels for captions and helper text, as well as legal copy.

  <p class="text-code-large">
    This is for inline code snippets and smaller code elements.
  </p>
  <p class="text-code">
    This is for inline code snippets and smaller code elements.
  </p>
  <p class="text-code-small">
    This is for inline code snippets and smaller code elements.
  </p>

  <br>

  <p class="text-label-large">
    label large
  </p>

  <p class="text-label">
    label
  </p>

  <p class="text-label-small">
    label small
  </p>