Typography guidelines
Our typographic system creates a content hierarchy that is scannable and efficient.
Principles
Speedy
Inclusive
Minimal
Typography components
We have several React components that use typography as the primary element.
- Text: Used for all text on a surface.
- Heading: Used for semantic headings on a surface.
- Link: For both inline and standalone hyperlinks.
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.
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.
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 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:
Text decoration
Underline links when shown inline, inside of a text block or line of text.
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.
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
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.
Use font sizes below 14px for body copy and UI controls, unless the text is very brief and secondary.
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.
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.
Stick to our design tokens and use color combinations with a 4.5:1 contrast ratio between foreground and background.
Use text that doesn’t pass 4.5:1 contrast ratio when testing with Figma accessibility plugins.
Localization
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.
Set line height to specific sizes, use fonts that don’t have broad language support, or use ALL CAPS.
Style
Align, space and style text so that a user can easily read it and understand what actions to take.
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
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.
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.
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.
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.