Typography on GitHub

Typography

Brightspace UI typography styles can be applied to the various types of textual elements using CSS classes.

Base Typography

The base font properties are set up by applying the d2l-typography CSS class to the <body> element:

Example (html)
<body class="d2l-typography">
	...
</body>

This will set the font family, color, line-height and character spacing.

Example (html)
<p>
  Grumpy wizards make toxic brew for the evil Queen and Jack.
</p>

Grumpy wizards make toxic brew for the evil Queen and Jack.

Base Font Size

Within Brightspace, the user can configure the size of font from one of four values. If your application exists outside of Brightspace, set the desired font size on the <html> element. All other font sizes will be multiples of that value.

The recommended base font size is 20px:

Example (css)
html {
	font-size: 20px;
}

Body Styles

There are three body style classes. Each has a CSS class that can be used on any container. These typography styles will respond to viewport width changes.

Standard

The standard body class is the same as the base typography style. Use it by applying the d2l-body-standard class:

Example (html)
<div class="d2l-body-standard">
  Standard body text.
</div>
Standard body text.

Compact

The compact body class is a smaller version of the default body class, for use in areas that prefer to be conservative with the amount of real estate used by text. This style is not recommended for blocks of readable text, particularly in paragraph form. Rather, it is best employed for brief informative text or calls to action. Use it by applying the d2l-body-compact class:

Example (html)
<div class="d2l-body-compact">
  Compact body text.
</div>
Compact body text.

Small

The small body class can be used to set font properties for text that needs to be smaller than the standard body class. Unlike the compact body class, this style is appropriate for blocks of readable text. Use the d2l-body-small class:

Example (html)
<div class="d2l-body-small">
  Small body text.
</div>
Small body text.

Headings

There are four separate CSS classes available for heading elements. These can be applied to any heading element (<h1> - <h6>) to achieve the desired look while maintaining proper semantic structure.

Accessibility: Heading Structure

Headings add semantic structure to your document, so make sure you nest headings properly and avoid skipping levels.

WCAG 2.0 Level A
H42: Using h1-h6 to identify headings

WCAG 2.0 Level A
G141: Organizing a page using headings

Example (html)
<h1 class="d2l-heading-1">Heading 1</h1>
<h2 class="d2l-heading-1">Heading 2</h2>
<h3 class="d2l-heading-1">Heading 3</h3>
<h4 class="d2l-heading-1">Heading 4</h4>

Heading 1

Heading 2

Heading 3

Heading 4

Accessibility: Heading Text

Provide descriptive headings which give an overview of the content they encompass.

WCAG 2.0 Level AA
G130: Provide descriptive headings

Localized Fonts

Most web fonts – including the Brightspace UI font Lato – don’t contain all the glyphs needed for languages which use non-Latin characters. To ensure characters in all languages display correctly, Brightspace UI typography will adapt its font usage based on the detected language.

Example (html)
<!-- Korean -->
<p lang="ko">심술 마법사</p>

심술 마법사

Readability

For readers who prefer a font intended for dyslexia, the Open Dyslexic font can be applied using the d2l-dyslexic class. This will be done automatically within Brightspace based on the “readability” preference in account settings.

Example (html)
<p class="d2l-dyslexic">
  Grumpy wizards make toxic brew for the evil Queen and Jack.
</p>

Grumpy wizards make toxic brew for the evil Queen and Jack.

Developing with Typography

Installation

To use this component in your application, you can install it using Bower:

bower install d2l-typography

Import d2l-typography.html, then include d2l-typography in a custom-style block to add the CSS classes to the page:

Example (html)
<link
  rel="import"
  href="bower_components/d2l-typography/d2l-typography.html">
<style is="custom-style" include="d2l-typography"></style>

Show me the code!

Want to see, contribute or learn more about the code?
Check out "BrightspaceUI/typography" on GitHub!

More information on developing with Brightspace UI components can be found in the Developer Guide.