CIO Caps should be used for:
- Marketing site numbers
- Text in illustrations such as banners and cards
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:
- 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";
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.
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).
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: