Typography
Our typographic system creates a content hierarchy that is scannable and efficient.
Principles
Speedy
Inclusive
Minimal
Font families
Product
For our product interfaces, we default to system fonts. See our font family design tokens for more information.
Brand
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 amount 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 | 28px | 28pt | 28sp | 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 currently 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
In 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 in-line, 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 | Bold | Small headings, usually an H3 |
Heading, md | 500 | Bold | PageHeaders, medium-headlines |
Heading, lg | 600 | Bold | Large headlines, usually an H1 |
Best practices
Accessibility
To ensure that all of our customers, including users with low-vision, 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, and should be used sparingly.
Use font sizes below 14px for body copy and UI controls, unless the text is very brief and secondary.
For SEO and users with screen readers, follow a logical hierarchy by using headings based on a numerical order, not on font size.
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 from font family to font family, keep line-heights to percentages or system defaults so that text doesn’t get cut off or lines get too-close together.
- Use system fonts and defaults to ensure broad language support
- Avoid ALL CAPS for special emphasis, as certain languages, like 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 text 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 ellipses or a link that indicates that there is more content available.
Truncating paragraph text, as that 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, paragraph blocks
iOS and Android Figma updates
Updates to mobile components that match Apple HIG and Android Material values for line-height.