Why a11y?

Keyboard Navigation

Importance of Responsive Typography

Responsive typography ensures that text remains legible and accessible across all devices, screen sizes, and user preferences. It is essential for users with visual impairments, older adults, or anyone who may need to adjust the size of the text for readability. Typography that scales well contributes to the overall usability and accessibility of your site.

Using Scalable Units

Scalable units like rem and em allow text to resize relative to the root or parent element, ensuring flexibility across various devices.

What are rem and em?

  • rem (Root Element): A unit relative to the root element’s font size (usually set in the HTML or body). It provides consistency across a site.
  • em: A unit relative to the font size of the parent element. It can lead to compounding changes in font size if used too deeply nested in the HTML structure.

If the root font size is 16px, then:

  • 1rem = 16px
  • 2rem = 32px
  • 0.875rem = 14px

Why Use Scalable Units?

Using rem and em ensures that typography adjusts to different screen sizes and user settings, contributing to a more responsive and accessible design. Unlike fixed units like px, which do not adapt well to different devices or zoom levels, scalable units improve usability across screen sizes and resolutions.

Best Practices for Responsive Typography

Set a Base Font Size

The base font size is typically set on the html or body element in your CSS. Many developers start with 16px as the default size, which is the common browser default.

html {
	font-size: 100%; /* equivalent to 16px */
}

Use rem for Font Sizes

Once the base size is set, use rem units for all other font sizes to ensure scalability. This allows users to adjust the font size globally based on their browser settings.

body {
	font-size: 1rem; /* 16px */
}

h1 {
	font-size: 2.5rem; /* 40px */
}

p {
	font-size: 1rem; /* 16px */
}

Responsive Scaling for Different Devices

Use media queries to adjust font sizes at different screen widths, ensuring that the typography is suitable for small screens (mobile) and large screens (desktops).

/* Base font size for larger screens */
body {
	font-size: 1rem; /* 16px */
}

/* Increase font size on small screens */
@media (max-width: 768px) {
	body {
		font-size: 1.125rem; /* 18px */
	}
}

Set Line Heights (Leading) for Readability

A good line height (also called leading) improves readability, especially on larger blocks of text. It’s generally recommended to set the line height between 1.4 and 1.6 times the font size.

p {
	font-size: 1rem;  /* 16px */
	line-height: 1.6; /* 25.6px */
}

Adjust Letter and Word Spacing

For users with dyslexia or cognitive disabilities, increasing letter and word spacing can improve readability. According to WCAG 1.4.12, the following minimum adjustments should be supported:

  • Line height: 1.5 times the font size
  • Spacing after paragraphs: 2 times the font size
  • Letter spacing: 0.12 times the font size
  • Word spacing: 0.16 times the font size
p {
	letter-spacing: 0.12em; /* add more space between letters */
	word-spacing: 0.16em;   /* add more space between words */
}

Guidelines for Accessible Font Sizes

Minimum Font Size

The default minimum font size for body text should be at least 1rem (16px) to ensure readability for most users. Avoid using smaller font sizes, especially for important content.

Relative Font Sizes for Headings

Headings should be significantly larger than the body text to help users navigate the content structure easily. Using relative sizes like rem ensures that headings adjust proportionally when the user increases or decreases the base font size.

h1 {
	font-size: 2.5rem; /* 40px */
}

h2 {
	font-size: 2rem; /* 32px */
}

h3 {
	font-size: 1.75rem; /* 28px */
}

Large Text and Accessibility

For large text (18pt and above or 14pt bold), the contrast requirements are relaxed. This is because larger text is generally easier to read. However, large text should still be sized using scalable units to remain responsive.

Responsive Typography in CSS

Fluid Typography Using vw (Viewport Width)

For truly responsive typography, you can use viewport units (like vw) to scale the text size relative to the width of the viewport. This technique ensures that the text adapts to different screen sizes.

h1 {
	font-size: 5vw; /* font size is 5% of the viewport width */
}

Combining rem and Media Queries

Using rem units along with media queries provides a good balance between responsive typography and user-controlled scaling.

body {
  font-size: 1rem; /* default font size */
}

@media (max-width: 768px) {
	body {
		font-size: 1.125rem; /* increase font size on small screens */
	}
}

@media (max-width: 480px) {
	body {
		font-size: 1.25rem; /* further increase font size on very small screens */
	}
}

Supporting User Preferences

  • Zoom functionality: Ensure that your website does not disable the browser's zoom functionality. Users should be able to increase or decrease the text size through their browser’s zoom or text-size settings without breaking the layout.
  • Accessible font families: Choose fonts that are easy to read. Avoid overly decorative fonts for body text and ensure that the font family you choose supports good readability across various devices.

Tools for Testing Typography

  • WAVE (Web Accessibility Evaluation Tool): WAVE can evaluate the text size and contrast on your website to ensure it meets accessibility standards. Link: https://wave.webaim.org/
  • Responsive Design Mode (Browser DevTools): Most modern browsers have responsive design modes, which allow you to test your website on various screen sizes and zoom levels. Use this to see how your typography adapts.

Common Mistakes to Avoid

  • Hardcoding font sizes: Avoid setting font sizes using px, as this can make your text non-responsive. Instead, use scalable units like rem or em.
  • Insufficient line height: Text with too little line height can be hard to read, especially for users with cognitive disabilities. Ensure your line height is at least 1.4 times the font size.
  • Fixed layouts: Avoid using fixed layouts that don’t allow content to reflow when users resize the text or screen.

Related links