Typography guidelines

Our typographic system creates a content hierarchy that is scannable and efficient.

Principles

Speedy

Native system font families are used so that products load quickly and can be read efficiently across all devices.

Inclusive

We stick to standard line-spacing defaults or percentages to ensure text can be read regardless of a user’s preferred language or font size.

Minimal

Gestalt uses a limited number of weights and sizes to keep our interfaces focused on our customers’ rich content.

Typography components

We have several React components that use typography as the primary element.

Font families

Product

For our product interfaces, we default to system fonts. See our font family design tokens for more information.

Brand

Our custom typeface, Pinterest Sans, can be used occasionally for branded graphics in our products, but never for UI. For more info, consult our brand guidelines.

Scale

Font sizes

In order to keep our content hierarchy clean and simple, we have a limited number of font sizes. These should cover all current use cases for minimal product UI, where our customers’ content is the primary focus of a surface or page.

Font sizes
Size
Web value
iOS value
Android value
Example
100
12px
12pt
12sp
Gestalt
200
14px
14pt
14sp
means
300
16px
16pt
16sp
whole
400
20px
20pt
20sp
and so
500
28px
28pt
28sp
are
600
36px
36pt
36sp
you

Line length

For long-form, multi-line paragraphs set at our default font size, use a maximum width of 664 to allow for a max of about 90 characters. Otherwise, it can get hard for users to scan and read text.

Spacing

Line height

Proper line spacing line height (or leading) is important for readability. If lines of text get too close together, it can be hard to read them; if they are too far apart it can make it difficult to sense a clear hierarchy and group related text blocks. Given that we use system fonts, we rely on percentages on web and system defaults on mobile to ensure blocks are text are still readable for internationalization and dynamic sizing.

Web

We use browser defaults on web UIs so that lines of text are readable in all languages and scripts. For example, scripts like Hindi have larger ascenders and descenders than Latin scripts. Setting a fixed line height can make scripts like Hindi hard to read.

Latin script in Chrome with line-height set to “normal”, which is about 120% of font size.
Myanmar script in Chrome with line-height set to “normal”, which is about 200% of font size.

iOS

iOS leading is automatically determined by a font’s size. Below is a breakdown based on Gestalt’s current font sizes. For more info, refer to Apple’s Human Interface Guidelines.

Font weight treatments
Font size (pt)
Leading
12
16
16
21
20
25
28
34
36
43

Android

Line height is automatically determined by a font’s size. For more info, refer to Material Design.

Paragraph spacing

Spacing after a paragraph in body copy should be 75% of the body copy font size.

Character spacing

Character spacing is set to system defaults across all devices and platforms

Alignment

Default

Start-aligned

Our default alignment is start-aligned. There are a couple of reasons to default to start-aligned text:

  • Users tend to read in “F” patterns, so placing text in a similar pattern helps with users absorbing all the information they need for a good experience.
  • Since the starting edge of centered text moves around, it’s harder for users to read; this can be especially difficult for people with dyslexia.

Exceptions

Centered

Use center-aligned text for very short blocks of content, like text inside of buttons or tabs.

End-aligned

End-align integers in tables so that they are easy to compare.

Formatting

Font weight

On Pinner surfaces, the main focus is a user’s visual content. On business surfaces, visuals are supported by denser text content and data visualization. Therefore, typographic weight shouldn’t be so heavy that it causes visual noise, nor should it be too light to read. Use the following guidelines for choosing font weight:

Font weight treatments
Use case
Web weight
iOS weight
Android weight
Example
Body copy
Regular
Regular
Regular
This is text in a tooltip
Emphasis for inline text
Semibold
Semibold
Medium
Figma is not a design system
Standalone links
Semibold
Semibold
Medium
Headlines
Semibold
Semibold
Medium
Page title

Text decoration

Underline links when shown inline, inside of a text block or line of text.

This is a paragraph with a link inside of it. Remember, the whole is different from the sum of its parts.

Hierarchy

Font size and weight, along with line height, spacing, and width allow us to create a scannable and readable hierarchy that guides a user through a product experience.

Typographic hierarchy
Role
Size
Weight
Context
Help text
100
Regular
Form fields, metadata, secondary info
Body, dense
200
Regular
Tables, internal tools, and body copy for dense business interfaces
Body, default
300
Regular
Default body copy for multi-line, paragraph text
Heading, sm
400
Semibold
Small headings, usually an H3
Heading, md
500
Semibold
PageHeaders, medium-headlines
Heading, lg
600
Semibold
Large headlines, usually an H1

Best practices

Accessibility

Do

Use a font size of 14–16px and above for most use cases, especially long-form text. Smaller fonts are ok for less important information, but should be used sparingly. This ensures that content is accessible to all of our customers, including users with low vision.

Don't

Use font sizes below 14px for body copy and UI controls, unless the text is very brief and secondary.

Do

Follow a logical hierarchy by using headings based on a numerical order, not on font size. This makes our content more accessible for SEO and screen readers.

Don't

Use headings in an illogical order, since this will confuse screen readers. For example, don’t start a section with an H2 or H3, and place an H1 further down in the hierarchy.

Do

Stick to our design tokens and use color combinations with a 4.5:1 contrast ratio between foreground and background.

Don't

Use text that doesn’t pass 4.5:1 contrast ratio when testing with Figma accessibility plugins.

Localization

Do

Use standards that will make it easier to translate to other languages:

  • Since character heights vary between font families, keep line heights to percentages or system defaults so that text isn’t cut off and lines aren’t too close together.
  • Use system fonts and defaults to ensure broad language support.
  • Avoid ALL CAPS for special emphasis. Certain languages, such as Arabic, do not support it.
Don't

Set line height to specific sizes, use fonts that don’t have broad language support, or use ALL CAPS.

Style

Do

Align, space and style text so that a user can easily read it and understand what actions to take.

Don't

Center-align text with tight leading and underlined text that can be mistaken for links while using colors that are too light to read.

Text wrapping and truncation

Do

Wrap text to multiple lines when a user needs to see the full text to understand what is expected. This is likely to happen when translated to languages with longer line lengths.

Don't

Truncate text in UI controls like buttons and menus where it can make it hard for a user to understand what is expected. On touch surfaces, a user won’t have a tooltip on hover.

Do

Truncate for secondary text that isn’t essential to a user’s comprehension of steps to take. Examples include dynamic data ad IDs in tables, lists of user names, and Pin titles that come from outside sources. Use an ellipsis or a link that indicates there is more content available.

Don't

Truncate paragraph text, which can be misread and change the original meaning of the text.

Future updates

Our guidelines and components primarily cover user interface use cases for typography. We will improve upon this by adding guidelines and components for long-form text in the future.

Long-form text components and guidelines
Components and guidelines for long-form text that will include better line height and line length for headings and paragraph blocks.

iOS and Android Figma updates
Updates to mobile components that match Apple HIG and Android Material values for line height.