Typography in a strong design system helps create balance and hierarchy for textual information. By creating structure within a page, text becomes enjoyable and appealing to read. We aim to ensure type within our product complies with WCAG 2.0 AA standards.
Avoid long lines by keeping line length under 90 characters.
Typography scale
This shows our previous typography scale and brand type face:
Page Title (H1)
@include ca-type-ideal-page-title;
Title (H2)
@include ca-type-ideal-title;
Display (H3)
@include ca-type-ideal-display;
Heading (H4)
@include ca-type-ideal-heading;
Lede (Intro)
@include ca-type-ideal-lede;
Body
@include ca-type-ideal-body;
Body Bold
@include ca-type-ideal-body-bold;
Small
@include ca-type-ideal-small;
Small Bold
@include ca-type-ideal-small-bold;
Notifications
@include ca-type-ideal-notification;
Labels
@include ca-type-ideal-label;
Control Action
@include ca-type-ideal-control-action;
Buttons
@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.
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: