Typography

A clear and well-considered typographic system is the base of high-quality design. Make content easier to scan and read establishing hierarchy.

Typography

Related content:


Principles

Readable

Text is not decoration, and its primary goal is to be read. While our typeface’s attributes determine the text’s legibility, its readability is related to how the type is arranged or set in the design. We have carefully crafted the type size, line height, line length, and color contrast to maximize readability.

Purposeful

Establishing hierarchy is one of the most vital principles of typography. It helps the reader scan, find content based on its importance, and determine where they are.

We don’t create or apply styles by their look but by their hierarchical role in the content context. We are sensible of the significant impact of the heading structure on accessibility.

Adaptable

Context is essential, and a rigid set of styles won’t cover all our audience’s needs. We have defined two sets based on that context:

  1. A productive scale for product, where we present lots of information in a reduced space, and people need to focus on doing tasks.
  2. Expressive scales for marketing, where we need a more dramatic impact to attract our target audience’s attention. These expressive scales might have subsets for different screen sizes, where the space is more compromised.

The latest expression of adaptive design is giving people control over how fonts are displayed. We use relative units to make the experience more accessible by honoring their preferences.


Hierarchy

Information and visual hierarchy

Information and visual hierarchy

A summary of our visual emphasis levels to provide a good visual hierarchy

A good visual hierarchy helps users scan essential information using properties like color, size, space, or alignment to organize and prioritize content.

Contrast

Contrast catches the eye, attracts attention, creates focal points, and helps establish the visual hierarchy, especially when there’s a lot of information. Overemphasizing elements can distract people and defeat that purpose. Use it wisely.

If everything looks important, then nothing is important.
—Patrick Lencioni

Size

Size and visual hierarchy

Size and visual hierarchy

Font size contrast creates a visual hierarchy. This example uses a 1.250—Major third—modular scale.

Size contrast is essential to creating a hierarchy. We compose sets using modular scales—a series of proportional values, where each is a factor of the others.

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
— Robert Bringhurst, The elements of typographic style

Weight

Bold text represents strong importance, seriousness, or urgency.

Generally, we should avoid emphasizing elements within the content using weight to prevent them from competing with other more critical elements in the content hierarchy, like headings and buttons.

Alternatively, we can use other ways of highlighting text by using a different font style (italic) or emphasizing/de-emphasizing using color.

⛔️ Don’t

⛔️ Don’t

Emphasize values using bold weight, as they’ll compete directly with headings and buttons.

✅ Do

✅ Do

De-emphasize labels using Secondary text color to guide the attention toward the values.

Color

Most of the elements will use the Primary text color. We can use color contrast to emphasize/de-emphasize elements, details, words, etc.

Line height & tracking

Line height and tracking will depend on the size, weight, and purpose—headings, body text, etc.

Alignment

Text alignment helps manage people’s attention and makes the text more readable.

We often use left alignment because it is more readable. Left alignment creates a clearer vertical baseline which helps in reading the text.

How we use text alignment:

  1. Left aligned: in most cases.
  2. Right aligned: for balance, compositional solution.
  3. Center aligned: very rarely. Mostly for headings.

Semantics and styles

Headings

We use headings to separate sections of content. When introducing an important concept, we usually introduce a heading to let people know the topic changes, which helps with readability, scannability, and accessibility.

They are always set in bold weight and come in different sizes to establish hierarchy and structure the content.

Heading kicker

A kicker is an introduction to a heading, making it easier to scan. It’s usually only a word or two in length, maybe slightly longer. It can also be used as a type of section heading, for example, in tables. It comes in uppercase to distinguish it from the rest of the headings.

Body text

Lead

The lead content is larger than the default and summarizes or emphasizes the most significant points. They are typically used only at the beginning of the content.

Default

The standard body size for content.

Caption

Captions are smaller than the default and are rarely used alone. They give descriptive details or metadata following a more significant element.

Following our Foundations first principle, we’ve decided to keep links underlined by default for usability and accessibility. Otherwise, link text must have at least 3:1 contrast with surrounding body text and present a non-color indicator (typically underline) on mouse hover and keyboard focus.

Acknowledgements

  1. Typography principles, by Obys agency.
  2. Link contrast checker, by WebAIM.