Typography and Font Sizes: Ensuring Readability for All Users

Why Typography Matters

Typography plays a vital role in making web content readable and accessible. For users with visual or cognitive impairments, poor typography choices — such as inconsistent fonts or inaccessible font sizes — can create significant barriers. By adhering to accessibility best practices and Elon University’s typography guidelines, we ensure a consistent, professional and inclusive experience for all website visitors.

WCAG Typography Requirements

The Web Content Accessibility Guidelines (WCAG) establish specific requirements to ensure text is readable for all users:

  • Text Resizing:
    • Users must be able to resize text up to 200% without losing content or functionality.
    • Elon’s CMS ensures this by using responsive typography and avoiding fixed text sizes.
  • Readable Font Sizes:
    • WCAG does not specify exact font sizes, but it recommends using sizes that are legible on a variety of devices. As a general rule:
      • Body text should typically be at least 16px for readability.
      • Large text (e.g., headings) should be sized proportionally and meet contrast requirements.
  • Contrast Between Text and Background:
    • Regular text must have a contrast ratio of at least 4.5:1 against its background.
    • Large text must meet a contrast ratio of 3:1.
    • Elon’s CMS pre-tests all fonts and sizes to meet these requirements.
  • Line Spacing and Letter Spacing:
    • Ensure line spacing is at least 1.5 times the font size and paragraph spacing is at least 1.5 times larger than the line spacing.
    • Letter spacing should remain consistent and not be overly condensed.

These requirements ensure that typography is accessible to users with low vision, color blindness or other visual impairments, as well as those with cognitive disabilities.

Elon University’s Typography Management in the CMS

To maintain accessibility and consistency, Elon University’s CMS tightly controls typography options. This includes:

  • Pre-Set Fonts: Fonts on all webpages are pre-defined and align with Elon’s branding and accessibility standards.
  • Controlled Font Sizes: Where font size adjustments are allowed (e.g., for headings or text blocks), the options provided have been tested to meet WCAG readability requirements.
  • No Custom Fonts or Sizes: Content editors cannot upload custom fonts or manually adjust font sizes beyond the tools provided in the CMS. This ensures that text remains readable and visually consistent across the website.

Why These Restrictions Exist:

  • Readability Across Devices: Pre-tested font sizes ensure text is legible on all devices, including smartphones, tablets and desktops.
  • Accessibility Standards: Fonts and font sizes must meet WCAG guidelines, particularly for users with low vision or dyslexia.
  • Brand Consistency: Limiting typography options ensures the website maintains a cohesive and professional appearance aligned with Elon’s brand identity.

Best Practices for Typography and Accessibility

  • Use Provided Tools for Font Sizes:
    • If you need to emphasize or organize content, use the available tools in the CMS to adjust font sizes appropriately (e.g., selecting heading levels or pre-defined styles like “large text”).
    • Avoid workarounds like adding inline styles in the HTML editor to manually adjust sizes or font families.
  • Prioritize Readability:
    • Ensure that text contrasts well with the background (e.g., black text on a white background or light text on a dark overlay).
    • Keep line spacing (line height) consistent to avoid overcrowding or excessive gaps.
  • Be Mindful of Hierarchy:
    • Use headings and subheadings to create a logical structure for your content. Avoid styling regular text to look like headings.
    • Follow the heading guidelines to ensure a clear hierarchy and navigation experience.
  • Avoid All Caps for Large Text Blocks:
    • All caps can be harder to read, especially for users with dyslexia. Use capitalization sparingly and only for short, emphasized text like headings or buttons.

Warnings and Considerations

  • Do Not Use Custom Fonts: Adding custom fonts through HTML or CSS overrides the safeguards in the CMS and can create accessibility issues, such as unreadable text or poor performance on slower devices.
  • Avoid Overwriting Font Sizes: Inline styles that manually adjust font sizes can break responsive design and may not meet WCAG standards for readability.
  • Be Cautious with Decorative Text: Decorative fonts or overly stylized text (e.g., script or novelty fonts) should not be used, as they are difficult to read and incompatible with Elon’s brand guidelines.
  • Font Size for Large Text Blocks: For larger blocks of text, use the default body font size and style. Avoid using small font sizes, as they can strain users’ eyes, especially on mobile devices.

Final Thoughts on Typography Accessibility

Typography is more than just design — it’s a key factor in ensuring your content is accessible and user-friendly. By following the guidelines and using the tools provided in Elon University’s CMS, you can create content that is readable, visually consistent and accessible to all users.

If you have questions about typography, font sizes or other related concerns, reach out to the Online Communications Team. We’re here to provide guidance and ensure your content aligns with accessibility best practices and Elon’s standards.