Typography

Font

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://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.

Aa
Default (400)
JS: type.fontWeightDefault
CSS: psTypeFontWeightDefault
Aa
Strong (600)
JS: type.fontWeightStrong
CSS: psTypeFontWeightStrong
Aa
900
JS: type.fontWeight900
CSS: psTypeFontWeight900
Aa
800
JS: type.fontWeight800
CSS: psTypeFontWeight800
Aa
700
JS: type.fontWeight700
CSS: psTypeFontWeight700
Aa
600
JS: type.fontWeight600
CSS: psTypeFontWeight600
Aa
500
JS: type.fontWeight500
CSS: psTypeFontWeight500
Aa
400
JS: type.fontWeight400
CSS: psTypeFontWeight400
Aa
300
JS: type.fontWeight300
CSS: psTypeFontWeight300
Aa
200
JS: type.fontWeight200
CSS: psTypeFontWeight200
Aa
100
JS: type.fontWeight100
CSS: psTypeFontWeight100

Example of using CSS vars to adjust font-weight:

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

Font size

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

The quick brown fox jumps over the lazy dog.
base (16px)
CSS: psTypeFontSizeBase
JS: type.fontSizeBase
The quick brown fox jumps over the lazy dog.
900 (40px)
CSS: psTypeFontSize900
JS: type.fontSize900
The quick brown fox jumps over the lazy dog.
800 (34px)
CSS: psTypeFontSize800
JS: type.fontSize800
The quick brown fox jumps over the lazy dog.
700 (28px)
CSS: psTypeFontSize700
JS: type.fontSize700
The quick brown fox jumps over the lazy dog.
600 (24px)
CSS: psTypeFontSize600
JS: type.fontSize600
The quick brown fox jumps over the lazy dog.
500 (20px)
CSS: psTypeFontSize500
JS: type.fontSize500
The quick brown fox jumps over the lazy dog.
400 (18px)
CSS: psTypeFontSize400
JS: type.fontSize400
The quick brown fox jumps over the lazy dog.
300 (16px)
CSS: psTypeFontSize300
JS: type.fontSize300
The quick brown fox jumps over the lazy dog.
200 (14px)
CSS: psTypeFontSize200
JS: type.fontSize200
The quick brown fox jumps over the lazy dog.
100 (12px)
CSS: psTypeFontSize100
JS: type.fontSize100

Example of using CSS vars to adjust font-size:

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

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

Example of using CSS vars to adjust line-height:

@import '@pluralsight/ps-design-system-core';
.mySelector {
line-height: var(--psTypeLineHeightStandard);
}

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.

Antidisestablishmentarianism
Tighter (-0.025em)
CSS: psTypeLetterSpacingTighter
JS: type.letterSpacingTighter
Antidisestablishmentarianism
Tight (-0.01em)
CSS: psTypeLetterSpacingTight
JS: type.letterSpacingTight
Antidisestablishmentarianism
None (0)
CSS: psTypeLetterSpacingNone
JS: type.letterSpacingNone
Antidisestablishmentarianism
Loose (0.01em)
CSS: psTypeLetterSpacingLoose
JS: type.letterSpacingLoose
Antidisestablishmentarianism
Looser (0.025em)
CSS: psTypeLetterSpacingLooser
JS: type.letterSpacingLooser
Antidisestablishmentarianism
All Caps (0.08em)
CSS: psTypeLetterSpacingAllCaps
JS: type.letterSpacingAllCaps

Example of using CSS vars to adjust letter-spacing:

@import '@pluralsight/ps-design-system-core';
.mySelector {
letter-spacing: var(--psTypeLetterSpacingNone);
}

Monospace font

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

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 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:[email protected];500&display=swap"
rel="stylesheet"
/>