Text Styles

There are 10 text styles in the Rivendell design system.

  • 2 large format header styles using the Knockout typeface.
  • 4 regular header styles using the Aperçu typeface.
  • 4 text styles for copy.

Text Styleguides

Each text style (below) covers typeface, weight, size, line-height and letter-spacing specifications. And also guidelines for when to use each style.


Impact 1

  • Used sparingly — for impact statements, or to stand-off an image, in $white.
  • Can standalone, or be paired with Copy 1.

Impact 1

CSS: Impact 1

/* bp3 & bp2 */
font-family: Knockout; /* Knockout No. 48 Featherweight */
font-size: 60px;
line-height: 50px;
letter-spacing: 1px;
margin-bottom: 10px;
text-transform: uppercase;

/* desktop & bp1 */
font-size: 120px;
line-height: 100px;
letter-spacing: 2px;
margin-bottom: 20px;

Impact 2

  • Primary header text style — used for all H1s.
  • Should always be paired with either Copy 1 or Copy 2, if a standalone text style is needed, use Impact 1.

CSS: Impact 2

/* bp3 & bp2 */
font-family: Apercu-Bold
font-weight: 700;
font-size: 45px;
line-height: 50px;
margin-bottom: 10px;

/* desktop & bp1 */
font-size: 65px;
line-height: 70px;
margin-bottom: 20px;

Title 0

  • Used sparingly for emphasis of important headlines.
  • Title 1 should more commonly be used for important headers.
  • Should be paired with Copy 1 or Copy 2.
  • Ideally, for H1s use Impact 2 or Impact 1.

Title 0

CSS: Title 0

/* bp3 & bp2 */
font-family: Apercu-Bold;
font-weight: 700;
font-size: 28px;
line-height: 36px;
margin-bottom: 10px;

/* desktop & bp1 */
font-size: 54px;
line-height: 62px;
margin-bottom: 20px;

Title 1

  • Think: H2.
  • Use for headers in bodies of text that need more 'punch', alternatively use Title 2 for less important headers.
  • Should be paired with Copy 1 or Copy 2.

Title 1

CSS: Title 1

/* bp3 & bp2 */
font-family: Apercu-Bold;
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin-bottom: 10px;

/* desktop & bp1 */
font-size: 34px;
line-height: 42px;

Title 2

  • Think: H2 and H3.
  • Use for headers in bodies of text.
  • Should be paired with Copy 2.

Title 2

CSS: Title 2

/* bp3 & bp2 */
font-family: Apercu-Bold;
font-weight: 700;
font-size: 18px;
line-height: 26px;
margin-bottom: 5px;
padding-top: 10px;

/* desktop & bp1 */
font-size: 24px;
line-height: 32px;
margin-bottom: 10px;

Title 3

  • Think: H3, H4, H5.
  • Used for less prominent headers.
  • Should be paired with Copy 2, Copy 3 or Copy 4.

Title 3

CSS: Title 3

/* bp3 & bp2 */
font-family: Apercu-Bold;
font-weight: 700;
font-size: 16px;
line-height: 26px;
margin-bottom: 5px;

/* desktop & bp1 */
font-size: 18px;
line-height: 28px;

Title 4

  • Use sparingly for headers accompanying small copy.
  • Should be paired with Copy 4.

Title 4

CSS: Title 4

/* bp3 & bp2 */
font-family: Apercu-Bold;
font-weight: 700;
font-size: 14px;
line-height: 22px;
margin-bottom: 5px;

/* desktop & bp1 */
/* no change */

Copy 1

  • A larger format copy style, used for leading paragraphs ↗, or for copy that needs to stand out.
  • Use Copy 2 for the majority of copy, and/or to pair with Copy 1, leading on from the lead paragraph.
  • Can be paired with Title 0 or Title 1 if a header is needed.

Copy 1

CSS: Copy 1

/* bp3 & bp2 */
font-family: Apercu-Light;
font-weight: 200;
font-size: 20px;
line-height: 32px;
padding-bottom: 15px;
/* desktop & bp1 */
font-size: 24px;
line-height: 36px;
padding-bottom: 20px;
strong {
    font-family: Apercu-Medium;
    font-weight: 600;
}
a {
    font-family: Apercu-Medium;
    color: $blue50;
    &:hover {
        border-bottom: 1px solid $blue50;
    }
}

Copy 2

  • The default copy style for most copy.
  • Can be paired with Title 1 or Title 2 if a header is needed.

Copy 2

CSS: Copy 2

/* bp3 & bp2 */
font-family: Apercu-Light;
font-weight: 200;
font-size: 16px;
line-height: 26px;
padding-bottom: 15px;

/* desktop & bp1 */
font-size: 18px;
line-height: 28px;
padding-bottom: 20px;

Copy 3

  • Use for less important copy, captions, lists, or when space is tight.
  • Can be paired with Title 3 if a header is needed.

Copy 3

CSS: Copy 3

/* bp3 & bp2 */
font-family: Apercu-Light;
font-size: 14px;
line-height: 22px;
padding-bottom: 15px;

/* desktop & bp1 */
/* no change */

Copy 4

  • Use sparingly for captions, notes or small print.
  • Can be paired with Title 4 if a header is needed.

Copy 4

CSS: Copy 4

/* bp3 & bp2 */
font-family: Apercu-Light;
font-size: 12px;
line-height: 20px;
padding-bottom: 15px;

/* desktop & bp1 */
/* no change */

List Items

  • Lists use Copy 2 text style.
  • Normal links have a $yellow50 'bullet'
  • A list of links should have a $blue50 'bullet'
  • List items have 5px padding separating them.
  • <ul> has the same bottom margin as paragraphs of text.

ListList

CSS: List

/* bp3 & bp2 */
ul {
    list-style: none;
    padding-bottom: 15px;
    li {
        /* font: Copy 2 */
        padding: 0 0 5px 20px;
        &:before {
            content: "";
            display: block;
            position: relative;
            left: -20px;
            top: 16px;
            width: 8px;
            height: 8px;
            transform: rotate(-45deg);
            background-color: $yellow50;
        }
        a {
            color: $blue50;
            font-family: Apercu-Medium;
            font-weight: 600;
            &:before {
                background-color: $blue50;
            }
        }
    }
}

/* desktop & bp1 */
ul {
    padding-bottom: 20px;
}
li {
    padding: 0 0 5px 30px;
    &:before {
        left: -30px;
        top: 18px;
        width: 10px;
        height: 10px;
    }
}

Blockquote

  • Used to draw attention to a quote.
  • Preferably include "" surrounding the quote.
  • Use a cite (person credited for quote) whenever possible.
  • Blockquote has a top margin of 10px (30px including the 20px bottom margin below a paragraph of text above it, on desktop) and a bottom margin of 30px.
  • The quote itself uses the Title 2 text style.
  • The cite uses the Copy 3 text style.

Blockquote

CSS: Blockquote

/* bp3 & bp2 */
blockquote {
    padding-left: 20px;
    border-left: 5px solid $bg5;
    margin: 10px 0 30px 0;
    p {
        /* font: Title 2; */
        padding-bottom: 10px;
    }
    cite {
        /* font: Copy 3; */
    }
}

/* desktop & bp1 */
blockquote {
    padding-left: 30px;
    border-left-width: 10px;
}

results matching ""

    No results matching ""