3.2 Headings, Fonts, and Hyperlinks
Ask Yourself
Do you use headings, fonts, and hyperlinks mainly to fit your own writing style and preferences, or do you use them in a way that supports student learning?
When writing course content, it’s important to make proper use of headings, fonts, and hyperlinks to ensure your writing is clear to students.
Headings
Structure written content with appropriate use of headings. Organizing your writing with proper headings supports students with cognitive and vision impairments, making course content easier to navigate and clarifying how various concepts are related.
Use the h1-h6 heading hierarchy. Documents and web pages are organized with headings that are ranked 1-6, titled “heading 1” (h1) through “heading 6” (h6), with h1 being the most important and h6 being the least important. Always follow a consecutive hierarchy when using headings. For example, where h1 is used as a page title, h2 can be considered a section heading, with h3 as a subheading, h4 as a detailed subheading, etc.
Avoid using bold or italicized text in place of a proper heading. A common heading mistake is to simply bold, italicize, or capitalize regular text with the hope that this will serve as a heading. While someone without a visual impairment may understand your intentions, a student with a screen reader won’t see the difference. Screen readers rely on proper headings, with h1-h6 tags, to convey the structure of course content.
Incorrect | Correct |
---|---|
[h1] Sections of a Grocery Store
[h1] Breakfast Aisle Hot cereals Cold cereals [h1] Bread Aisle Loaves Rolls [h1] Dairy Aisle Milk Butter Cheese |
[h1] Sections of a Grocery Store
[h2] Breakfast Aisle [h3] Hot cereals [h3] Cold cereals [h2] Bread Aisle [h3] Loaves [h3] Rolls [h2] Dairy Aisle [h3] Milk [h3] Butter [h3] Cheese |
Fonts
Selecting a font can be an easy way to express your style and set a tone for your writing. Although you may be interested in picking the most unique and interesting font available, some fonts are simply more accessible than others.
There are a variety of factors affecting the readability of fonts, but a few general guidelines will help ensure your content is readable for all students.
Avoid using small fonts. In documents and webpages, use around 12-point font for typical body text and for any footnotes or endnotes, use a 9-point font. If you’re delivering a presentation, aim for an 18-point font or larger for the body text of your slides.
Use simple, familiar fonts. While there is no consensus on which fonts are most readable, stick to fonts that are familiar and simple, avoiding more stylized or decorative fonts that may be unfamiliar and require more concentration to parse. If you’re unsure what font to use, try one of the following (Pennsylvania State University, n.d.):
- Arial
- Calibri
- Cambria
- Garamond
- Georgia
- Helvetica
- Lucida Sans/Lucida Grande
- Palatino/Palatino Linotype/Book Antiqua
- Tahoma
- Times New Roman
- Verdana
Underline only linked text. While handwritten and printed writing might use underlines more freely, digital content typically only uses underline for links. If you underline text that is not a link, it may confuse students and make them think it’s a link. When you need to emphasize something, use bold or italics instead of underlining.
Web Resources
If you’re unsure about a font in your writing, review WebAIM: Typefaces and Fonts to evaluate the font’s readability based on various key principles.
Hyperlinks
Hyperlinks are generally comprised of two components for their users: the target URL, where users will be directed to after clicking a hyperlink, and the anchor text, which is the visible text of a link. Here’s an example:
- Fanshawe College Homepage
- Target URL: https://www.fanshawec.ca/
- Anchor text: Fanshawe College Homepage
Generally, the anchor text of a hyperlink describes the purpose or uses the title of the link’s destination, as this will clearly inform students of the link’s purpose.
Ensure link text makes sense out of context. Avoid anchor text that uses non-informative phrases, like “Click here” or “Read more.” While contextual clues may help most students decipher the destination of “Click here,” a screen reader won’t often convey that same context, and students with visual impairments will be left wondering where the link goes.
Avoid using URLs as anchor text. Once again, make anchor text informative,while also respecting the patience of those using screen readers. If using a link’s URL as its anchor text, the URL will simply be read, character by character, for those using a screen reader. For some links, this can take a very long time!
Incorrect | Correct |
---|---|
Want to learn more about how to print on campus? Click here. | Want to learn more about how to print on campus? Visit Computer and Printing Services at Fanshawe’s Library Learning Commons. |
The College’s policies and procedures can be found here: https://www.fanshawec.ca/about-fanshawe/corporate-info/policies | The College’s policies and procedures can be found here: Fanshawe Policies |
For more information on FOL Accessibility, refer to Appendix 4: FanshaweOnline Accessibility in this guide.
Reflection: One Small Step
Look back at a document you shared with your students. It could be a syllabus or instructions for an assessment. Are there ways you can refine your writing to make it clearer and more accessible?
Text that is larger and more distinct than regular paragraph text, used to convey the organization of content.
A set of text characters in a certain style and size that may be printed or displayed digitally.
Also known as a link, a hyperlink directs users to a different portion of a document or page, or an entirely different document or page, once clicked or tapped by users.