Typography

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

The Rivendell design system uses WeWork's two core brand typefaces; 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 (<strong>) copy.
    • Aperçu-Bold is used for headers.
  • Only use italic if absolutely necessary.

Breakpoints

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.

results matching ""

    No results matching ""