Typography

Font family

New
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.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

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://s2.pluralsight.com/fonts/ps-tt-commons/v1/ps-tt-commons-variable-roman.woff

Domain-restricted access

The CDN reference used by the Normalize stylesheet is domain-restricted. In other words, only requests coming from enumerated domains will succeed. If you have a new domain that you require new font access on, please contact #platform-ui in Slack.

Font weight

Five Gotham SSm font weights are available for use.

Aa
BOLD (700)
JS: type.fontWeightBold
CSS: psTypeFontWeightBold
Aa
MEDIUM (500)
JS: type.fontWeightMedium
CSS: psTypeFontWeightMedium
Aa
BOOK (400)
JS: type.fontWeightBook
CSS: psTypeFontWeightBook
Aa
LIGHT (300)
JS: type.fontWeightLight
CSS: psTypeFontWeightLight
Aa
EXTRA LIGHT (200)
JS: type.fontWeightXLight
CSS: psTypeFontWeightXLight

To apply the font weights, use the vars in css:

@import "@pluralsight/ps-design-system-core";
.mySelector { font-weight: var(--psTypeFontWeightBold); }`}

Font size

Eight Gotham SSm font sizes are available.

The quick brown fox jumps over the lazy dog.
60px - Gigantic
psTypeFontSizeGigantic
The quick brown fox jumps over the lazy dog.
48px - Jumbo
psTypeFontSizeJumbo
The quick brown fox jumps over the lazy dog.
36px - XX-Large
psTypeFontSizeXXLarge
The quick brown fox jumps over the lazy dog.
30px - X-Large
psTypeFontSizeXLarge
The quick brown fox jumps over the lazy dog.
24px - Large
psTypeFontSizeLarge
The quick brown fox jumps over the lazy dog.
18px - Medium
psTypeFontSizeMedium
The quick brown fox jumps over the lazy dog.
14px - Small
psTypeFontSizeSmall
The quick brown fox jumps over the lazy dog.
12px - X-Small
psTypeFontSizeXSmall

To apply the font sizes, use the vars in css:

@import '@pluralsight/ps-design-system-core';
.mySelector {
font-size: var(--psTypeFontSizeLarge);
}

Line height

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

Lorem ipsum dolor sit amet, consectetur
40px - Huge
psTypeLineHeightHuge
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
32px - Extra
psTypeLineHeightExtra
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
24px - Standard
psTypeLineHeightStandard
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
20px - Tight
psTypeLineHeightTight
@import '@pluralsight/ps-design-system-core';
.mySelector {
line-height: var(--psTypeLineHeightStandard);
}

Monospace font

Pluralsight’s monospace font family for the web is Source Code Pro.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ × = >
® © $ € £ ¥ ¢ : ; , . *

To use the Source Code Pro on your site, you can install it by importing it from Google fonts.

<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500"
/>

Only one Source Code Pro font weight is available for use.

Aa
MEDIUM (500)

Use monospace font when presenting code. Refrain from using for any other purpose. When displaying code, try keeping the font size consistent at psTypeFontSizeSmall size whenever possible. Add consistent syntax highlighting.