Typography

Desktop

  • Heading Display

    $h1
    font-family: $font-family-highlight;
    font-weight: $font-weight-black;
    font-size: $font-size-giant;
    line-height: $line-height-default;

  • Heading X-Large

    $h2
    font-family: $font-family-highlight;
    font-weight: $font-weight-black;
    font-size: $font-size-xxxl;
    line-height: $line-height-default;

  • Heading Large

    $h3
    font-family: $font-family-highlight;
    font-weight: $font-weight-bold;
    font-size: $font-size-xxl;
    line-height: $line-height-default;

  • Heading Medium

    $h4
    font-family: $font-family-highlight;
    font-weight: $font-weight-bold;
    font-size: $font-size-lg;
    line-height: $line-height-default;
  • Heading Small
    $h5
    font-family: $font-family-highlight;
    font-weight: $font-weight-bold;
    font-size: $font-size-md;
    line-height: $line-height-default;
  • Heading X-Small
    $h6
    font-family: $font-family-highlight;
    font-weight: $font-weight-bold;
    font-size: $font-size-xs;
    line-height: $line-height-default;
  • Subtitle Large $subtitle1
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-lg;
    line-height: $line-height-sm;
  • Subtitle Small $subtitle2
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-md;
    line-height: $line-height-sm;

  • Paragraph Large

    $body1
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-md;
    line-height: $line-height-lg;

  • Paragraph Small

    $body2
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-sm;
    line-height: $line-height-lg;
  • Caption Large
    $caption1
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-sm;
    line-height: $line-height-lg;
  • Caption Small
    $caption2
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-sm;
    line-height: $line-height-lg;

  • Heading Display

  • Heading X-Large

  • Heading Large

  • Heading Medium

  • Heading Small
  • Heading X-Small
  • Subtitle Large
  • Subtitle Small

  • Paragraph Large

  • Paragraph Small

  • Caption Large
  • Caption Small
Mobile

  • Heading Display

    $h1
    font-family: $font-family-highlight;
    font-weight: $font-weight-black;
    font-size: $font-size-giant;
    line-height: $line-height-default;

  • Heading X-Large

    $h2
    font-family: $font-family-highlight;
    font-weight: $font-weight-black;
    font-size: $font-size-xxxl;
    line-height: $line-height-default;

  • Heading Large

    $h3
    font-family: $font-family-highlight;
    font-weight: $font-weight-bold;
    font-size: $font-size-xxl;
    line-height: $line-height-default;

  • Heading Medium

    $h4
    font-family: $font-family-highlight;
    font-weight: $font-weight-bold;
    font-size: $font-size-lg;
    line-height: $line-height-default;
  • Heading Small
    $h5
    font-family: $font-family-highlight;
    font-weight: $font-weight-bold;
    font-size: $font-size-md;
    line-height: $line-height-default;
  • Heading X-Small
    $h6
    font-family: $font-family-highlight;
    font-weight: $font-weight-bold;
    font-size: $font-size-xs;
    line-height: $line-height-default;
  • Subtitle Large $subtitle1
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-lg;
    line-height: $line-height-sm;
  • Subtitle Small $subtitle2
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-md;
    line-height: $line-height-sm;

  • Paragraph Large

    $body1
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-md;
    line-height: $line-height-lg;

  • Paragraph Small

    $body2
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-sm;
    line-height: $line-height-lg;
  • Caption Large
    $caption1
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-sm;
    line-height: $line-height-lg;
  • Caption Small
    $caption2
    font-family: $font-family-highlight;
    font-weight: $font-weight-regular;
    font-size: $font-size-sm;
    line-height: $line-height-lg;

  • Heading Display

  • Heading X-Large

  • Heading Large

  • Heading Medium

  • Heading Small
  • Heading X-Small
  • Subtitle Large
  • Subtitle Small

  • Paragraph Large

  • Paragraph Small

  • Caption Large
  • Caption Small