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.1 AA standards.
- Use Greycliff CF for hero data, display 0, and headings 1–3.
- Use Inter for headings 4–6, all paragraphs, and buttons.
- Use IBM Plex Mono for preformatted body text, such as code blocks.
- Visually create vertical rhythm by aligning text with the baseline grid. We are moving away from a technical baseline grid.
- Avoid long lines by keeping line length under 90 characters to improve readability.
- For font size, use 16px (pixel size) / 1em (in code) to ensure text is readable and legible. To comply with WCAG 2.1 AA standards, use a minimum font size of 12px only for supplementary, non-critical text.
- Aim for vertical rhythm and align text to the baseline grid.
- To keep line length under 90 characters:
- Constrain typography containers to a maximum width when there's more than 1 line of text.
- See the Figma embed sticker sheet for specific values in pixels to maintain optimal line length for readability.
- When there are multiple headings close together on a page, such as a Heading 1, a paragraph, and a Heading 2, constrain the container to the shortest line length.
- Text color / contrast is crucial. Ensure color ratios comply with WCAG 2.1 AA. See Color guidelines for text color guidelines.
- White space is equally important. Let your text breathe.
Display 0: Used only for brand moments including introductory screens (Log In, Onboarding, Capture Intro, etc.) or outro pages (Positive, Negative, etc.).
Heading 2: Also referred to as a Section Heading. Used to introduce major sections of content on a page, and in containers independent of the page hierarchy, such as Modals or Drawers. Generally positioned outside of cards in most layouts, but can also be used inside if more appropriate to the surrounding context.
Heading 4: Used for the primary piece of information in a list item, such as the title of a survey/report or an employee name.
Heading 5: Primarily for long form content where an extra level of hierarchy is needed (such as Skills Coach and educational content). Stylistically identical to Body Bold. Avoid using Heading 5 with short form content in product screens.
Intro Lede: (Max width: 975px) Used only for brand moments including introductory screens (Log In, Onboarding, Capture Intro etc) or Positive and Negative Outro screens when paired with Display 0.
Body: (Max width: 780px) Primarily used for all paragraph text and most body copy.
Small: (Max width: 680px) Used primarily for content that is less important such as helper text for a form input or metadata.
Extra Small: (Max width: 600px) This type style does not meet the minimum accesibility requirements for text legiility (14px). 12px is considered acceptable by our auditors, but should only be used in rare exceptions, such as legal fine print, terms & conditions, etc. Avoid using extra small paragraphs within key product pages.
Preformatted: Used for code snippets or spreadsheet data.
123 Large: Used to present the most important data (also referred to as hero data) on reporting pages.
$% Large: Currencies ($), Percentages (%) and Mathematical symbols (+,-,x) are stylistically smaller than numeric data and must use this specific type style when paired with the Data 123 Large.
123 Medium: Used to present data that is not considered ‘hero data’ but has importance within a report or summary.
$% Medium: Currencies ($), Percentages (%) and Mathematical symbols (+,-,x) are stylistically smaller than numeric data and must use this specific type style when paired with the Data 123 Medium.
123 Small: Used to present data that doesn’t need to be prominent. There is no separate small style for Currencies ($), Percentages (%) and Mathematical symbols (+,-,x) because the symbols need to remain legible at this size.
Paragraph links: Used when a link is located amongst a body of text (i.e. is within a sentence or paragraph) and cannot be clearly distinguished as a link by its color alone. In its default state, it shows an underline. In its hover state, the underline disappears.
Standalone links: Used when a link is isolated from a body of text (i.e. is not within a sentence or paragraph) and can be clearly distinguished as a link by its color alone. In its default state, it does not show an underline. In its hover state the underline appears.
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.
- Use brand typefaces, including Greycliff CF (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 (Display 0 for landing 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.
- Avoid overwhelming people with text. Consider using imagery or a data visualization instead.
- Avoid using typography styles that will fail to render correctly across all devices and operating systems (i.e. avoid jank).
- Use the Copy quality checklist to quickly check any text you are adding to the Culture Amp product or related communications.
Here are some examples of typography in existing design systems and typography references: