Typography

We also use the 8-pt methodology to control the vertical rhythm of our typography. Our base type size is 16px with a 1.5 line-height for optimal reading.

Casing

Sentences should be in sentence case unless it’s a proper noun. Links and buttons are title case. Headlines should be title case.

Font Stack

We use Typekit to deliver our fonts. We employ Proxima Nova as the typeface across the application.

Classes

Instead of targeting elements (for example: h1), we use classes. This means you can use semantic tags while still getting the style you need.

Sizes

Type sizes

Extra large

Large

Medium

Base

Small

Extra small

Ghost

Small ghost

Link

This text will be left-aligned. This is rarely needed.

This text will be centered.

This text will be right-aligned. This is rarely needed.

This text will be normal weight.

This text will be bold.

This will be our dangerous color.

<p class="t-xl">Extra large</p>
<p class="t-large">Large</p>
<p class="t-medium">Medium</p>
<p class="t-base">Base</p>
<p class="t-small">Small</p>
<p class="t-xs">Extra small</p>
<p class="t-ghost">Ghost</p>
<p class="t-ghost-small">Small ghost</p>
<a class="t-link" href="#">Link</a>
<p class="t-left">This text will be left-aligned. This is rarely needed.</p>
<p class="t-center">This text will be centered.</p>
<p class="t-right">This text will be right-aligned. This is rarely needed.</p>
<p class="t-normal">This text will be normal weight.</p>
<p class="t-heavy">This text will be bold.</p>
<p class="t-dangerous">This will be our dangerous color.</p>

Description

Choose the heading size based on what semantically makes sense instead of type size. As long as you provide a class name, it’ll render correctly.

Do

  • Limit the number varying typefaces in a container
  • Ensure there is clear type hierarchy
  • Use bold weight for headings and labels

Don't

  • Use bold styling on entire paragraphs, try using a heading with paragraph content
  • Use varying typefaces in a single content

Lists

  • Regular list item 1
  • Regular list item 2
  • Regular list item 3
  • Bullet list item 1
  • Bullet list item 2
  • Bullet list item 3
  • Numbered list item 1
  • Numbered list item 2
  • Numbered list item 3
  • Pipe delimited item 1
  • Pipe delimited item 2
  • Pipe delimited item 3
<ul>
  <li>Regular list item 1</li>
  <li>Regular list item 2</li>
  <li>Regular list item 3</li>
</ul>

<ul class="bulleted-list">
  <li>Bullet list item 1</li>
  <li>Bullet list item 2</li>
  <li>Bullet list item 3</li>
</ul>

<ul class="numbered-list">
  <li>Numbered list item 1</li>
  <li>Numbered list item 2</li>
  <li>Numbered list item 3</li>
</ul>

<ul class="pipe-delimited-list">
  <li>Pipe delimited item 1</li><li>Pipe delimited item 2</li><li>Pipe delimited item 3</li>
</ul>
<hr class="horizontal-rule">

Keyboard shortcut

⌥ ⇧ k 
<kbd class="keyboard-shortcut">⌥</kbd>
<kbd class="keyboard-shortcut">⇧</kbd>
<kbd class="keyboard-shortcut">k</kbd>

Accessibility

  • Copy must be:
  • Distinguishable
  • Accessible to assistive tech
  • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1