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
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.
| Class | Specimen |
|---|---|
| .post-text-display | The quick brown fox |
| .post-text-h1 | The quick brown fox |
| .post-text-h2 | The quick brown fox |
| .post-text-h3 | The quick brown fox |
| .post-text-h4 | The quick brown fox |
| .post-text-body | The quick brown fox |
| .post-text-body-link | The quick brown fox |
| .post-text-caption | The quick brown fox |
| .post-text-small | The quick brown fox |
| .post-text-small-link | The quick brown fox |
| .post-text-button-l | |
| .post-text-button-s | |
| .post-text-tag | The quick brown fox |
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
- Each document's baseline grid is determined by its page size and the word count chosen. Type size and leading always correspond to, and align with, the baseline grid.
- Using one type size in a document is preferable. Where multiple sizes are needed, use as few as possible.
Setting text
- Text settings accommodate between 5 and 9 words per line, with page margins set at either 1/4 or 1/2 inch.
- More words per line makes the type smaller and more textual. Fewer words per line makes it bigger and more visual, like an advertisement or a typographic composition.
Size and leading
- Type is set flush — the leading equals the type size. Written with a slash between the two: 16/16, 24/24, 32/32.
- The exception is body text below 14 points, which requires an extra 2 points of leading: 12/14, 10/12, 8/10.
Determining type sizes
- Where multiple sizes are used the range should be multiples of each other, or at the very least conform to the same logic.
- Use the fewest type sizes possible while making sure each size is visually distinct from the others.
Tracking
- Body text, below 14 points, is set at +15.
- Headline text, 14 to 54 points, is set at 0 tracking.
- Larger than 72 points, or in graphic applications, tracking can go to −10 or tighter. The intention is to set the text as cleanly and generically as possible.
Justification
- Word spacing is set at 80 / 100 / 133.
- Letter spacing is set at 0 / 0 / 0.
Graphic type
- In applications like publication covers, where type acts like a graphic, the POST logotype appears at the same size as the type it accompanies.
- The logotype is always centred; the text is set flush-left, rag-right, in either sentence or title case.