Typography

Font

Font family

Pluralsight's font family for the web is a custom font called PS TT Commons.

We no longer use the Gotham font from typography.com. You should remove any remaining references to that. As we are transitioning, Gotham is still listed as a fallback font. Eventually it will be fully removed.

Internally, we are using a variable font to provide all weights programmatically. This should drastically reduce the number of network requests and overall page weight dedicated to fonts. IE 11 does not support variable fonts, and IE users will get the sans-serif fallback.

The @font-face declaration is included in the normalize stylesheet. Install with:

npm install @pluralsight/ps-design-system-normalize

Then include it in your global stylesheet:

@import '@pluralsight/ps-design-system-normalize';

CDN reference

The normalize stylesheet should be used in most cases. But if you need a direct reference to the font file, it is located at:

https://fonts.pluralsight.com/ps-tt-commons/v1/ps-tt-commons-variable-roman.woff2

Type variables

Font weight

It is recommended to use psTypeFontWeightDefault (400) & psTypeFontWeightStrong (600) for most text. Additionally there are 9 total weights available. Never use a font weight less than 400 on font sizes 18px or lower.

Example of using CSS vars to adjust font-weight:

@import "@pluralsight/ps-design-system-core";

.mySelector { font-weight: var(--ps-type-font-weight-600); }

Font size

Eight font sizes are available. Use psTypeFontSizeBase (16px) for the default font size.

Example of using CSS vars to adjust font-size:

@import '@pluralsight/ps-design-system-core';

.mySelector {
  font-size: var(--psTypeFontSize500);
}

Click to expand

Line height

Four line height increments are available. Each font size also has a default line height.

Example of using CSS vars to adjust line-height:

@import '@pluralsight/ps-design-system-core';

.mySelector {
  line-height: var(--ps-type-line-height-standard);
}

Click to expand

Letter spacing

Adjust the letter spacing (tracking) of an element. A general guideline, type larger than the base size (16px) should tighten, and type smaller than the base size should loosen to aid legibility.

Example of using CSS vars to adjust letter-spacing:

@import '@pluralsight/ps-design-system-core';

.mySelector {
  letter-spacing: var(--ps-type-letter-spacing-looser);
}

Click to expand

Monospace font

Pluralsight’s monospace font family for the web is DM Mono.

To use the DM Mono on your site, you can install it by importing it from Google fonts.

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap"
  rel="stylesheet"
/>

Click to expand