These guidelines explain what typographic styles to use and when.
Things to Note
- Never end a header or label with a period (.)
- Only use a period (.) for sentences, paragraphs and copy.
- Avoid use of all caps wherever possible.
Knockout and Aperçu
- Knockout only uses one weight (Knockout No. 48 Featherweight).
- Knockout is used sparingly, only for prominent headers.
- Aperçu is used for all other headers and copy.
- Aperçu can be used in three weights (Light, Medium and Bold).
- Aperçu-Light is used for all copy.
- Aperçu-Medium is for bold (
- Aperçu-Bold is used for headers.
- Only use italic if absolutely necessary.
As explained in the responsive & breakpoints section, there are three breakpoints in the system. The text styles are only affected by two of them. The code below is all presented mobile-first. The code in the right column shows the full extent of the CSS for each text style, at breakpoint 2 (bp2), which is essentially mobile and tablet portrait. The CSS in the left column shows only what changes on desktop and breakpoint 1 (bp1), which are essentially desktop view down to tablet landscape.