This component defines the standard typographic styles. Use the type styles defined in this component for every instance of text.
Note: If you find a use case not covered by the styles listed here, then make a request to modify this component. (Keeping all type styles in a single component makes it easy to maintain and update them.)
All textual elements use the following font stacks:
font-family: 'Open Sans', Calibri, Tahoma, sans-serif; font-family: Monaco, 'Lucida Console', monospace;
Much of the typography used in a Web app 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.
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.
In general, labels should not be styled beyond the basic styles listed above. If necessary, stick to the following list of inline elements.
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.
Page UI Headings come in two sizes, Basic and Small.
There are four different types of section UI Headings: Basic, Bold, Small, Large, and Small Bold.
UI Headings follow the same color guidelines as UI Text, using Charcoal by default and Medium Gray as a secondary supplement. These are preferred, but use other colors where appropriate (make sure to pair with an accessible background).
In general, UI Headings should not be styled beyond the basic styles listed above. If necessary, stick to the following list of inline elements.
When you have a chunk of content to display, use one of these styles.
Most regular content will use the Basic Body style.
For more extensive chunks of content, use the Large Body style. This is useful to maintain the target line length of around 75 characters.
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.
Blocks of code (typically
<pre> tags) are styled on a dark background. (See also the 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.
There are six different levels available and should be used in order.
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).
By default links have an underline which is good for situations when the links are surrounded by static text. For situations where there is a group of links without any nearby static text it can be visually cleaner to reverse the behavior: link text has no underline to start and an underline is added on hover. In all cases the same color scheme should be used for normal vs hovered links.
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)
|Small bold||Semibold weight|
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.
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.
|Small Bold||18px font-size|
Use the same scheme as UI Text.
Use the same scheme as UI Text.
|Basic Font size||14px font-size|
|Large Font size||16px font-size|
|Margins||Adjacent paragraphs are separated by 12px|
|Leave top/bottom padding for a block of |
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|
|Level 1||Match Small Page UI Heading style|
|Level 2||Match Large Section UI Heading style|
|Level 3||Match Bold Section UI Heading style|
|Level 4||Match Basic Section UI Heading style|
|Level 5||Match Small Section UI Heading style|
|Level 6||Match Large UI Text style|
All Copy Headings are Charcoal.
|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.
|No visual change, these elements have semantic meaning only|
|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|
|In cases where links appear separately from static text the underline behavior can be reversed (i.e. normal link = no underline, hover = underline)|
|Sunshine Yellow background-color|
|Only use within Body Copy|
|cap with '+' symbol|
|cap with quotes from user's locale|
|Monospace font stack|
|4px horizontal padding|