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

Links, buttons, headlines and sentences should be in sentence case unless it’s a proper noun.

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.

Usage

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>

Table with tabular number formatting

Serial No. Product Price
29553321265184 Toaster oven 39.00
90948024787993 Charcoal grill 350.00
43677792107393 Medicine cabinet 120.00 
<div class="table">
<table class="table table--stripe">
  <thead>
    <tr>
      <th class="table__header">Serial No.</th>
      <th class="table__header">Product</th>
      <th class="table__header">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="t-tabular-alignment">29553321265184</td>
      <td>Toaster oven</td>
      <td class="t-tabular-alignment">39.00</td>
    </tr>
    <tr>
      <td class="t-tabular-alignment">90948024787993</td>
      <td>Charcoal grill</td>
      <td class="t-tabular-alignment">350.00</td>
    </tr>
    <tr>
      <td class="t-tabular-alignment">43677792107393</td>
      <td>Medicine cabinet</td>
      <td class="t-tabular-alignment">120.00</td>
    </tr>
  </tbody>
</table>
</div>

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