Typography
Search the component library

Typography

v2.0.0-beta.3

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.)

Features

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

Dependencies

Colors v2.0.0-beta.4

Font Stacks

All textual elements use the following font stacks:

font-family: 'Open Sans', Calibri, Tahoma, 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.

Examples of how labels are used.

Variants

There are five different types of label, Basic, Small, Large, Bold, and Small bold:

Labels should primarily be used in single line scenarios.

The five label types

Color Variants

Use Charcoal as the default primary color and Medium Gray as the secondary gray. Prefer these defaults, but labels can use any color from the Colors component, as long as they are over an appropriately contrasting background color.

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.

  • <em>, <i>
  • <a>
  • <small>
  • <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.

Titles come in two types, Page and Section. Page titles typically only appear once per page and are designed to name the current page. Section titles are designed to name the modular components that might make up a page.

Example section title usage.

Example page title usage.

Page titles

Page titles come in two sizes, Basic and Small.

Standard page title sizes.

Section titles

There are four different types of section title: Basic, Bold, Small, and Large.

Standard title types in single and multiline versions.

Color Variants

Titles follow the same color guidelines as labels, using Charcoal by default and Medium Gray as a secondary supplement. Prefer these, but use other colors where appropriate (make sure to pair with an accessible background).

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.

  • <em>, <i>
  • <small>
  • <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.

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.

All six heading levels.

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>
  • <em>, <i>
  • <strong>, <b>
  • <u>
  • <del>, <s>
  • <ins>
  • <q>
  • <sub>, <sup>
  • <mark>
  • <code>, <kbd>

Non-visible Elements

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

  • <small> (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
  • 12px font-size
  • 16px line-height
Small bold
  • Semibold weight
Basic
  • 14px font-size
  • 18px line-height
Bold
  • Semibold weight
Large
  • 16px font-size
  • 20px line-height

Colors

Text is Charcoal by default, Medium Gray should be used as the secondary color. Any other color can be used as long as it’s paired with an appropriately contrasting background. See the Colors component for more details.

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

Section Titles

Sizes

Small
  • 18px font-size
  • 22px line-height
Basic
  • 20px font-size
  • 26px line-height
Bold
  • 20px font-size
  • 26px line-height
  • Semibold weight
Large
  • 24px font-size
  • 28px line-height

Color

Use the same color scheme as labels.

Regular title sizes

Available Styles Reference As (How do I use this?)
Basic section title [](/design/c/typography/v2.0.0-beta.3/#rd-basic-section-title)
Small section title [](/design/c/typography/v2.0.0-beta.3/#rd-small-section-title)
Bold section title [](/design/c/typography/v2.0.0-beta.3/#rd-bold-section-title)
Large section title [](/design/c/typography/v2.0.0-beta.3/#rd-large-section-title)

Page titles

Sizes

Page title
  • 38px font-size
  • 52px line-height
  • Light weight
Small page title
  • 28px font-size
  • 38px line-height
  • Light weight

Colors

Use the same color scheme as labels.

Available Styles Reference As (How do I use this?)
Page title [](/design/c/typography/v2.0.0-beta.3/#rd-page-title)
Small page title [](/design/c/typography/v2.0.0-beta.3/#rd-small-page-title)

Copy

Basic Body

Font
  • 14px font-size
  • 22px line-height
Color
Margins:
  • Adjacent paragraphs are separated by 12px
  • Leave top/bottom padding for a block of p tags up to the consumer

Standard body copy

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
Available Styles Reference As (How do I use this?)
Basic Body [](/design/c/typography/v2.0.0-beta.3/#rd-basic-body)
Ordered List [](/design/c/typography/v2.0.0-beta.3/#rd-ordered-list)
Unordered List [](/design/c/typography/v2.0.0-beta.3/#rd-unordered-list)
Code [](/design/c/typography/v2.0.0-beta.3/#rd-code)

Headings

Fonts

Level 1
  • Match Small Page title style
Level 2
  • Match Large section title style
Level 3
  • Match Bold section title style
Level 4
  • Match Basic section title style
Level 5
  • Match Small section title style
Level 6
  • Match Large label style

Colors

All headings are Charcoal.

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/v2.0.0-beta.3/#rd-heading-level-1)
Heading Level 2 [](/design/c/typography/v2.0.0-beta.3/#rd-heading-level-2)
Heading Level 3 [](/design/c/typography/v2.0.0-beta.3/#rd-heading-level-3)
Heading Level 4 [](/design/c/typography/v2.0.0-beta.3/#rd-heading-level-4)
Heading Level 5 [](/design/c/typography/v2.0.0-beta.3/#rd-heading-level-5)
Heading Level 6 [](/design/c/typography/v2.0.0-beta.3/#rd-heading-level-6)

Inline Elements

<small>, <time>, <abbr>
  • No visual change, these elements have semantic meaning only
<a>
<mark>
<em>, <i>
  • italic font-style
<strong>, <b>
  • semibold font-weight
<del>, <s>
  • line-through text-decoration
<ins>
  • underline text-decoration
  • cap with ‘+’ symbol
<sup>
  • vertical-align: baseline
  • position: relative
  • top: 0.2em
  • font-size: 90%
<sub>
  • vertical-align: baseline
  • position: relative
  • top: -0.2em
  • font-size: 90%
<q>
  • cap with quotes from user’s locale
<code>, <kbd>
  • Monospace font stack
  • Moonlight background-color
  • 4px horizontal padding
Available Styles Reference As (How do I use this?)
small, time, abbr tags [](/design/c/typography/v2.0.0-beta.3/#rd-small-time-abbr-tags)
Links [](/design/c/typography/v2.0.0-beta.3/#rd-links)
Highlighted Text [](/design/c/typography/v2.0.0-beta.3/#rd-highlighted-text)
Italic Text [](/design/c/typography/v2.0.0-beta.3/#rd-italic-text)
Bold Text [](/design/c/typography/v2.0.0-beta.3/#rd-bold-text)
Deleted Text [](/design/c/typography/v2.0.0-beta.3/#rd-deleted-text)
Inserted Text [](/design/c/typography/v2.0.0-beta.3/#rd-inserted-text)
Superscript, Subscript [](/design/c/typography/v2.0.0-beta.3/#rd-superscript-subscript)
Inline Quoted Text [](/design/c/typography/v2.0.0-beta.3/#rd-inline-quoted-text)
code, kbd tags [](/design/c/typography/v2.0.0-beta.3/#rd-code-kbd-tags)

Changelog

2.0.0-beta.3

  • UPDATED: Uses latest colors, new a11y checklist.
  • CHANGED: Removed Helvetica Neue from font stack.

2.0.0-beta.2

  • Add redlines
  • Tweak section titles
  • Remove dependency on breakpoints

2.0.0-beta.1

  • CHANGED: Font family and size to match rebrand aesthetic

1.0.0

Initial version