All textual elements use the following font stacks:
font-family: 'Open Sans', Calibri, Tahoma, sans-serif; font-family: Monaco, 'Lucida Console', monospace;
Typography
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
Dependencies
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 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.
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
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.
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 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 come in two sizes, Basic and Small.
Standard Page UI Heading sizes.
There are four different types of section UI Headings: Basic, Bold, Small, and Large.
Standard Section UI Heading types in single and multiline versions.
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).
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>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 <code> and <kbd>.)
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 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.
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).
<a> For Link Style Buttons, please refer to the Button Specification Document<em>, <i><strong>, <b><del>, <s><ins><q><sub>, <sup><mark><code>, <kbd>
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>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.
Font weights are normal unless otherwise specified.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| UI Text - Basic | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-text-basic) |
| UI Text - Small | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-text-small) |
| UI Text - Small Bold | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-text-small-bold) |
| UI Text - Large | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-text-large) |
| UI Text - Bold | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-text-bold) |
Use the same color and weight scheme as UI Text.
Regular title sizes
| Available Styles | Reference As (How do I use this?) |
|---|---|
| UI Headings - Section - Basic | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-headings-section-basic) |
| UI Headings - Section - Small | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-headings-section-small) |
| UI Headings - Section - Bold | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-headings-section-bold) |
| UI Headings - Section - Large | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-headings-section-large) |
Use the same color and weight scheme as UI Text.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| UI Headings - Page - Basic | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-headings-page-basic) |
| UI Headings - Page - Small | [](/design/c/typography/v2.0.0-beta.9/#rd-ui-headings-page-small) |
p tags up to the consumer
Standard body copy
Large body copy
These lists should be used to communicate content within a copy block, not as UI elements.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Basic Body | [](/design/c/typography/v2.0.0-beta.9/#rd-basic-body) |
| Large Body | [](/design/c/typography/v2.0.0-beta.9/#rd-large-body) |
| Ordered List | [](/design/c/typography/v2.0.0-beta.9/#rd-ordered-list) |
| Unordered List | [](/design/c/typography/v2.0.0-beta.9/#rd-unordered-list) |
| Code | [](/design/c/typography/v2.0.0-beta.9/#rd-code) |
All Copy Headings are Charcoal.
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.9/#rd-heading-level-1) |
| Heading Level 2 | [](/design/c/typography/v2.0.0-beta.9/#rd-heading-level-2) |
| Heading Level 3 | [](/design/c/typography/v2.0.0-beta.9/#rd-heading-level-3) |
| Heading Level 4 | [](/design/c/typography/v2.0.0-beta.9/#rd-heading-level-4) |
| Heading Level 5 | [](/design/c/typography/v2.0.0-beta.9/#rd-heading-level-5) |
| Heading Level 6 | [](/design/c/typography/v2.0.0-beta.9/#rd-heading-level-6) |
<small>, <time>, <abbr><a><mark><em>, <i><strong>, <b><del>, <s><ins><sup><sub><q><code>, <kbd>
| Available Styles | Reference As (How do I use this?) |
|---|---|
| small, time, abbr tags | [](/design/c/typography/v2.0.0-beta.9/#rd-small-time-abbr-tags) |
| Links | [](/design/c/typography/v2.0.0-beta.9/#rd-links) |
| Highlighted Text | [](/design/c/typography/v2.0.0-beta.9/#rd-highlighted-text) |
| Italic Text | [](/design/c/typography/v2.0.0-beta.9/#rd-italic-text) |
| Bold Text | [](/design/c/typography/v2.0.0-beta.9/#rd-bold-text) |
| Deleted Text | [](/design/c/typography/v2.0.0-beta.9/#rd-deleted-text) |
| Inserted Text | [](/design/c/typography/v2.0.0-beta.9/#rd-inserted-text) |
| Superscript, Subscript | [](/design/c/typography/v2.0.0-beta.9/#rd-superscript-subscript) |
| Inline Quoted Text | [](/design/c/typography/v2.0.0-beta.9/#rd-inline-quoted-text) |
| code, kbd tags | [](/design/c/typography/v2.0.0-beta.9/#rd-code-kbd-tags) |
<u> tag stylingInitial version