Typography

Typeface

Graphik is our primary typeface. Whenever possible, use Graphik in all Chorus UI. Graphik is friendly, neutral, contemporary, and legible at a wide range of sizes and weights. Its low contrast and large x-height give the typeface great versatility, complementing our brands while projecting a modern editorial feel.

As a general rule, use the minimum number of typographic variations (differences in type size, color, and style) to create rhythm, harmony, and a sense of order and proportion in your designs. Resonance includes a base set of typographic styles and treatments to start from.

Type sizes

The Resonance Design System’s modular typographic scale is based on a 1.067 ratio (Minor Second). Each type size increases incrementally by 1.067em.

Color, contrast, and accessibility

Whenever text appears in an interface, it should meet universally accepted ratios for the amount of visible contrast. This includes placeholder text, text in navigation and dropdown menus, text on imagery, and captions. Text that is too small, too light in color, or too visually similar or different from a background color may be hard for some people to read and make your product more difficult to use. Small text needs more contrast than large text, so color contrast ratios are higher for small text.

When designing an interface, consider how a change in a background color might affect type contrast, and make appropriate adjustments to compensate for background values. Light type on dark or brightly colored backgrounds may also present contrast challenges.

According to WCAG, the minimum contrast ratio for legibility between text color and background color should be at least 4.5:1 (calculated based on luminance values) in regular size text and 3:1 in large text (18px and larger). A ratio of 7:1 is preferred. Use a tool such as Color Contrast Analyzer to verify if test has sufficient contrast.