Skip to content
Pando Docs

Typography

Our system of fonts, spacing, and specifications that help convey visual hierarchy throughout content.

Font stack

PS TT Commons

Used for all text styles throughout the entire user interface, except code samples.

DM Mono

Used only for code samples and code syntax.

Download fonts here

Usage

Pando typography relies on the correct usage of text syntax which will help your designs and development accessible by nature.

Headings

Heading text is based on the HTML heading elements

(style name - font-weight font-size/line-height)

heading 1 - DemiBold 40/110 Use for top-level page headings and titles only. There should only be one of these per page. token usage: PandoTextStylesHeading4xl
heading 2 - DemiBold 32/125 Section headings. Use to delineate larger sections of a pageXOffset, similar to a high-level table of contents. token usage: PandoTextStylesHeading3xl
heading 3 - DemiBold 24/125 Nested or sidebar section titles token usage: PandoTextStylesHeading2xl
heading 4 - DemiBold 18/125 Nested or sidebar section headings token usage: PandoTextStylesHeadingLg
heading 5 - DemiBold 16/150 In-content titles or headings token usage: PandoTextStylesHeadingMd
heading 6 - DemiBold 14/150 Small titles for use in small sections (e.g. cards or small modules) token usage: PandoTextStylesHeadingSm

Display Headings

Use display headings for large marketing or promotion-related graphics and banners.

display large

Token name: PandoTextStylesDisplayLg

display medium

Token name: PandoTextStylesDisplayMd

display small

Token name: PandoTextStylesDisplaySm

Non-heading text

All non-heading text is based on HTML elements for the utmost accessibility. Use underline styles for linked text only.

(Style name - font-weight font-size/line-height)

xs - Medium 12/150%

Token name: PandoTextStylesBodyXs

Use as the smallest UI text, mostly for copyright or boilerplate copy that is not critical to the user flow.

sm - Medium 14/150%

Token name: PandoTextStylesBodySm

Use for user flow text that is less is less important, or in smaller components and tighter spaces

DEFAULT

md - Medium 16/150%

Token name: PandoTextStylesBodyMd

The default font-size, use as a default UI copy size for all UI use cases.

lg - Medium 18/150%

Token name: PandoTextStylesBodyLg

TBD

xl - Medium 20/150%

Token name: PandoTextStylesBodyXl

TBD

2xl - Medium 24/150%

Token name: PandoTextStylesBody2xl

TBD

Lists

We support ul, ol, and dl list styling.

Code Blocks

For codeblocks, use the code, kbd, or samp tags.

If you need to change the sized of the code, you can use the code tokens.

  • PandoTextStylesCodeXs
  • PandoTextStylesCodeSm
  • PandoTextStylesCodeMd
  • PandoTextStylesCodeLg

Color

Use only text styles or variables for text colors, as labeled in the Pando Colors library.

View the Color Section for more information, descriptions, and examples of the different sentiments and colors.

Measure & alignment

Line-length

Wrapping text for a more accessible and readable user experience. Base the line-length on the font-size, and adjust responsively.

Example

Wide lines of text can be difficult for people to read, and require
increased focus. While there is no way to measure a perfect line length
for everyone, a general rule of 60-100 characters is often cited as a
best practice.

When designing, this should be taken into consideration according to font
size and responsive layout. Users may change the width and size of their
viewports, as well as their font size, thereby altering the perceived
line length.

Alignment

By default, all text should align to the leading edge of its container. Do not justify text as this is not considered a best practice for text displayed in a web browser.

Exceptions to leading-edge alignment

  • Center align: Buttons, Badges, TypeFlags, or interactive triggers (i.e. Tabs)

  • Trailing edge align:

    Table cells containing numbers, definition list definitions/values, any stacked incrementing numbers

Spacing

Spacing between headings and normal text should be set to 50% of the font-size of the heading.

Understanding WCAG (3xl)

‘3xl’ or 30px has 15px of bottom margin

Understanding WCAG (18px)

‘lg’ or 18px has 9px of bottom margin

Understanding WCAG (16px)

‘md’ or 16px has 8px of bottom margin

Sizing, spacing, and aligning icons to text

Icons should be aligned vertically centered to text, spaced apart by 50% of the font-size, and sized to 110% of font size.

Medium 16px text with an icon

Large 18px text with an icon

2xl 24px text with an icon