Fundamentals - Typography

Typography Defines Hierarchy

Typography in a design system is essential for creating a clear hierarchy, ensuring that users can quickly identify the most important information. Proper use of font size, weight, and colour can guide users through a product with ease.

Do's:

• Use varied font sizes to distinguish between headings, subheadings, and body text.

• Employ bold or semi-bold weights for headings to draw attention.

Don'ts:

• Avoid using too many font styles and weights, as this can confuse the hierarchy.

• Don't rely solely on colour to differentiate text importance, as this can affect accessibility.

Typography Defines Purpose

Each typeface and style within a design system should serve a specific purpose, from conveying brand personality to ensuring readability.

Do's:

• Consistently apply type styles for predictable and clear communication.

Don'ts:

• Don't frequently change fonts across different products or platforms, as it can disrupt user familiarity.

Vertical Alignment and Use

Vertical alignment is critical for readability and aesthetic cohesion. It aligns text in a way that complements other design elements, like icons and controls.

Do's:

• Align text blocks and elements in a way that creates a seamless visual flow.

• Use grid systems to maintain vertical rhythm and spacing.

Don'ts:

• Avoid misaligned text that creates a jarring visual experience.

• Don't neglect the vertical spacing between lines, as it impacts readability.

Icons and Symbols

Icons and symbols should be used thoughtfully within typography to support understanding and navigation.

Do's:

• Ensure icons complement the text both visually and contextually.

• Match icon colour with accompanying text for coherence.

Don'ts:

• Don't let icons overpower the text or distract from the message.

• Avoid using icons that are too intricate to be understood at a glance.

Body Text

The body text in a design system is the core element that conveys the bulk of content to the user. It should be optimally readable and comfortably fit within the design's visual hierarchy.

Do's:

• Choose a legible font size and line spacing that facilitates easy reading on various devices and screen sizes.

• Maintain consistent body text styling throughout the product to support a cohesive user experience.

Don'ts:

• Don't use font sizes that strain the eyes or require zooming on standard displays.

• Avoid long blocks of text without adequate paragraph breaks or margins.

Underline

In digital design, underlines typically signify links. When applied correctly, they guide users to interactive elements without causing confusion.

Do's:

• Apply underlining to text links to clearly indicate interactivity.

• Ensure that the underline is noticeable without disrupting the legibility of the link text.

Don'ts:

• Don't underline text that isn't a link, as this goes against user expectations.

• Avoid using underlines for emphasis or decoration; other methods like bold or italics are more suitable.

Lists

Lists organise information into a format that's easy to scan, enabling users to comprehend sets of related items or steps effectively.

Do's:

• Use bullet points or numbers to break down information into manageable pieces.

• Ensure ample spacing between list items for clarity.

Don'ts:

• Avoid cluttered lists that pack too much information into a small space.

• Don't ignore the alignment of list markers and text; they should be visually coherent.

Type Colour

The colour of typography must be chosen with readability and brand consistency in mind, ensuring that text is both engaging and accessible.

Do's:

• Select colours with sufficient contrast against the background for legibility.

• Use brand colours strategically to reinforce brand identity and focus attention.

Don'ts:

• Don't use colours that clash with the overall design or reduce readability.

• Avoid relying solely on colour to convey information, considering users with colour vision deficiencies.