Culture Amp
Menu
Also known as:
FontText

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.

AnchorNeed 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.

Links

  • Paragraph links: Use underlines to represent a link within a paragraph of text to help it stand out. Do not rely on the color alone as it may not be visible for vision impaired users. On hover, hide paragraph link underlines.
  • Standalone links: For standalone links, you may use spacing and context (such as navigation bars or a privacy links at the bottom of a page) to identify the link. Show no underline by default on a standalone link and show an underline on the hover.

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 and when not to use

When 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.
When not to use
  • 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: