Moodle Best Practice Guide
Typography

Digital Typography – or the how text is presented on a screen – is an often overlooked but important part of building Moodle content. Much emphasis is (rightly) placed on what you write, after all it’s this content that students are looking for when they log in, it’s also important however that we spent some time thinking about how to present your content.

We also explain a little about why you should choose to pay close attention to how your text is presented and what benefits it will give those who are reading it.

Headings

The headings shown below are available for you to use on your Moodle pages. You'll notice that Heading 3 is the main heading for you to use in your content as Heading 1 & Heading 2 are reserved for use by Moodle. Selecting the largest header you can in the Atto text editor it will use a Heading 3 tag for this reason. If you find you want to use a larger heading than the maximum Heading 3 size, please see the display styles section below.


<h3></h3>

Heading 3

<h4></h4>

Heading 4

<h5></h5>
Heading 5
<h6></h6>
Heading 6

Why no heading 1 or 2?

Heading 1 and 2 are reserved for use by Moodle, they appear on almost all pages in the site and module titles.

To ensure a proper content hierarchy, that allows screen readers to easily understand the page you should not use these in your page content.

Display styles New

If you wish for a more prominent for instance at the head of your page, which appears larger than the available Heading 3, you can add one of the modifying display classes to your header which will restyle it whilst maintaining the hierarchal integrity for assistive technologies.

All of the headings in the example below are Heading 3 class, you can apply these classes to any heading level you like, though we do suggest that the main body of your work uses the standard heading sizes.


<h3 class="display-1">Display 1</h3>

Display 1

<h3 class="display-2">Display 2</h3>

Display 2

<h3 class="display-3">Display 3</h3>

Display 3

<h3 class="display-4">Display 4</h3>

Display 4