Our typographic system creates a content hierarchy that is scannable and efficient.
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.
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.
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.
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 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)
Spacing after a paragraph in body copy should be 75% of the body copy font size.
Character spacing is set to system defaults across all devices and platforms
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.
Use center-aligned text for very short blocks of content, like text inside of buttons or tabs.
End-align integers in tables so that they are easy to compare.
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:
Underline links when shown inline, inside of a text block or line of text.
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.
Form fields, metadata, secondary info
Tables, internal tools, and body copy for dense business interfaces
Default body copy for multi-line, paragraph text
Small headings, usually an H3
Large headlines, usually an H1
Text wrapping and truncation
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.