Typography scale

This shows our previous typography scale and brand type face:

@include ca-type-ideal-page-title;

@include ca-type-ideal-title;

@include ca-type-ideal-display;

@include ca-type-ideal-heading;

@include ca-type-ideal-lede;

@include ca-type-ideal-body;

@include ca-type-ideal-body-bold;

@include ca-type-ideal-small;

@include ca-type-ideal-small-bold;

@include ca-type-ideal-notification;

@include ca-type-ideal-label;

@include ca-type-ideal-control-action;

@include ca-type-ideal-button;

To keep in mind

• For font size, use 16px (pixel size) / 1em (in code) to ensure text is readable and legible. To comply with WCAG 2.0 AA standards, use a minimum font size of 12px only for supplementary text.
• Aim for vertical rhythm and align text to the baseline grid.
• To keep line length under 90 characters, constrain paragraphs to a maximum width of 870px wide for Inter when there's more than 1 line of text.
• Text color / contrast is crucial. Ensure color ratios comply with WCAG 2.0 AA.
• White space is equally important. Let your text breathe.

Links

Use underlines for links in body copy with no underline on hover/focus. For standalone links, such as a privacy link at the bottom of a page, use no underline and show underline on hover/focus.

Abbreviations

For abbreviations, such as HRIS, show the expanded text after the first use, such as "HRIS (human resource information system)" and abbreviations thereafter. If there's not enough space or only one use, you might instead show an abbreviation using a dotted underline and use a tooltip to expand the abbreviation on hover/focus.

When to use

• Use brand typefaces, including Greycliff (Sans Serif) for headings, Inter for body copy and IBM Plex Mono (Monospace) for code or machine-generated tabular data.
• Use type styles to define content structure (Page titles, Intro Lede, Body, Small, etc.).
• Use typography when it's a pleasure to read and makes sense in terms of visuals and information.

When not to use

• Avoid overwhelming people with text. Consider using imagery or data visualizations instead.
• Avoid using typography styles that will fail to render correctly across all devices and operating systems (i.e. avoid jank).

See also

• Use the Product Writing Checklist to quickly check any text you are adding to the Culture Amp product or related communications.

External links

Here are some examples of typography in existing design systems and typography references:

• Polaris: typography.
• Material: type system.
• Visualize working with line-height.