Typography
Typography can enhance readability, establish hierarchy and set a visual tone, resulting in more effective communication.
The design system uses the open-source, sans-serif typeface, Open Sans.
Use PT Mono to represent code snippets only and not in any other context. PT Mono is a monospace typeface that displays all characters within the same width.
Display styles are primarily for representing key metrics and mastheads.
Headings provide varying levels of typographic hierarchy.
Body is the default style for most components and text blocks.
Labels display a small amount of text that helps people understand the current context of a component.
Help text provides additional information or instructions, such as accepted data formats for input or file types for upload.
The code text style displays code in a clear format.
Legibility and accessibility are key considerations within the design system. With this in mind, each mode provides two color options: primary and secondary. Both options are selected from the neutral palette. These colors are applied consistently throughout the design system.
| Token | Figma | Light mode | Dark mode |
|---|---|---|---|
--salt-content-primary-foreground | Content/Primary/Foreground | color-gray-900 | color-white |
--salt-content-secondary-foreground | Content/Secondary/Foreground | color-gray-200 | color-gray-70 |
Use the primary text color by default. It should comprise the majority of text within any composition. It provides the greatest level of contrast between foreground and background.
You should use secondary text sparingly for supporting text, or for contrast between labels and data.
Form field labels use secondary text to give greater prominence to the entered value.
Use secondary text for labels to ensure data has greater prominence without the need for differing weights or font sizes.
Use primary and secondary text colors and/or weight variants to create visual hierarchy.
Don’t use colors, other than the primary and secondary options, to emphasize headings, labels, alerts or blocks of text.
All text within the design system meets the Web Content Accessibility Guidelines (WCAG) 2.0 level AA requirements to ensure legibility.
WCAG 2.0 requires that the contrast ratio between text and background is at least 4.5:1 for normal-sized text and 3:1 for larger text.
Use color and iconography with text to help convey additional meaning.
Don’t use color alone to infer meaning. Color-blind and low-vision users may not perceive the difference, and screen readers do not announce colors to non-sighted readers.
As with most aspects of the design system, type conforms to density. Each style grows proportionately to align with the elements. Line height and the spaces between blocks also adhere to density.
Line height controls the space between baselines within a text. The height of a line of text is proportional to the text size.
Line height is set to a multiple of the font size to scale consistently across all styles, weights and densities. The multiple is set to 1.3x. This balances the need for moderate information density with the need to create enough visual separation between lines of text to enable efficient line tracking when reading blocks of text.
Weight refers to the relative thickness of a font’s stroke. Each style includes three weights, enabling you to emphasize or de-emphasize the default style to help create visual hierarchy.
Small offers a subtler option, providing a lighter weight for each type style. Small de-emphasizes secondary text, such as footnotes or supporting instructions.
By default, all text within the block would use the same emphasis.
The strong weight allows you to emphasize each font style. This can help guide a reader to note specific words or phrases. Alternatively, it can allow greater focus on an entire header or block of text to establish a visual hierarchy.
Type alignment controls how text aligns in the space. There are four types of alignment: left, right, centered and justified.
Text aligned to the left is the default configuration for left-to-right languages, such as English.
Right align text for right-to-left languages, such as Arabic or Hebrew. It should also be used for Numeric values (including dates, times, and currency) for comparisons within a data set, for instance within a data grid column. If a numeric value is displayed in isolation, and therefore not for comparison, it should be left aligned to fit the content.
Right-align short amounts of text, such as a supporting detail, side note or annotation.
Right-align numerical values and corresponding headers within data grid columns.
You should only center-align short sentences or blocks of text included as typographic elements, such as a pull quote or key metric. Avoid center-aligning large blocks of text or headings. Longer text forces readers to make additional eye movements on both sides of the text, resulting in unnecessary eye fatigue and lower reading accuracy.
The use of justified text is not encouraged, but if required for a more formal aesthetic or to align for print materials, consider enabling hyphenation to balance negative space and avoid large gaps between words.
When including paragraphs of text within a design, the layout should accommodate the intended reader. Shorter line lengths are typically more comfortable for most readers and scenarios. With longer line lengths, a reader's eyes have to travel further from the end of one line to the start of the next. This can make it hard to track progress and can cause fatigue (Baymard Institute, 2022).
Research and accessibility guidelines recommend a line length of between 60–80 characters per line (CPL).
Shorter line lengths can improve the user’s focus and understanding of the text. Too narrow, and the eye must travel back too often, breaking the reader’s rhythm. This tends to cause stress for readers, making them begin the next line before finishing the current, causing them to skip important words.
You should ensure the absolute minimum width of a text is no less than 45 CPL.
Longer lines can be better when the user is more likely to scan the information and accuracy is less important. If a line is too long, a reader’s eyes will have a tougher time focusing on the text. Because the line length makes it hard to judge where the line starts and ends, it can be difficult to continue to the correct line in large blocks of text.
We recommend that no block of text exceeds 100 CPL.
Within the design system, the columns defined in “layouts” have been designed to accommodate these recommendations across all densities.
There are three cases recommended within our content guidelines: sentence case, title case and all capitals.
Use sentence case in most instances—for body copy, page titles, navigation, subheadings, form titles, field labels, and chart/data visualization titles and text.
The only words you should capitalize or put in title case are proper nouns and job titles. A proper noun is a specific individual, company, product or object.
Use all caps for button labels to give them prominence and to differentiate them from other graphical elements. Never use all caps in general writing.
When referring to a button in written content, never use all caps. Instead, capitalize the button label and apply emphasis using font weight.
Italics primarily help differentiate text, such as labels within an input.
- You should use italics sparingly and to highlight a specific word or short phrase.
- Use quotation marks instead for publication names, the introduction of new terms, etc.
- Don't italicize full sentences or blocks of text unless including help text with an input or selectable element, such as a radio button group.
- Don’t use italics and font weight together to emphasize a word—use font weight alone to emphasize a word, use italics simply to differentiate it from the rest of the text.
The Salt foundations are still in progress, and we'd appreciate your thoughts and feedback. Please contact us if you have any comments or questions.