For our Typography Tokens refer to Typography in Tokens & Guidelines
Typography Usage & Best Practices
‣ Typography Styles
‣ Creating Visual Hierarchy with Typography
‣ Text Modifiers
‣ Typography Kits
‣ Typography in Tables
Typography Accessibility Standards
Typography serves as the backbone of any design system. It’s not just for page titles and copy; typography is everywhere, from navigation labels to buttons, captions, form fields, and more. It is essential for providing context, guiding users, and delivering the core content of an application.
Playbook’s typography plays a crucial role in shaping the user experience. As a design system primarily used for business software applications, we know that readability is vital for effortless navigation and easy comprehension. To achieve this Playbook uses a professional, unembellished san-serif front and prioritizes intuitive hierarchy in our typography styles.
When swapping out the default Playbook font, we recommend using a simple sans-serif font such as Proxima Nova or Arial.
Playbook offers 13 different text styles within four different text components. Each component is built for a specific purpose that helps ensure consistency of usage.
| Typography | Usage |
|---|---|
Title 1 |
Largest font size used for banners and covers on homepages. |
Title 1 Light |
Light alternative to default Title 1 |
Title 2 |
Secondary title size used for regular page titles |
Title 2 Light |
Less emphasis than Title 2, good for main callouts that are not the page’s title, ie. dashboard numbers. |
Title 3 |
An h3 title size |
Title 3 Light |
Light alternative to default Title 3 |
Title 4 |
Useful as a header 4 for subsection titles or emphasis in a table row |
Large Caption |
A larger caption style that can be used sparingly as a subsection title or large label. |
Body |
Default body text size, used for paragraphs and main text content. |
Caption |
Default caption styling, often used underneath a title for a singular phrase or sentence |
Subcaption |
A smaller caption style for information not key to the page’s function |
Detail Bold |
Used sparingly for emphasis on secondary information |
Detail |
Used for secondary information. Useful in information dense tables |
Some Playbook components such as our button and badge, use variations of our text styles with slightly different kerning or font sizes. Differentiating these components text styles give visual cues to the user that they are conveying different information.
Typography hierarchy plays a key role in guiding users through interfaces and ensuring important information is not overlooked. Using the following concepts, Playbook establishes a clear hierarchy to effectively guide the viewer's attention and create a seamless experience.
Weight
Case
Size
Position
Alignment
Example UI Using Clear Text Hierarchy
Incorporating these concepts into our typography components and styles ensures effective communication of content hierarchy and enhances overall usability.
Outside of the given typography styles above, there are many other ways to create different styles. These can involve adding a different style tag, adjusting font weights, and adding tabular number spacing.
While the Body kit supports using style tags within the kit, these tags can be used anywhere for custom cases.
| Style | Tag | Definition |
|---|---|---|
| Bold | <b> |
Bolds text |
| Strong | <strong> |
Bolds text |
| Link | <a> |
Changes to primary color to indicate text is clickable |
| Italicized | <i> |
Italicizes text |
| Emphasized | <em> |
Emphasis used on titles |
| Small | <small> |
Reduces font size |
| Underlined | <u> |
Underlines text |
Using font weights is crucial for typography and hierarchy because they play a significant role in establishing visual contrast and organizing information effectively. Playbook offers seven different font weights for various uses.
| Font Weight | Usage |
|---|---|
Font Thin |
Good as a light option for titles with lower hierarchy |
Font Regular |
Used for common body text content and general usage |
Font Bold |
Default bold value used for general emphasis, pairs well with a smaller font size to act as a caption |
Tabular number spacing, also known as monospacing, is a typographic feature where each digit occupies the same amount of horizontal space. This uniform spacing ensures that numbers align properly in columns, making it a particularly powerful format in data tables.
Ensuring readable numbers is so crucial for business operations that Playbook offers tabular number spacing as a global prop within the library. It’s recommended on any numeric values for display on any typographic style.
Playbook offers a range of ready-to-use typography layouts that prioritize displaying clear and concise information.
Designed to make the best use of the library’s typography options, layouts offered can be used for date and time formats, contact details, addresses, and label/value groupings.
Through strategic use of color, font size, and font weight, Playbook establishes strong informational and visual hierarchies, ensuring effective communication and enhanced readability.
When working with complex tables, the UI is susceptible to becoming information-dense and harder to read. Use the following best practices to create clear, readable tables.
Accessibility in typography is critical to ensuring inclusivity in usability, as text is such an integral part of any interface.
There is no perfect font for accessibility, so it is important to follow best practices.
Prioritizing the following within Playbook helps our design system be more accessible.
Incorporate these typography best practices to optimize readability and comprehension, ensuring that UI remains clear and accessible.
For more information on accessibility in typography review these resources.
https://accessibility.digital.gov/visual-design/typography/
https://designsystem.digital.gov/components/typography/
https://webaim.org/standards/wcag/checklist
