Typography

01.Brand Fonts

Primary Typefaces

In an effort to break the stereotypical mold of how most software companies brand themselves, we chose Lyon, a bold serif, for our primary headings. Our smaller headings and body copy are set in the popular Roboto typeface, which we chose for its legibility, geometry, and performance.

Lyon Text Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz — 1234567890

Roboto Medium

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz — 1234567890

Roboto Light for body copy and Roboto Medium for emphasized text.

Fallback Typefaces

In those instances when our primary typefaces are unavailable, substitute Georgia for Lyon and Helvetica for Roboto. Be sure to use the same weights.

Georgia Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz — 1234567890

Helvetica Medium

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz — 1234567890

Helvetica Light for body copy and Helvetica Medium for emphasized text.

02.Approved Colors

To protect the integrity of our brand and prevent nightmarish designs, we've approved a limited subset of our color palettes for use with text. If you do not see a color below, do not use it as a text color.

Primary (Use Often)
UI-100

Ninja

Used for

All headings, subtitles, and bold text

Don't use

On dark backgrounds

UI-65

Christian Slater

Used for

All body copy on light backgrounds

Don't use

On dark backgrounds

UI-0

Powder Day

Used for

All headings, subtitles, and text on dark backgrounds

Don't use

On light backgrounds

MC-100

Rio

Used for

All links on light backgrounds

Don't use

For decorating body text or minor headings

Secondary (Use with Discretion)
CC-100

Maverick

Used for

Adding visual interest to text

Don't use

At smaller text sizes on light backgrounds

LC-100

Series B

Used for

Adding visual interest to text on dark backgrounds

Don't use

Very often or on light backgrounds

LW-100

Blonde on Blonde

Used for

Adding visual interest to text on dark backgrounds

Don't use

Very often or on light backgrounds

MW-100

Danger Zone

Used for

Adding visual interest to text on light backgrounds

Don't use

Very often or on dark backgrounds

Specialty (Use Rarely)
DW-150

1080 ½

Used for

Text on pages where purple is an accent color

Don't use

For any other purpose

UI-50

Dray Bay Gray

Used for

Text in custom illustrations

Don't use

For any other purpose

UI-15

Bill Murray

Used for

Disabled and placeholder text in form inputs

Don't use

For any other purpose

03.Type Scale

This type scale shows, at a glance, which pixel sizes can be used in our designs. Where a pixel size has multiple uses, only the first use is shown as a specimen. For more detailed specifications, jump to Type Hierarchy.

Pixels
Used for
Specimen
12px

Tiny paragraph, Overline, Caption

Have fun, stay sane, take care

14px

Small paragraph

Have fun, stay sane, take care

16px

Standard paragraph, Subtitles

Have fun, stay sane, take care

18px

Heading 6

Have fun, stay sane, take care
20px

Heading 5, Large paragraph

Have fun, stay sane, take care
24px

Heading 4, Huge paragraph

Have fun, stay sane, take care

28px

Heading 3

Have fun, stay sane, take care

36px

Heading 2

Have Fun, Stay Sane, Take Care

54px

Heading 1

Have Fun, Stay Sane, Take Care

76px

Display 2

This is some text inside of a div block.
92px

Display 1

This is some text inside of a div block.

04.Type Hierarchy

To accommodate a variety of use cases, we created a robust set of headings and subheadings for use in digital and print. We have two display headings, six semantic headings (H1-H6), and several additional subheadings.

Display 1
Font Size

92px

Line Height

104px / 1.13

Family / Weight

Lyon Text / 700

Letter Spacing

-1.5px

Uses

In web, display headings are rarely used, but are available for special designs in which the default size of an H1 is too small to give the desired visual impact. Display headings are more commonly used in print, where there is typically more available space.

Display 2
Font Size

76px

Line Height

88px / 1.16

Family / Weight

Lyon Text / 700

Letter Spacing

-1px

Uses

Same as Display 1. It is worth noting that a display heading should always be the most prominent in the design. When used on the web, display headings should be treated as an H1. Never use a display heading for lesser headings or merely as ornamentation.

Heading 1

Font Size

54px

Line Height

64px / 1.19

Family / Weight

Lyon Text / 700

Letter Spacing

-1px

Uses

Headings 1-6 are used to introduce pages, sections, and sub sections. Heading 1 should be the most prominent heading on the page, and there should never be more than one.

Heading 2

Font Size

36px

Line Height

48px / 1.33

Family / Weight

Lyon Text / 700

Letter Spacing

-0.25px

Uses

The most commonly used heading. Should be used on web pages and printed pieces to introduce a major section.

Heading 3

Font Size

28px

Line Height

40px / 1.43

Family / Weight

Roboto / 500

Letter Spacing

Uses

If it better fits the design, can be used in place of Heading 2; otherwise, it should be used to introduce a subsection within a section already introduced by Heading 2.

Heading 4

Font Size

24px

Line Height

32px / 1.33

Family / Weight

Roboto / 400

Letter Spacing

Uses

Should introduce a subsection or block of text. Can be used in place of Heading 3 if it better suits the design.

Heading 5
Font Size

20px

Line Height

28px / 1.4

Family / Weight

Roboto / 400

Letter Spacing

0.15px

Uses

Same as Heading 4. Can be used in place of Heading 4 if it better suits the design. Should rarely be used in place of Heading 3.

Heading 6
Font Size

18px

Line Height

24px / 1.33

Family / Weight

Roboto / 500

Letter Spacing

0.15px

Uses

Rarely used as a proper heading, since most pages aren't so detailed. Can be used in place of Heading 5 if it better suits the design.

Subtitle 1
Font Size

16px

Line Height

24px / 1.5

Family / Weight

Roboto / 500

Letter Spacing

0.5px

Uses

Use to introduce minor bits of text, as titles in a list, or as a heading for tables, columns, rows.

Subtitle 2
Font Size

16px

Line Height

24px / 1.5

Family / Weight

Roboto / 400

Letter Spacing

0.1px

Uses

Can be used interchangeably with Subtitle 1 when slightly less emphasis is desired.

Overline
Font Size

12px

Line Height

12px / 1

Family / Weight

Roboto / 500

Letter Spacing

1px

Uses

Works best as a short lead-in to a headline, as breadcrumbs, or as an alternative to Subtitle 1 and 2.

Caption
Font Size

12px

Line Height

16px / 1.33

Family / Weight

Roboto / 400

Letter Spacing

0.5px

Uses

Used to give additional context to an image or figure. Should always appear directly after an image.

05.Body Copy

Body copy needs to be versatile, so we created five different styles. Maximum paragraph widths are set for optimum legibility (see Line Lengths).

Huge — 24px font size / 36px line height

Harry Potter’s appearance did not endear him to the neighbors, who were the sort of people who thought scruffiness ought to be punishable by law, but as he had hidden himself behind a large hydrangea bush this evening he was quite invisible to passersby.

Used for

Cover page or hero copy. Use sparingly, and pair with either Display 1 or Display 2.

Large — 20px / 32px

Harry Potter’s appearance did not endear him to the neighbors, who were the sort of people who thought scruffiness ought to be punishable by law, but as he had hidden himself behind a large hydrangea bush this evening he was quite invisible to passersby.

Used for

Hero copy, section intro paragraphs, and prolonged reading (more than 3 paragraphs).

Standard — 16px / 24px

Harry Potter’s appearance did not endear him to the neighbors, who were the sort of people who thought scruffiness ought to be punishable by law, but as he had hidden himself behind a large hydrangea bush this evening he was quite invisible to passersby.

Used for

Most body copy.

Small — 14px / 24px

Harry Potter’s appearance did not endear him to the neighbors, who were the sort of people who thought scruffiness ought to be punishable by law, but as he had hidden himself behind a large hydrangea bush this evening he was quite invisible to passersby.

Used for

Less important text and text in certain components, like cards.

Legal — 12px / 20px

Harry Potter’s appearance did not endear him to the neighbors, who were the sort of people who thought scruffiness ought to be punishable by law, but as he had hidden himself behind a large hydrangea bush this evening he was quite invisible to passersby.

Used for

Unobtrusively presenting non-critical messaging, like legal disclaimers, in footers and toast popups.

05.Line Lengths

The number of characters in a line of text affects its readability. Studies have shown that the optimum line length is 45-75 characters for larger screens and 35-40 characters for mobile screens. Our preferred line lengths are at the upper limit of these optimal ranges (75 and 40 characters, respectively). You may deviate slightly, but avoid going into the red zones.

Legend

Ideal (between 45 and 75 characters on large screens; 66 characters is optimal)

Acceptable (between 76 and 90 characters on large screens)

Too short or too long (under 45 or over 90 characters on large screens)

Large Screen
45
75
90
ideal (45-75 characters)

Harry Potter’s appearance did not endear him to the neighbors, who were the sort of people who thought scruffiness ought to be punishable by law.

Too Long (> 90 characters)

Harry Potter’s appearance did not endear him to the neighbors, who were the sort of people who thought scruffiness ought to be punishable by law.

Mobile Screen
35
40
50
ideal (35-40 characters)

Harry Potter’s appearance did not endear him to the neighbors, who were the sort of people who thought scruffiness ought to be punishable by law.

Too Long (> 50 characters)

Harry Potter’s appearance did not endear him to the neighbors, who were the sort of people who thought scruffiness ought to be punishable by law.

Brand Guidelines v1.1.0 © Copyright 2019 GoSpotCheck, Inc.