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, several 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
$using-webfont-body boolean This tells Spark that a webfont will be used for the body level of type settings.
$using-webfont-heading boolean This tells Spark that a webfont will be used for the display level of type settings.
$body-font-name string This tells Spark the name of the font that will be loaded for body level type and is the name that will be placed first in the body font stack.
$heading-font-name string This tells Spark the name of the font that will be loaded for display level type and is the name that will be placed first in the heading font stack.
$body-font-src string, url property This tells Spark the url stack to use in downloading the webfont for body level type.
$body-font-weight string, url property The font-weight of the webfont to use for body level type settings.
$body-bold-font-weight string, url property The font-weight of the webfont to use for bold body level type settings.
$body-bold-font-src string, url property This tells Spark the url stack to use in downloading the webfont for bold of body level type.
$heading-font-src string, url property This tells Spark the url stack to use in downloading the webfont for display level type.
$heading-bold-font-src string, url property This tells Spark the url stack to use in downloading the webfont for bold of heading level type.
$heading-font-weight string, url property The font-weight of the webfont to use for heading level type settings.
$heading-bold-font-weight string, url property The font-weight of the webfont to use for bold heading level type settings.

Display One

This type size is intended for cases where type needs to be larger than usual and not intended as a section heading or divider. It is usually for ads or hero images.

A Quick Brown Fox Jumps Over the Lazy Dog

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

Display Two

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

A Quick Brown Fox Jumps Over the Lazy Dog

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

Display Three

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

A Quick Brown Fox Jumps Over the Lazy Dog

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

Display Four

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

A Quick Brown Fox Jumps Over the Lazy Dog

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

Display Five

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

A Quick Brown Fox Jumps Over the Lazy Dog

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

Display Six

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

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

Display Seven

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

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>
          

Display Eight

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

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>
          

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>
          

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>
          

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?

Type Sizes Not Defined Here

If you need a type size that is not accounted for in the typography section, see below for additional sizing in each brand family.

The base value for this relative scale is 16px.

We recommend that if you're building something custom, that you use the type settings above. The type sizes listed below should be used rarely.

Myriad Pro

Sizing Values (Largest to Smallest)

  • 4.595 rem
  • 3.797 rem
  • 2.853 rem
  • 2.594 rem
  • 2.144 rem
  • 1.772 rem
  • 1.464 rem
  • 1.21 rem
  • 1 rem
  • 0.826 rem