Typography

Code Examples

Typography means the style and size of text. Type settings here should be used in the construction of components not defined in Spark. See each setting for intended use.

Information

  • The heading elements are set automatically and don't require you to add classes.
  • The body copy will automatically get style and size from Spark, but in order to get the line height collision fix, you'll need to apply a setting class.

Setting Up

In order to use a webfont with Spark, a few variables will need to be set in your app's Sass build. These should be set as follows, before importing Spark's SCSS.

Sass Variable Type Description
$sprk-using-webfonts boolean This tells Spark that a webfonts will be used. The default setting is false.
$sprk-font-display string The supplied value will be set on all generated Font-face calls, as font-display. The default is 'swap.'
$sprk-webfonts Sass List Expects a Sass List containing one or more nested Sass Lists. The nested lists should each contain: A List of urls to download a font, the name of the font and the weight of the font.

Page Title

The page title is used on primary pages that contain multiple jumping off points, as well as core product features and flows. It should only be used once at the top of the main content of a page.

The Quick Brown Fox Jumps Over the Lazy Dog

<h1 class="sprk-b-TypeDisplayTwo sprk-b-PageTitle">The Quick Brown Fox Jumps Over the Lazy Dog</h1>
          

Configurable Variables

Variable Default Description
$sprk-page-title-mark-color $sprk-red The color of the mark.
$sprk-page-title-mark-width 32px The width of the mark.
$sprk-page-title-mark-height 5px The height of the mark.
$sprk-page-title-mark-height-wide-viewport 6px The height of the mark on a large viewport (using $sprk-typography-breakpoint).
$sprk-page-title-mark-padding 0 0 $sprk-space-misc-a Amount of padding between the mark and the text.
$sprk-page-title-mark-padding-wide-viewport 0 0 $sprk-space-m Amount of padding between the mark and the text. on a large viewport (using $sprk-typography-breakpoint).

Display One

This display size is intended to be used for primary headings.

The Quick Brown Fox Jumps Over the Lazy Dog

<h1 class="sprk-b-TypeDisplayOne">The Quick Brown Fox Jumps Over the Lazy Dog</h1>
          

Configurable Variables

Variable Default Description
$sprk-color-display-one $sprk-black The color of the text.
$sprk-font-family-display-one RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-display-one 3.375rem The size of the font when the viewport is narrower than $sprk-font-size-display-one-breakpoint.
$sprk-font-size-display-one-wide 2.75rem The size of the font when the viewport is wider than $sprk-font-size-display-one-breakpoint.
$sprk-type-display-one-breakpoint 43.75rem The width of the viewport at which to switch the font size from $sprk-font-size-display-one to $sprk-font-size-display-one-wide.
$sprk-font-weight-display-one bold The weight of the font.
$sprk-line-height-display-one 1.03 The line height of the font when the viewport is narrower than $sprk-font-size-display-one-breakpoint.
$sprk-line-height-display-one-wide 1.27 The line height of the font when the viewport is wider than $sprk-font-size-display-one-breakpoint.

Display Two

This display size is intended to be used for secondary headings.

The Quick Brown Fox Jumps Over the Lazy Dog

<h1 class="sprk-b-TypeDisplayTwo">The Quick Brown Fox Jumps Over the Lazy Dog</h1>
          

Configurable Variables

Variable Default Description
$sprk-color-display-two $sprk-black The color of the text.
$sprk-font-family-display-two RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-display-two 2.5rem The size of the font when the viewport is narrower than $sprk-font-size-display-two-breakpoint.
$sprk-font-size-display-two-wide 2rem The size of the font when the viewport is wider than $sprk-font-size-display-two-breakpoint.
$sprk-type-display-two-breakpoint 43.75rem The width of the viewport at which to switch the font size from $sprk-font-size-display-two to $sprk-font-size-display-two-wide.
$sprk-font-weight-display-two bold The weight of the font.
$sprk-line-height-display-two 1 The line height of the font when the viewport is narrower than $sprk-font-size-display-two-breakpoint.
$sprk-line-height-display-two-wider 1 The line height of the font when the viewport is wider than $sprk-font-size-display-two-breakpoint.

Display Three

This display size is intended to be used for third-level headings.

The Quick Brown Fox Jumps Over the Lazy Dog

<h2 class="sprk-b-TypeDisplayThree">The Quick Brown Fox Jumps Over the Lazy Dog</h2>
          

Configurable Variables

Variable Default Description
$sprk-color-display-three $sprk-black The color of the text.
$sprk-font-family-display-three RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-display-three 2.125rem The size of the font when the viewport is narrower than $sprk-font-size-display-three-breakpoint.
$sprk-font-size-display-three-wide 1.75rem The size of the font when the viewport is wider than $sprk-font-size-display-three-breakpoint.
$sprk-type-display-three-breakpoint 43.75rem The width of the viewport at which to switch the font size from $sprk-font-size-display-three to $sprk-font-size-display-three-wide.
$sprk-font-weight-display-three 300 The weight of the font.
$sprk-line-height-display-three 1.32 The line height of the font when the viewport is narrower than $sprk-font-size-display-three-breakpoint.
$sprk-line-height-display-three-wide 1.6 The line height of the font when the viewport is wider than $sprk-font-size-display-three-breakpoint.

Display Four

This display size is intended to be used for fourth-level headings.

The Quick Brown Fox Jumps Over the Lazy Dog

<h3 class="sprk-b-TypeDisplayFour">The Quick Brown Fox Jumps Over the Lazy Dog</h3>
          

Configurable Variables

Variable Default Description
$sprk-color-display-four $sprk-black The color of the text.
$sprk-font-family-display-four RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-display-four 1.625rem The size of the font.
$sprk-font-weight-display-four bold The weight of the font.
$sprk-line-height-display-four 1.23 The line height of the font.

Display Five

This display size is intended to be used for fifth-level headings.

The Quick Brown Fox Jumps Over the Lazy Dog

<h4 class="sprk-b-TypeDisplayFive">The Quick Brown Fox Jumps Over the Lazy Dog</h4>
          

Configurable Variables

Variable Default Description
$sprk-color-display-five $sprk-black The color of the text.
$sprk-font-family-display-five RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-display-five 1.25rem The size of the font.
$sprk-font-weight-display-five 500 The weight of the font.
$sprk-line-height-display-five 1.2 The line height of the font.

Display Six

This display size is intended to be used for sixth-level headings.

The Quick Brown Fox Jumps Over the Lazy Dog
<h5 class="sprk-b-TypeDisplaySix">The Quick Brown Fox Jumps Over the Lazy Dog</h5>
          

Configurable Variables

Variable Default Description
$sprk-color-display-six $sprk-black The color of the text.
$sprk-font-family-display-six RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-display-six 1.25rem The size of the font.
$sprk-font-weight-display-six 300 The weight of the font.
$sprk-line-height-display-six 1.2 The line height of the font.

Display Seven

The Quick Brown Fox Jumps Over the Lazy Dog
<h5 class="sprk-b-TypeDisplaySeven">The Quick Brown Fox Jumps Over the Lazy Dog</h5>
          

Configurable Variables

Variable Default Description
$sprk-color-display-seven $sprk-black The color of the text.
$sprk-font-family-display-seven RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-display-seven 1rem The size of the font.
$sprk-font-weight-display-seven 500 The weight of the font.
$sprk-line-height-display-seven 1 The line height of the font.

Body One

This body type is intended for sub-labels and any copy within a paragraph that needs to be emphasized.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.

<p class="sprk-b-TypeBodyOne">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.</p>
          

Configurable Variables

Variable Default Description
$sprk-color-body-one $sprk-black The color of the text.
$sprk-font-family-body-one RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-body-one 0.9375rem The size of the font.
$sprk-font-weight-body-one 500 The weight of the font.
$sprk-line-height-body-one 1.6 The line height of the font.

Body Two

This is the default sizing for all text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.

<p class="sprk-b-TypeBodyTwo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.</p>
          

Configurable Variables

Variable Default Description
$sprk-color-body-two $sprk-black The color of the text.
$sprk-font-family-body-two RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-body-two 0.9375rem The size of the font.
$sprk-font-weight-body-two 300 The weight of the font.
$sprk-line-height-body-two 1.6 The line height of the font.

Body Three

This body type size is intended for long sections of text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.

<p class="sprk-b-TypeBodyThree">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.</p>
          

Configurable Variables

Variable Default Description
$sprk-color-body-three $sprk-black The color of the text.
$sprk-font-family-body-three RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-body-three 0.9375rem The size of the font.
$sprk-font-weight-body-three 300 The weight of the font.
$sprk-line-height-body-three 2 The line height of the font.

Body Four

This body type is intended for legal text and other deemphasized copy.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.

<p class="sprk-b-TypeBodyFour">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.</p>
          

Configurable Variables

Variable Default Description
$sprk-color-body-four $sprk-black The color of the text.
$sprk-font-family-body-four RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif The font-family, including fallbacks.
$sprk-font-size-body-four 0.8125rem The size of the font.
$sprk-font-weight-body-four 300 The weight of the font.
$sprk-line-height-body-four 1.84 The line height of the font.

Fallback Fonts

In the event that a client has issues loading typefaces, we've defined the following system and web-safe typefaces that will be used in their place:

  • Helvetica
  • Helvetica Neue
  • Arial
  • sans-serif

Line-height Collision

When left alone, line height on type will create extra whitespace around the top and bottom of the text. When the text is in a container that has padding applied, it appears larger than intended, due to the extra whitespace.

See the article here for details: Space in design systems

The type sizes defined in spark all have this extra whitespace removed. Heading elements have this cropping automatically applied, where body copy will need the correct type classes applied.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores aspernatur commodi consectetur deleniti eaque enim, ex exercitationem expedita facilis iusto magni, nemo obcaecati quas soluta tempore totam veritatis voluptatem?