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.
Sentences should be in sentence case unless it’s a proper noun. Links and buttons are title case. Headlines should be title case.
We use Typekit to deliver our fonts. We employ Proxima Nova as the typeface across the application.
Instead of targeting elements (for example: h1), we use classes. This means you can use semantic tags while still getting the style you need.
Extra large
Large
Medium
Base
Small
Extra small
Ghost
Small ghost
LinkThis text will be centered.
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-center">This text will be centered.</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>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.
<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"><kbd class="keyboard-shortcut">⌥</kbd>
<kbd class="keyboard-shortcut">⇧</kbd>
<kbd class="keyboard-shortcut">k</kbd>