Typography

Typography is important when establishing a strong design system. When established, it can help to create balance and hierarchy of 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.

Type hierarchy

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;

What is its purpose?

  • Create visual hierarchy of textual information

Why is it useful?

  • Makes reading text enjoyable / appealing / legible
  • Creates structure within a page

How should we use it?

  • Comply with WCAG 2.0 AA standards (12px minimum, 16px / 1em standard)
  • Utilise brand typefaces (Open Sans → Ideal Sans (Sans Serif) and Monaco → Operator (Monospace))
  • Text colour / contrast is crucial. Ensure colour ratios comply with WCAG 2.0 AA
  • Adhere to our baseline grid (line-height) of 24px / Vertical rhythm
  • Ensure paragraph widths are not too long (650px wide max or 90 characters)
  • White space is equally important. Let your text breathe.
  • Use type styles to define content structure (Page titles, Intro Lede, Body, Small etc)
  • Render correctly (i.e. not janky) across all devices and operating systems.

How shouldn’t we use it?

  • You can also view the Product Writing Checklist to quickly check any text you are adding to the Culture Amp product or related communications.

General guidelines

  • Basic structure of hierarchy (examples)
  • Paragraph spacing / Vertical rhythm
  • Paragraph width
  • Links (when to underline, when not to)
  • How to style Abbreviations (E.g. HRIS) / Underline / Tooltips

Best practices

Typography should…
  • A pleasure to read

  • Should make sense, visually and informationally

Typography should not…
  • Be overwhelming

  • Difficult to read