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.

Numbers

Some font families, such as Ideal Sans, include numeric font variants for alternate figures. That might include "proportional old style", "proportional lining", "tabular old style", or "tabular lining" numbers:

• Use tabular lining numbers for fixed width numbers in tables and anywhere that columns of numbers need to line up, e.g. to make it easy to add up numbers in a column.
• Use proportional lining numbers for numbers used within an uppercase string or a sentence.
• Use proportional old-style numbers for body copy or standalone figures, such as hero data, where it doesn't need to line up with any other figures.

Note: Ideal Sans does not include tabular old style numbers.

In Figma, you can set these in the Design panel > under Text > 3 dots icon > under Numbers > Style.

In Sketch, you can set these in Fonts > cog icon > Typography > Number spacing (monospace), Number case (Lining Figures).

In code, you can set the font-variant-numeric and different type face.

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.
• Butterick’s Practical Typography: Alternate figures