Our typography relies on the correct usage of text syntax which will help your designs and development to become more accessible by nature.
This page requires the use of our initial setup for the Pando library.
Pando uses the Pluralsight custom variable font called PS Commons for text and DM Mono for code blocks. Browsers that do not support variable fonts will use the system sans-serif fallback.
Our Heading text is based on the browser heading elements. Below you can see the recommended use case to keep the typography semantic and naturally accessbile.
All of our Headings have a weight of
600 and use
rem units for sizing. We will display the pixel equivalent here for easier translation.
Display headings are based on extending the Headline elements by combining the
black-heading class with the
display-<size>, available in
All other text elements that are not Headings are based on the browser text elements.
dl list styling.
For bulleted lists, use the
ul-list class as shown in the following example.
For codeblocks, use the
If you need to change the sizes of the code, you can add the
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.