Typography

Overview

Typography serves as the foundation for tone, voice, and content. Given that the majority of FDS’ visual design comprises text, achieving the right balance in typography is a key factor in enhancing the overall usability of online products.

FDS’ typography aims to optimize legibility, organize information, and clearly communicate concepts to establish hierarchy and guide users through a product or experience. A successful hierarchy employs a concise set of size and weight combinations to create focal points and outline the content of a page in an easily scannable structure.

Type Stack

We are using two different font stacks for FDS. Inter is used for all normal text content, while Jetbrains Mono is only used for numerical values.

Download fonts

Type Styles & Scales

There are three main styles distributed throughout the interface that help convey the content; heading, body, labels (and semantics).

Guidelines

Legibility

Hierarchy

FDS provides for a baseline of text styles for creating effective hierarchy within your layouts and component designs. In FDS typographic styles are grouped into three; body, heading, and semantic.

Line height

Providing an adequate amount of space between lines is critical to the legibility of text. FDS defines optimal line heights within all heading, body and semantic usages.

Line length

Wide lines of text are difficult to read and make it harder for people to focus. While there is no right way to measure the perfect width for text, a good goal is to aim for between 60 and 100 characters per line including spacing. Setting an optimal line length will break up content into easily digestible information.

Format

Alignment

Alignment controls how the text aligns in the space it appears. The type of alignment should be chosen based on the context around the data. There are three type alignments:

• Left-aligned:
  By default, the text is left-aligned. Left-aligned text is the most common setting for Latin languages and also the natural reading direction.
• Right-aligned:
  In FDS, right alignment is not recommended except for the styles that are used to represent amounts. Using the right-aligned numerical values is an established accounting practice that provides better readability and supports mathematically inherited reading habits.
• Centered:
  Centered text is best used to distinguish short typographic elements within a layout, generally, it's not recommended and should be used sparingly.

Strong

Used to provide strong emphasis or to create a visual hierarchy between the typographic elements. The styles which require strong emphasis are defined within the library.

Underline

Underline styles are exclusively for when text links on hover state. Don’t use underline for things like adding emphasis to the text within the body copy.

Subdued

The subdued style lets you de-emphasize content, and you can use it across all font sizes. Mostly it should be used in contrast to other un-subdued text, vs. on its own. However, you can use Subdued with standalone text that’s non-actionable or less important.

Color

Type color should be carefully considered, with legibility and accessibility as paramount concerns. Keep type color neutral in running text (gray-90). Use the related product color from the primary palette for primary actions. When texts are used in interactive elements, follow the colors guideline for applying color changes on the states.