Typography plays a crucial role in defining hierarchy within design. Variable weights convey different levels of importance, where bolder weights indicate greater significance. Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognisable when scanning the page.
Typeface
Prism uses the open-source typeface IBM Plex Sans, with system fonts used as a back-up.
Text styles and tokens
Prism contains text styles that are made up from font-size, font-weight, line-height tokens. Where text styles are used in Figma, the Prism Design Tokens package includes text style mixins and utility classes that match them.
Titles and Subtitles
Titles are words or phrases that are intended to introduce pages, sections, and subsections in the UI. The styles come in a range of sizes, and can be used in a range of contexts, such as providing a title to a page and subtitles to pieces of content to build page hierarchy to help users scan pages and content.
|
Figma text style |
Class & Mixin name |
Usage |
|---|---|---|
|
Title Xl |
pdt-title-xl |
Use for the main page heading |
|
Title Lg |
pdt-title-lg |
Use for sections on the page to build visual hierarchy |
|
Title Md |
pdt-title-md |
Use for sections on the page to build visual hierarchy |
|
Title Sm |
pdt-title-sm |
Use for sections on the page to build visual hierarchy |
Body styles
Use body text for main content. They typically appear after title and subtitles as content, descriptions and messages, but also as standalone text in components.
|
Figma text style |
Class & Mixin (CSS, SCSS and Less) |
Usage |
|---|---|---|
|
Body |
pdt-body |
Default style for form experiences and main content where a paragraph or multiple lines of text are used. |
|
Body Bold |
pdt-body-bold |
|
|
Body Sm |
pdt-body-sm |
Intended for secondary level content, such as descriptions after labels in form components or list-items. |
|
Body Sm Bold |
pdt-body-sm-bold |
|
|
Body Xs |
pdt-body-xs |
For tertiary level text such as fine print or metadata or in very small components. |
|
Body Xs Bold |
pdt-body-xs-bold |
|
Font weights
Font weight is an important typographic variable that can add emphasis and differentiate content hierarchy. It's important to create a balance between style and readability. We recommend only using the font weights suggested by Prism typography.
Title and Subtitles are regular font-weight by default and generally shouldn't be displayed in a different weight without specific reason.
There are specific styles for the Body Bold styles. This is because Prism uses the semibold | 600 font-weight for it’s bold styles, not bold | 700.
Underline
Underline is used only for text links (either default, hover or focus state, depending on the style of the link) and should never be used as a way to add emphasis.
Line lengths
Line length refers to the horizontal width occupied by a block of text. Shorter lines are usually more comfortable to the reader. As the line length increases, the user’s eye has to travel further from the end of one line to the beginning of the next, making it harder to track their progress vertically. Aim for an average line length of 50–90 characters, including spaces, or roughly 10-16 words.
This can vary based on font size and how it will be displayed. For example, line lengths need to be shorter when reading text on smaller devices. For this reason, it’s good practice to design for an ideal line length range, and use responsive design techniques to anticipate different contexts.
