Typography
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.
Need to know
- 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.
Visuals
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.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.
Headings
Display 0: Used only for brand moments including introductory screens (Log In, Onboarding, Capture Intro, etc.) or outro pages (Positive, Negative, etc.).
Heading 1: Used only for page titles in the Title Block of the page Header or Workflow Header.
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 3: Used to label subsets or groupings of information within a section, or as a title in individual objects, such as a Tile or Guidance Block. Generally used within a card container.
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.
Heading 6: Used for small headings on interactive elements, such as table headers, form input labels and in popovers and notifications.
Paragraphs
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.
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.
Links
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.
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 and when not to use
- 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).
See also
- Use the Copy quality 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: