Typography

Product text styles

Wonderflow types styles are grouped into four categories: display, headings, tagline and body. Each category comes with a default set of variants, as well as a range of options that allow for flexibility within the user interface. By using a single scale for all variants our type styles can be applied seamlessly across all screen sizes, enabling a coherent and cohesive user experience.

Typefaces

We want our digital products to feel seamless and natural to users. That's why we use system fonts, which adapt to the operating system being used. This way, the typeface matches the look and feel of other native applications, helping our product blend in with the rest of the user's system.

Font family

Wonderflow’s font families are composed of two typefaces: sans-serif and mono. Each is designed for a specific function that is core to the Wonderflow brand.

monospace

Typographic scale

Our font-sizes are based on the Minor third scale with a base font size of 16px. Each size is multiplied or divided by 1.2 from the previous size, starting with the base size, and rounded to a multiple of 4px.

Font Weight

Font weights in typography can enhance the hierarchical structure and draw attention to important content on a surface. We recommend using Heavy, Bold, Medium, Regular and Light weights to support most use cases.

Text Color

Our default text colour is light-dimmed-color-7. You may adjust the text colours using the recommended colour tokens that correspond to pre-defined colour values. This ensures that the text remains easily readable and has appropriate contrast against different background colours.

Light backgrounds

When placing text on a light background, all type should use the following colour values:

Dark backgrounds

When placing text on a dark background, all type should use the following colour values:

Line Length

The readability of paragraphs can be influenced by the line length. It is recommended to have between 40 to 64 characters per line. This creates easy-to-read paragraphs with optimal readability.

Alignment

Our recommendation is to use left alignment when styling UI copy in left-to-right languages. This creates a more visually consistent design and enhances the reading experience by highlighting the content hierarchy.

When to center

While centering text may not always be the most effective approach for information design and legibility, it can be appropriate in certain contexts such as with an empty state, card or under an image if the amount of content is small.

Type styles

Our type styles are organised into three groups: Display, Heading and Body. They use one scale, allowing for easier application across a variety of screen sizes.

Display

Our type scale includes four display styles that are intended for editorial or marketing use. They work best on large screens.

Headings

Heading styles are used to establish hierarchy on a page by varying in size and weight. By combining different styles can differentiate content and help guide users through a page.

Body

Body text is available in three different sizes. Use body text for longer page content.

Responsive

Display and heading styles are responsive and will change size at different breakpoints. Heading-6, tagline-3 and body styles will remain the same size regardless of breakpoint.

Tokens

font-family

font-size

font-weight

letter-spacing

line-height

Resources

Check the resource page to download all the Wonderflow's assets.