Comment on page
Typography
Follow these guidelines to using typography. Have questions about product typography? Talk to Annie at [email protected]. Have questions about brand typography? Talk to Khari at [email protected].
CIO Caps is a custom font used exclusively at Customer.io. It is based on characters from That Marker Pack by Dan Petty and includes custom character variations accessible by switching between upper and lower cases. This font should only be used in Ink-900 or Purple-700.
CIO Caps should be used for:
- Marketing site numbers
- Text in illustrations such as banners and cards
- Presentations
Poppins serves as the bridge between our logotype and typography - it mimics the rounded shape in our logo and doesn't distract from the content. Poppins should be used for:
- Brand headers
- Marketing material headers
- Presentation headers
We use system fonts for everything else, including brand body text and UI. System fonts load quickly, are legible, and are universal. System fonts should be used for:
- Product
- Brand body text
- Functional documents (anything not used for presentation or marketing purposes)
- Anything that might be in paragraph form
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier", "Monospace";
Actual | Font | Font Size (rem | px) | Line Spacing (px) | Font Weight | Add. |
 | Poppins | 3.25 | 52 | 52 | 500 | |
 | Poppins | 2.5 | 40 | 40 | 500 | |
 | Poppins | 2 | 32 | 32 | 500 | |
 | Poppins | 1.5 | 24 | 24 | 500 | |
 | Poppins | 1.125 | 18 | 20 | 700 | uppercase |
 | Poppins | 0.875 | 14 | 16 | 700 | uppercase |
 | Poppins | .75 | 12 | 14 | 500 | uppercase |
 | System | 1.5 | 24 | 36 | 400 | |
 | System | 1 | 16 | 24 | 400 | |
 | System | 0.875 | 14 | 20 | 400 | |
The product has a default hierarchy, as seen below, but also offers a more flexible approach to typography. This flexible approach is needed to accommodate the wide array of content seen in the product (form inputs, metrics tables, labels, etc.). When the default hierarchy doesn't apply, leverage the size scales in combination with font weights of 400, 500, and 700.
Hierarchy
Uses
Actual | Font | Font Size (rem|px) | Line Height (px) | Font Weight | Add. |
 | System | 1.5 | 24 | 24 | 600 | |
 | System | 1.125 | 18 | 20 | 700 | |
 | System | 1 | 16 | 20 | 600 | |
 | System | 0.875 | 14 | 16 | 600 | |
 | System | 0.875 | 14 | 20 | 400 | |
 | System | 0.875 | 14 | 20 | 600 | |
 | System | 0.875 | 14 | 20 | 400 | gray-500 |
 | System | 0.75 | 12 | 18 | 400 | |
 | System | 0.75 | 12 | 18 | 400 | gray-500 |
 | System Mono | 0.8125 | 13 | 20 | 700 | |
| Uses |
 | Announcement headers, big numbers |
| Page header, empty states |
 | Section header |
 | Section subheader, modal header |
| Default body context, navigation text |
 | Active navigation text |
| Secondary body text, timestamps, ‘last saved’ |
| Tags, counters in tabular nav, graph keys |
| Pagination |
| Umm.... code? |
Hierarchy
Uses
Actual | Font | Font Size (rem | px) | Line Height (px) | Font Weight | Add. |
 | System | inherit | inherit | inherit | purple-500, underline |
 | System | inherit | inherit | inherit | grey-700, underline |
 | System | 0.6875 | 11 | 12 | 600 | gray-500, uppercase |
 | System | inherit | inherit | inherit | grey-700, bg: teal-100 |
 | System Mono | 0.8125 | 13 | 20 | 400 | raspberry-900, bg: gray-100 |
| Uses |
| Most important links |
| |
 | Input labels, table column headers, number labels, general labels |
| |
| |
Here's an additional size scale based on the hierarchy to help guide you in designing content where a straightforward heading or HTML element doesn't apply. Reminder to use these in combination with the available weights: 400 (Regular), 500 (Medium), 700 (Bold).
Size | Font Size (rem) | Font Size px) |
XXXL | 3 | 48 |
XXL | 2 | 32 |
XL | 1.5 | 24 |
L | 1.25 | 20 |
M | 1 | 16 |
S | 0.875 | 14 |
XS | 0.75 | 12 |
XXS | 0.625 | 10 |
A paragraph’s line length has a direct impact on readability, making the content more or less digestible. There’s no exact answer, but the goal is to aim for 65-95 characters per line.
Long-form content. By default, longer-form content should be left-aligned to improve readability.
Data. Certain types of data should be aligned to improve consumption and comparability. For example, monetary values or numbers with consistent decimal places should be right-aligned.
Non-text characters. Alignment of content (text) should be prioritized, with non-text characters getting pushed outside the alignment. Here are two examples illustrating this:
Last modified 1yr ago