Typography

Follow these guidelines to using typography. Have questions about product typography? Talk to Annie at [e-mail]. Have questions about brand typography? Talk to Khari at [e-mail].

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

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

	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

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

	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: