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.
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.
<h1 class="sprk-b-TypeDisplayOne">A Quick Brown Fox Jumps Over the Lazy Dog</h1>
This display size is intended to be used for primary headings.
<h1 class="sprk-b-TypeDisplayTwo">A Quick Brown Fox Jumps Over the Lazy Dog</h1>
This display size is intended to be used for secondary headings.
<h2 class="sprk-b-TypeDisplayThree">A Quick Brown Fox Jumps Over the Lazy Dog</h2>
This display size is intended to be used for third-level headings.
<h3 class="sprk-b-TypeDisplayFour">A Quick Brown Fox Jumps Over the Lazy Dog</h3>
This display size is intended to be used for fourth-level headings.
<h4 class="sprk-b-TypeDisplayFive">A Quick Brown Fox Jumps Over the Lazy Dog</h4>
This display size is intended to be used for fifth-level and sixth-level headings.
<h5 class="sprk-b-TypeDisplaySix">A Quick Brown Fox Jumps Over the Lazy Dog</h5>
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>
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>
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>
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>
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.
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);
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:
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?
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.