Typography

Overview

Typography covers everything you need to know to set type successfully in MongoDB products.

Font styles for product

MongoDB Value Serif

MongoDB Value Serif is a font used in the logo, and is primarily used for headers — in particular, H1’s and H2’s.

Euclid Circular A

Euclid Circular A is our body font. This font will be the most frequently used across our products.

Source Code Pro

Source Code Pro is used for displaying code snippets, and other values in our products.

The foundation of our typographic system is a 4px baseline grid, which you should use to align typography along with any UI element. (Vertically centered elements inside buttons, or rows, are exceptions and don't need to align to the 4px grid.) Learn how to setup this grid in Figma, or learn more how to use a baseline grid here.

Small numbers and units

In cases where small numbers (under 13px) and units associated with them are used, especially in bold, use Source Code Pro instead of Euclid Circular A. Avoid using Source Code Pro in the context of sentences and paragraphs, since this can create a disjointed reading experience.

This is particularly common in data visualizations and displays, as shown in the example below.

Links

Inline and external link

The most common usage of a link is inline within body copy. When this is the case, use the font color #016BF8 (Base Blue). If the link opens in a new tab/window use a “new tab/window” icon to indicate that the link opens somewhere new. If the link redirects on the same page the user is on there is no need to append the icon.

Link with arrow

Arrow link can be used to give users an extra visual queue, especially when supporting a description text above. Do not use the arrow link inline in mid sentence — only after a line-break. If the link is opens in a new tab or window, then use the “open in new tab” icon instead of the arrow.

Note: Do not use this arrow on long lists of links.

Link within banners

Links within banners are styled according to the banner color and are underlined to make the link more visible. For a list of banner link colors please visit our banner guidelines.

Accessibility Requirements

When working with type, make sure that your copy passes accessibility constraints. You can check this by installing Stark, a contrast checker plugin for Figma.

Remember the 4.5:1 contrast rule. If the contrast between the color of your text and its background is 4.5:1 or higher it’s accessible; if it’s lower it’s not. For more contrast constraints consult our palette guidelines or accessibility guidelines.