Search…
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]

Font stack

CIO Caps (decorative)

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.
Download CIO Caps here. Once downloaded, double click to install.
CIO Caps should be used for:
  • Marketing site numbers
  • Text in illustrations such as banners and cards
  • Presentations

Poppins (decorative)

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

System Fonts (functional)

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

Sans-serif (default)

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Monospace

font-family: "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier", "Monospace";

Brand Hierarchy

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

Product Hierarchy

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?

Additional Examples

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

Size Scale

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

Best Practices

Line Length

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.

Alignment

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:
Copy link
On this page
Font stack
CIO Caps (decorative)
Poppins (decorative)
System Fonts (functional)
Brand Hierarchy
Product Hierarchy
Best Practices
Line Length
Alignment