Typography

v1.0.0

This component provides standard typographic styles for the platform.

Usage Guidelines

Every instance of text should use a type style defined in this component. If you find a use case not covered by the styles here, make a request to modify this component. (Keeping all type styles in a single component makes it easy to maintain and update them.)

Font Stacks
Labels
Titles
Copy
Headings
Inline Elements
Redlines
Changelog

Features

Single collection of all typographic styles
Label styles for UI messages
Title styles for UI headings
Copy styles for content
Inline styles (links, super/sub-script, etc.)
Meets accessibility contrast requirements

Dependencies

Colors v1.0.1

Breakpoints v1.0.0

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

Font Stacks

All textual elements use the following font stacks:

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: Monaco, 'Lucida Console', monospace;

Labels

Much of the typography used in a web application consists of short names, labels, or single line bits of content. For example, in Console the course tile displays information like instructor names and course dates with labels.

An example of labels in use on the Console course tile

Size Variants

There are four different sizes of label, Basic, Small, Large, and Bold:

Labels should primarily be used in single line scenarios. Make a particular effort to avoid using bold labels in a multi-line manner.

The four label sizes

Color Variants

Labels come in two colors, Primary and Secondary. There is an inverse palette available as well.

Standard colors

Inverse colors

Allowed Inline Elements

In general, labels should not be styled beyond the basic styles listed above. If necessary, stick to the following list of inline elements.

, 
<a>

<time>
<abbr>

Titles

Titles are very similar to labels except they demarcate a logical section or container of content. In the previous example, the course name would be a title.

Standard colors

Size Variants

There are three different sizes of title: Basic, Large, and Extra Large. These sizes will automatically scale down in narrow viewports.

Standard title sizes, multiline versions, and the responsive sizes used when the viewport is narrower.

Allowed Inline Elements

In general, titles should not be styled beyond the basic styles listed above. If necessary, stick to the following list of inline elements.

, 

<time>
<abbr>

Copy

When you have a chunk of content to display, use one of these styles.

Basic Body

Most regular content will use the Basic Body style.

Small variant

There is a smaller variant available which should be used when the line length is shorter.

Lead Variant

There is also a Lead variant which can be used for the first paragraph of a message or as part of a hero block for marketing materials.

It will automatically scale down for narrow viewports as well.

Lists

Both ordered and unordered lists are supported with a nesting depth of three. These should be used to present content within a copy block, not for UI elements.

Code

Blocks of code (typically <pre> tags) are styled on a dark background. (See also the inline elements <code> and <kbd>.)

Allowed Inline Elements

Copy is more flexible in this regard that labels or titles. You can include any of the inline elements covered by this component.

Headings

Headings pair with copy styles to delineate sections within blocks of content. They should not be used for UI elements (see titles instead).

There are six different levels available and should be used in order.

These headings don’t change size as the viewport narrows.

Inline Elements

There are a number of inline elements which can be used to modify the other type styles (see the list of allowed inline elements for each type style).

Basic Elements

<a>
, 
, 

<del>, <s>
<ins>
<q>
, 

<code>, <kbd>

Non-visible Elements

Some inline elements should be used only for semantic reasons and don’t effect the visual style. These include:

 (note: this element is used to represent side-comments and small print, including copyright and legal text, independent of its styled presentation)
<time>
<abbr>

Redlines

Labels

Sizes

Small

13px font-size
15px line-height

Basic

14px font-size
16px line-height

Large

16px font-size
18px line-height

Bold

14px font-size
16px line-height
bold font-weight

Available Styles	Reference As (How do I use this?)
Basic Label	`[](/design/c/typography/v1.0.0/#rd-basic-label)`
Small Label	`[](/design/c/typography/v1.0.0/#rd-small-label)`
Large Label	`[](/design/c/typography/v1.0.0/#rd-large-label)`
Bold Label	`[](/design/c/typography/v1.0.0/#rd-bold-label)`

Colors

Primary (Light)

Pitch (#231f20)

Secondary (Light)

Gray No. 1 (#565656)

Primary (Dark)

White (#FFFFFF)
light font-weight

Secondary (Dark)

Gray Wash (#AEAEAE)
light font-weight

Available Styles	Reference As (How do I use this?)
Primary Label Color	`[](/design/c/typography/v1.0.0/#rd-primary-label-color)`
Secondary Label Color	`[](/design/c/typography/v1.0.0/#rd-secondary-label-color)`
Inverse Primary Label Color	`[](/design/c/typography/v1.0.0/#rd-inverse-primary-label-color)`
Inverse Secondary Label Color	`[](/design/c/typography/v1.0.0/#rd-inverse-secondary-label-color)`

Titles

Sizes

Basic

22px font-size
28px line-height

Large

24px font-size
30px line-height

XL

30px font-size
36px line-height

At extra small viewports:

Basic

18px font-size
22px line-height

Large

20px font-size
24px line-height

XL

22px font-size
28px line-height

Color

All titles are colored Pitch (#231f20).

Regular title sizes

Title sizes for narrow viewports (< 480px)

Available Styles	Reference As (How do I use this?)
Basic Title	`[](/design/c/typography/v1.0.0/#rd-basic-title)`
Large Title	`[](/design/c/typography/v1.0.0/#rd-large-title)`
XL Title	`[](/design/c/typography/v1.0.0/#rd-xl-title)`

Copy

Basic Body

Font

16px font-size
22px line-height

Color

Pitch (#231f20)

Margins:

Adjacent paragraphs are separated by 12px
Leave top/bottom padding for a block of p tags up to the consumer

Small Size

Font

14px font-size
20px line-height

Standard body copy

Smaller body copy used for narrower line length

Lead

Font

20px font-size
28px line-height
light font-weight

Color

Pitch (#231f20)

Narrow Lead

At extra small viewports the lead styles become:

Font

18px font-size
24px line-height
thin font-weight

Color

Pitch (#231f20)

Lists

These lists should be used to communicate content within a copy block, not as UI elements.

Font

Inherit the containing body copy

Spacing

12px above and below a list
6px between list items
Lists that immediately follow a header should contribute no top margin

Padding

The first level of a list has 26px of left padding
Sublists have 20px of padding

Code

Font

Monospace font stack
14px font-size
20px line-height

Color

Gray Wash (#AEAEAE)
Full Moon (#424242) background-color

Available Styles	Reference As (How do I use this?)
Basic Body	`[](/design/c/typography/v1.0.0/#rd-basic-body)`
Small Body	`[](/design/c/typography/v1.0.0/#rd-small-body)`
Lead	`[](/design/c/typography/v1.0.0/#rd-lead)`
Ordered List	`[](/design/c/typography/v1.0.0/#rd-ordered-list)`
Unordered List	`[](/design/c/typography/v1.0.0/#rd-unordered-list)`
Code	`[](/design/c/typography/v1.0.0/#rd-code)`

Headings

Fonts

Level 1

24px font-size
30px line-height
bold font-weight
2px bottom border, Boring (#A6A8AB)
Pitch (#231f20)

Level 2

20px font-size
24px line-height
bold font-weight
Pitch (#231f20)

Level 3

18px font-size
22px line-height
bold font-weight
Pitch (#231f20)

Level 4

16px font-size
20px line-height
bold font-weight
Gray No. 1 (#565656)

Level 5

16px font-size
20px line-height
italic font-style
Gray No. 1 (#565656)

Level 6

14px font-size
16px line-height
italic font-style
Gray No. 1 (#565656)

Spacing

Header that follows a header

6px margin
40px if top header is Level 1

Header that follows content

20px margin

Margins can be customized to meet a layout if necessary.

Available Styles	Reference As (How do I use this?)
Heading Level 1	`[](/design/c/typography/v1.0.0/#rd-heading-level-1)`
Heading Level 2	`[](/design/c/typography/v1.0.0/#rd-heading-level-2)`
Heading Level 3	`[](/design/c/typography/v1.0.0/#rd-heading-level-3)`
Heading Level 4	`[](/design/c/typography/v1.0.0/#rd-heading-level-4)`
Heading Level 5	`[](/design/c/typography/v1.0.0/#rd-heading-level-5)`
Heading Level 6	`[](/design/c/typography/v1.0.0/#rd-heading-level-6)`

Inline Elements

, <time>, <abbr>

Same as the ‘Basic Text’ label

<a>

Active link = Hyperdrive (#0D65A6) and underline
Hover link = Royal Navy (#094877), no underline
Focus states use the default browser style

Highlighter (#FDEC2E) background-color
Only use within Body Copy

, 

italic font-style

, 

bold font-weight

<del>, <s>

line-through text-decoration
Gray No. 1 (#565656) color on light backgrounds
Gray Wash (#AEAEAE) color on dark backgrounds

<ins>

underline text-decoration
cap with ‘+’ symbol

vertical-align: baseline
position: relative
top: 0.2em
font-size: 90%

vertical-align: baseline
position: relative
top: -0.2em
font-size: 90%

<q>

cap with quotes from user’s locale

<code>, <kbd>

Monospace font stack
Brightly Lit (#E6E6E6) background-color
4px horizontal padding

Available Styles	Reference As (How do I use this?)
small, time, abbr tags	`[](/design/c/typography/v1.0.0/#rd-small-time-abbr-tags)`
Links	`[](/design/c/typography/v1.0.0/#rd-links)`
Highlighted Text	`[](/design/c/typography/v1.0.0/#rd-highlighted-text)`
Italic Text	`[](/design/c/typography/v1.0.0/#rd-italic-text)`
Bold Text	`[](/design/c/typography/v1.0.0/#rd-bold-text)`
Deleted Text	`[](/design/c/typography/v1.0.0/#rd-deleted-text)`
Inserted Text	`[](/design/c/typography/v1.0.0/#rd-inserted-text)`
Superscript, Subscript	`[](/design/c/typography/v1.0.0/#rd-superscript-subscript)`
Inline Quoted Text	`[](/design/c/typography/v1.0.0/#rd-inline-quoted-text)`
code, kbd tags	`[](/design/c/typography/v1.0.0/#rd-code-kbd-tags)`

Changelog

1.0.0

Initial version