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.
Working with text correctly, either online or in a document is also one of the simplest ways of ensuring your content is accessible. There are a few things to remember when adding text to your content which will go a long way to making it easy to read – whoever the audience.
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.
Advantages of headings
- Enables the reader to skim the document to find the information that they require.
- Screen reader users can skip through the document using your headings.
- Layout is consistent (helpful for visually impaired users).
- If you want to change your heading style you can adjust all your headings at once.
- Table of contents can be created automatically.
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
