More type styles
Here are some other frequently used type styles and their specs.
Page title
& summary
Most page templates display a title and a summary at the top of the page.
Specs
Inspect type styles in the Brand Styles in Figma
Image caption
Caption text is smaller than the default reading text and is meant for short captions or descriptions of visual elements. It can also be used for help text or other short uses.
Specs
Font size/paragraph spacing: Base1 (mobile), Base3 (desktop)
Line height: Base5 (mobile), Base7 (desktop)
Paragraph Spacing: Base-5 (mobile), Base-3 (desktop)
Text scales up/down in the standard formula outlined in the Typography section.
Inspect type styles in the brand styles in Figma
Lists (ordered & unordered)
Ordered and unordered lists should be available to content editors in the WYSIWYG. Ordered and unordered lists are set at a slightly smaller size than the default body copy.
Specs
Line spacing: 6px
Margin-left: ~15px
Space between bullet and text: same as content of parent
Font size: same as content of parent
Line height: same as content of parent
Text scales up/down in the standard formula outlined in the Typography section.
Inspect type styles in the Brand Styles in Figma
2 column text
The content editors may need a 2 column option available in the WYSIWYG. This will be used for pages that have a lot of content and smaller snippets that don’t need as much horizontal space.
Responsive sizing
On small screen sizes, the columns stack and span the full width of the container
Specs
Gutter: 24px gutter on desktop
2 column text should inherit its font size and style from its parent
Inspect type styles in the brand styles in Figma
Simple tables
Tables are used to organize and display information from a data set where data has multiple values that can be represented in columns. Labels are required for each column.
Interactions
Each column should be sized automatically to fit the content. The entire table should fit the width of the screen without needing any horizontal scrolling.
Responsive sizing
When the screen is too small to fit the content, adapt the table to the mobile version where each row has the column data displayed with the labels inside it.
Specs
There is a 16px margin between columns
Each row has 4px padding top and bottom, 8px left and right
Font: Body Copy Small
Border at the top and the bottom of the table rows is 1px solid Gray 20
Use zebra striping background colors Gray 5 and White
Text scales up/down in the standard formula outlined in the Typography section.
Inspect type styles in the brand styles in Figma
Change log
8/2/21 - Changing bullet text size and spacing specs to match the content around them, rather than:
Space between bullet and text: ~13px Font size: Base2 (mobile), Base4 (desktop) Line height: Base4 (mobile), Base6 (desktop)
Last updated