.svg){kind=small}
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)
Ninja
All headings, subtitles, and bold text
On dark backgrounds
Christian Slater
All body copy on light backgrounds
On dark backgrounds
Powder Day
All headings, subtitles, and text on dark backgrounds
On light backgrounds
Rio
All links on light backgrounds
For decorating body text or minor headings
Secondary (Use with Discretion)
Maverick
Adding visual interest to text
At smaller text sizes on light backgrounds
Series B
Adding visual interest to text on dark backgrounds
Very often or on light backgrounds
Blonde on Blonde
Adding visual interest to text on dark backgrounds
Very often or on light backgrounds
Danger Zone
Adding visual interest to text on light backgrounds
Very often or on dark backgrounds
Specialty (Use Rarely)
1080 ½
Text on pages where purple is an accent color
For any other purpose
Dray Bay Gray
Text in custom illustrations
For any other purpose
Bill Murray
Disabled and placeholder text in form inputs
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.
Tiny paragraph, Overline, Caption
Have fun, stay sane, take care
Small paragraph
Have fun, stay sane, take care
Standard paragraph, Subtitles
Have fun, stay sane, take care
Heading 6
Have fun, stay sane, take care
Heading 5, Large paragraph
Have fun, stay sane, take care
Heading 4, Huge paragraph
Have fun, stay sane, take care
Heading 3
Have fun, stay sane, take care
Heading 2
Have Fun, Stay Sane, Take Care
Heading 1
Have Fun, Stay Sane, Take Care
Display 2
Display 1
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.
92px
104px / 1.13
Lyon Text / 700
-1.5px
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.
76px
88px / 1.16
Lyon Text / 700
-1px
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
54px
64px / 1.19
Lyon Text / 700
-1px
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
36px
48px / 1.33
Lyon Text / 700
-0.25px
The most commonly used heading. Should be used on web pages and printed pieces to introduce a major section.
Heading 3
28px
40px / 1.43
Roboto / 500
—
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
24px
32px / 1.33
Roboto / 400
—
Should introduce a subsection or block of text. Can be used in place of Heading 3 if it better suits the design.
Heading 5
20px
28px / 1.4
Roboto / 400
0.15px
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
18px
24px / 1.33
Roboto / 500
0.15px
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.
16px
24px / 1.5
Roboto / 500
0.5px
Use to introduce minor bits of text, as titles in a list, or as a heading for tables, columns, rows.
16px
24px / 1.5
Roboto / 400
0.1px
Can be used interchangeably with Subtitle 1 when slightly less emphasis is desired.
12px
12px / 1
Roboto / 500
1px
Works best as a short lead-in to a headline, as breadcrumbs, or as an alternative to Subtitle 1 and 2.
12px
16px / 1.33
Roboto / 400
0.5px
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).
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.
Cover page or hero copy. Use sparingly, and pair with either Display 1 or Display 2.
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.
Hero copy, section intro paragraphs, and prolonged reading (more than 3 paragraphs).
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.
Most body copy.
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.
Less important text and text in certain components, like cards.
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.
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)
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.
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.
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.
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.