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.
Links, buttons, headlines and sentences should be in sentence case unless it’s a proper noun.
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
Ghost
LinkThis 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-ghost">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>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.
Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant.
Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant.
Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant.
Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant.
<div class="l-grid l-col-4 l-h-gap-2x">
<tk-card>
<tk-card-body>
<h3>Truncates to one line</h3>
<p class="t-truncate-1x">Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant. </p>
</tk-card-body>
</tk-card>
<tk-card>
<tk-card-body>
<h3>Truncates to two lines</h3>
<p class="t-truncate-2x">Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant. </p>
</tk-card-body>
</tk-card>
<tk-card>
<tk-card-body>
<h3>Truncates to three lines</h3>
<p class="t-truncate-3x">Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant. </p>
</tk-card-body>
</tk-card>
<tk-card>
<tk-card-body>
<h3>Truncates to four lines</h3>
<p class="t-truncate-4x">Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant. </p>
</tk-card-body>
</tk-card>
</div>Truncation is used for long blocks of text that can be visually hidden (once the correct utility class is used) with ellipses.
<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" aria-label="option key">⌥</kbd>
<kbd class="keyboard-shortcut" aria-label="up arrow key">⇧</kbd>
<kbd class="keyboard-shortcut" aria-label="k key">k</kbd>| Serial No. | Product | Price |
|---|---|---|
| 29553321265184 | Toaster oven | 390.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">390.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>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