Typography

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.

Restrictions

  • You must set up a Typekit kit for your application to make use of these 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>
          

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>
          

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>
          

Typekit Setup

In order to implement Spark-Core, you'll need to create a kit on Typekit.com for your application.

Need access to typekit for your internal Quicken Loans application? Email sparkdesignsystem@quickenloans.com

The kit should include two weights (normal and bold) of one font family, Myriad Pro. We currently do not use italics in our type treatment.

Please see Typography for font usage.

Typekit Loader

You'll need to include the following snippet into your site's code. Spark includes fallback font definitions, so it's recommended that you include it inside of the <body> tag, towards the end of your document, in order to avoid render blocking.

You'll need to insert your new kit's id into the snippet below.

Included in the code below is an event that gets dispatched when the fonts have finished loading ('fonts-active').

      
  (function(d) {
    var config = {
      kitId: '<your-kit-id-here>',
      scriptTimeout: 3000,
      active: function () {

        // Create the event.
        var event = document.createEvent('Event');
        event.initEvent('fonts-active', true, true);
        document.dispatchEvent(event);
      }
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{
    Typekit.load(config)}catch(e){}};
    s.parentNode.insertBefore(tk,s)
  })(document);
      
    

Fallback fonts

In the event that a client has issues loading typefaces from typekit, 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