Typography
Typography refers to the predefined typographic styles that guide the presentation of written language. Typography is essential for improving readability, creating a clear hierarchy, and establishing a visual tone, all of which contribute to more effective and expressive communication. Each text style in Salt includes a font family, font size, line height and font weight. The specific values for each is dependent on the applied theme.
The typography foundation offers two font families for UI design: Open Sans and Amplitude, along with PT Mono for code blocks.
Font families are used differently by each theme. For more information about the themes offered in Salt, please refer to theme guidance.
Each theme uses font families differently:
-
J.P. Morgan
- Amplitude - editorial, eyebrow, heading, display and action styles
- Open Sans - body, label and notation styles
-
Legacy (UITK)
- Open Sans - all typographic styles
To download the Amplitude font, please refer to the font brand resources (Internal users only).
Salt offers a series of text styles designed to create a visual hierarchy through typographic design. Each text style is dependent on the applied theme. By effectively utilizing Salt's styles, you can guide the reader's focus and clearly convey the content's structure.
The typographic hierarchy has nine levels, with variants within some levels:
| Text style | Purpose |
|---|---|
| Editorial | Editorial1 to Editorial6. Editorial styles are the largest text styles, intended for expressive headlines in mastheads, hero banners and other editorial content. Editorial5 and Editorial6 match the font sizes of Display1 and Display2. |
| Display | Display1 to Display4. Display styles are intended for showcasing key metrics or highlighting prominent messaging within a masthead. |
| Heading | H1 to H4. Headings are used to divide content into a clear hierarchy and adhere to HTML standards. |
| Eyebrow | Eyebrow is a short line of text placed above a heading to introduce its topic or category. |
| Body | Body 1 is the default style for most components and textual content. If no specific style is applied, the text will default to Body 1. Body 2 is a larger variant, intended for introductory paragraphs and editorial content. |
| Action | Reserved for actionable items such as buttons. |
| Label | Label 1 provides clear and concise style for form fields and data grid headings, ensuring users can easily understand and interact with various interface elements. Label 2 is a larger variant for when labels need more prominence. |
| Notation | Notation provides a small font size, ideal for compact components, footnotes, and disclaimers. It ensures important but less prominent information is clearly communicated without overshadowing the main content. |
| Code | Reserved for representing code examples. |
Use the preview settings to see each text style in a different theme, density or mode.
- Editorial1
- Editorial2
- Editorial3
- Editorial4
- Editorial5
- Editorial6
- Display1
- Display2
- Display3
- Display4
- H1
- H2
- H3
- H4
- Eyebrow
- Body2
- Body1
- Action
- Label2
- Label1
- Notation
Code
Font size is determined by the selected text style and the density. Density influences how much content fits on a screen by adjusting the size and spacing of components. As density changes, font size adjusts accordingly to maintain proportionate and harmonious design elements.
Line height controls the space between baselines in a block of text and is proportional to the text size. For most styles, it's set to 1.3 times the font size. Editorial styles use a line height equal to the font size, and Body 2 uses 1.6 times the font size. Line height is influenced by the selected density.
Font weight refers to the relative thickness of a font's stroke. Each text style in Salt offers three different weights, allowing you to establish a visual hierarchy even when using the same text style. The specific font weight is dependent on the text style and theme being used. Each text style has a default weight which can be made ‘lighter’ to de-emphasize the text or ‘bolder’ to emphasize it. Some styles don't use every weight. For example, eyebrow text can be lighter but not bolder, editorial text in the J.P. Morgan theme always uses a light weight, and code text always uses a regular weight. In these cases, the unused weights match the default weight.
In code, use the fontWeight prop on Text: lighter applies the lighter weight and bolder applies the bolder weight. In CSS, use the -fontWeight-lighter and -fontWeight-bolder tokens of the text style, for example --salt-text-fontWeight-lighter and --salt-text-heading-fontWeight-bolder.
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.