Typography
Search the component library

Typography

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

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

Font Stacks

All textual elements use the following font stacks:

font-family: 'Open Sans', Calibri, Tahoma, sans-serif;
font-family: Monaco, 'Lucida Console', monospace;

UI Text

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 UI Text.

Examples of how UI Text is used.

Variants

There are five different types of UI Text, Basic, Small, Large, Bold, and Small Bold:

UI Text should primarily be used in single line scenarios.

The five UI Text 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>

UI Headings

UI Headings are very similar to UI Text except they demarcate a logical section or container of content. In the previous example, the course name would be a UI Heading.

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

Example of Section UI Heading usage.

Example of Page UI Heading usage.

Page UI Headings

Page UI Headings come in two sizes, Basic and Small.

Standard Page UI Heading sizes.

Section UI Headings

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

Standard Section UI Heading types in single and multiline versions.

Color Variants

UI Headings follow the same color guidelines as UI Text, 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, UI Headings 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.

Large Body

For more extensive chunks of content, use the Large Body style. This is useful to maintain the target line length of around 75 characters.

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 than labels or titles. You can include any of the inline elements covered by this component.

Copy Headings

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

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

All six Copy 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>
  • <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

UI Text

Sizes

Small12px font-size
16px line-height
Small boldSemibold weight
Basic14px font-size
18px line-height
BoldSemibold weight
Large16px 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.

Weights

Text uses a normal weight unless otherwise specified.

Note that bold styles are actually displayed using the semibold variant of Open Sans. Visual design has chosen the semibold variant as more appropriate for our current aesthetic, but it should still be used in the same semantic way as a bold font. Calling these styles "Bold" (not "Semibold") future proofs the typography component, making it easy to switch to another font that might not have a semibold variant.

Section UI Headings

Sizes

Small18px font-size
22px line-height
Basic20px font-size
26px line-height
Bold20px font-size
26px line-height
Semibold weight
Large24px font-size
28px line-height

Color and Weight

Use the same scheme as UI Text.

Regular title sizes

Page UI Headings

Sizes

Basic38px font-size
52px line-height
Light weight
Small28px font-size
38px line-height
Light weight

Colors and Weights

Use the same scheme as UI Text.

Copy

Body

Basic Font Size14px font-size
22px line-height
Large Font Size16px font-size
24px line-height
ColorCharcoal
Margins:Adjacent paragraphs are separated by 12px
Leave top/bottom padding for a block of p tags up to the consumer

Standard body copy

Large body copy

Lists

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

FontInherit the containing body copy
Spacing12px above and below a list
6px between list items
Lists that immediately follow a header should contribute no top margin
PaddingThe first level of a list has 26px of left padding
Sublists have 20px of padding

Code

FontMonospace font stack
14px font-size
20px line-height
ColorWhite Gray
Ink Blue background-color

Copy Headings

Fonts

Level 1Match Small Page UI Heading style
Level 2Match Large Section UI Heading style
Level 3Match Bold Section UI Heading style
Level 4Match Basic Section UI Heading style
Level 5Match Small Section UI Heading style
Level 6Match Large UI Text style

Colors

All Copy Headings are Charcoal.

Spacing

Header that follows a header6px margin
40px if top header is Level 1
Header that follows content20px margin

Margins can be customized to meet a layout if necessary.

Inline Elements

<small>, <time>, <abbr>No visual change, these elements have semantic meaning only
<a>Generic link = Digital Pearson Blue and underline
Hover link = Ink Blue, no underline
Focus states use the default browser style, and also adopt the hover style
<mark>Sunshine Yellow background-color
Only use within Body Copy
<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

Changelog

2.0.0

  • CHANGED: Font family and size to match rebrand aesthetic

1.0.0

Initial version