POST Design System Using the system
Brand

Typography

The typeface of the POST identity is Neue Haas Grotesk Display 55 Roman.

Neue Haas Grotesk Display 56 Italic can be used in text settings where italics are required, but should never be used alone.

Neue Haas Grotesk Display 55 Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

The digital scale

These are the text styles that ship in the CSS. Each one is sized by a token, not a hard number, so a size lives in exactly one place and steps at the breakpoints on its own.

ClassSpecimen
.post-text-displayThe quick brown fox
.post-text-h1The quick brown fox
.post-text-h2The quick brown fox
.post-text-h3The quick brown fox
.post-text-h4The quick brown fox
.post-text-bodyThe quick brown fox
.post-text-body-linkThe quick brown fox
.post-text-captionThe quick brown fox
.post-text-smallThe quick brown fox
.post-text-small-linkThe quick brown fox
.post-text-button-lThe quick brown fox
.post-text-button-sThe quick brown fox
.post-text-tag

Print and layout preferences

These are the print and layout preferences from the brand guidelines. The digital type scale is derived from them but resolves differently on screen — see Typography in the Digital / UI system.

Baseline grid

Setting text

Size and leading

Determining type sizes

Tracking

Justification

Graphic type