3.2 Headings, Fonts, and Hyperlinks

Ask Yourself

ReflectDo 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.

Examples of incorrect and correct use of headings
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:

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!

Examples of incorrect and correct use of anchor text
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

ReflectLook 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?

definition

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Universal Design for Learning Copyright © 2023 by Andrew Stracuzzi is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book