Typography

@include ca-type-ideal-page-title;

@include ca-type-ideal-title;

@include ca-type-ideal-display;

@include ca-type-ideal-heading;

@include ca-type-ideal-lede;

@include ca-type-ideal-body;

@include ca-type-ideal-body-bold;

@include ca-type-ideal-small;

@include ca-type-ideal-small-bold;

@include ca-type-ideal-notification;

@include ca-type-ideal-label;

@include ca-type-ideal-control-action;

@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