Design
Implementation
 

Typography

Overview

It is important that a website maintains consistency in style, and typography is no exception. Typography is one of the most important elements to keep consistent across a site and in a page because it is how the site communicates with the user. The difference between good typography and bad typography can be the difference between a transaction and a visit. Fortunately, implementing good typography is much easier than implementing components, as it is mostly basic css. Below is an example of what typography is and how it should look on our sites.

Go to Code

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6
Subtitle 1
Subtitle 2

Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.

BUTTON TEXT
Caption text
OVERLINE TEXT
 

Scale Table

A scale table displays the type scale. A type scale is the properties of all typographical elements in a set.

Go to Code
Scale Category Typeface Weight Size Case Line Height Letter Spacing

Headline 1

 BlinkMacSystemFont 300 6rem Sentence 6rem -.015625em

Headline 2

 BlinkMacSystemFont 300 3.75rem Sentence 3.75rem -.0083333333em

Headline 3

 BlinkMacSystemFont 400 3rem Sentence 3.125rem normal

Headline 4

 BlinkMacSystemFont 400 2.125rem Sentence 2.5rem .0073529412em
Headline 5
 BlinkMacSystemFont 400 1.5rem Sentence 2rem normal
Headline 6
 BlinkMacSystemFont 500 1.25rem Sentence 2rem .0125em
Subtitle 1
 BlinkMacSystemFont 400 1rem Sentence 1.75rem .009375em
Subtitle 2
 BlinkMacSystemFont 500 .875rem Sentence 1.375rem .0071428571em

Body 1

 BlinkMacSystemFont 400 1rem Sentence 1.5rem .03125em

Body 2

 BlinkMacSystemFont 400 1rem Sentence 1.25rem .03125em

BUTTON

 BlinkMacSystemFont 400 0.75rem All Caps 1.25rem .0333333333em

Caption

 BlinkMacSystemFont 400 0.75rem Sentence 1.25rem .0333333333em
Overline text
 BlinkMacSystemFont 500 0.75rem All Caps 2rem .1666666667em
 

Headlines

In the type scale, headlines span from a range of 1 through 6. Headlines are the largest text on the screen, reserved for short, important text or numerals.

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Headline 1

There should only be one headline 1 (h1) per page. This single headline 1 should describe what the general content of the page will contain. Any other headlines on the page should be a headline 2 or smaller.

Do: Use a single headline 1 with subheadlines

Animals

Dogs

Golden Retriever

Poodle

Cats

Lion

Tiger

Dont: Use multiple headline 1's

Animals

Dogs

Golden Retriever

Places

Countries

Canada

Headlines 2-6

Headlines 2-6 should be used in descending order to introduce new sub-categories, using a headline 2 after a headline 1, or a headline 3 after a headline 2. If you end up more than 6 sub-categories deep, you should probably reorganize to fit the content in a different way.

Do: Put headlines in descending order

Animals

Dogs

Golden Retriever

Dont: Use headlines in random order

Animals

Dogs

Golden Retriever

 

Subtitles

Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles. A subtitle would be used for text that is an important piece of information, but is too short to warrant the use of a body.

Do: Use subtitles for brief pieces of information

Shirt

Only available in small
Dont: Use subtitles as a body

Shirt

This shirt is only available in small, and it is also only available in red. It is a shirt made of cotton, and it can be put through the wash just fine. On the shirt is an image of a dog.
 

Body

Body text comes in ranges 1-2, and it's typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.

Body

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas nesciunt vero repellendus obcaecati ducimus maxime iste velit eaque sed, voluptatem laborum doloremque sequi ipsa necessitatibus quo adipisci ab est qui numquam doloribus voluptas ad, eligendi vitae similique. Consequuntur ab sed ipsam voluptatibus laborum ex, nobis harum voluptatum autem assumenda animi.
 

Caption and Overline

Caption and overline text (text with a line above it) are the smallest font sizes. They are used sparingly to annotate imagery or to introduce a headline.

Do: Use captions or overlines to annotate an image or headline

Shirts

This section is about shirts
Dont: Use captions or overlines without a headline or image
This caption is lonely :C
 

Button

Button text is a call to action used by different types of buttons, and in tabs, dialogs, and cards. Anything that acts as a button, even if the component isn't a button in name.

Do: Use button text on things that act as a button
Dont: Use button text on things that do not act as a button
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas nesciunt vero repellendus obcaecati ducimus maxime iste velit eaque sed, voluptatem laborum doloremque
NOT A BUTTON
sequi ipsa necessitatibus quo adipisci ab est qui numquam doloribus voluptas ad, eligendi vitae similique. Consequuntur ab sed ipsam voluptatibus laborum ex, nobis harum voluptatum autem assumenda animi.
 

Typography

Overview

Contents
Overview Scale Table Headlines Subtitles Body Captions and Overline Button text
Overview Scale Table