Typography

Typography involves the style and appearance of written language. It plays a crucial role in enhancing readability, establishing hierarchy, and setting a visual tone, resulting in more effective and expressive communication.

If you’re using the Salt Next theme please also refer to the listed typography guidance on the Themes page.

The current Salt theme uses the open-source, sans-serif typeface Open Sans. It’s the sole typeface for all text styles, with the exception of code which uses the mono space typeface, PT Mono.

Weight refers to the relative thickness of a font’s stroke. Each type style includes three weights which enable you to create visual hierarchy within the same text size.

Please note that in the Salt design system, 'Strong' indicates bolder weight than the default, whereas 'Small' represents a thinner weight, which may differ from traditional terminology where small represents side-comments and small print.

Type hierarchy arranges text elements by varying font sizes, weights, and styles. This guides the reader's attention and conveys content structure.

Display styles are primarily for representing key metrics and mastheads.

Headings separate sections of content into varying levels.

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.

Line height controls the space between baselines within a block of text and should be proportional to the text size, typically set at 1.3x the font size across all styles. Line height may also vary with text density.

There are three cases recommended within our content guidelines:

Sentence case is primarily used for body copy, page titles, navigation, subheadings, form titles, field labels, and chart/data visualization titles and text.

Title case should only be used for proper nouns and job titles. Proper nouns refer to specific individuals, companies, products, or objects.

All capitals are used for button labels to give them prominence and to differentiate them from other graphical elements. Never use all caps in general writing.

Italics are applied sparingly to short pieces of text to help differentiate text. They serve to differentiate text from the surrounding content and should be used independent of changing font weight.

Full sentences or blocks of text are generally not italicized. Combining italics with font weight for emphasis is not recommended.

Notation is a text style characterized by its discrete font size, making it ideal for use in confined spaces such as the Avatar and Badge components. This style is also well-suited for footnotes and disclaimers, ensuring that important but less prominent information is clearly communicated without overwhelming the main content.

We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.