Readability Notes

A well-designed website is not just about aesthetics; it’s about creating an engaging and accessible user experience. A key aspect of this is readability. Here are some fundamental principles and techniques to ensure your website is easy on the eyes and enjoyable to navigate.

Typography and Font Selection

Choose the Right Font: Opt for clear, legible fonts like sans-serif typefaces like Arial, Helvetica, or sans-serif system fonts. Avoid overly decorative or script fonts that can be difficult to read.
Font Size and Line Height: Ensure sufficient font size and line height to enhance readability. Aim for a comfortable reading experience, especially on smaller screens.
Letter Spacing: Adjust letter spacing (tracking) to optimize word spacing and improve readability.
Font Weight: Use a balance of bold and regular weights to create visual hierarchy and emphasize important information.

Color and Contrast

High Contrast: Ensure sufficient contrast between text and background colors to improve readability.
Color Palette: Choose a color palette that is not only visually appealing but also accessible to users with color vision deficiencies.
Background Color: Avoid using high-contrast backgrounds that can strain the eyes. Opt for neutral colors or subtle gradients.

Color and Contrast

High Emphasis Text: This text uses a hex value #000000 at 87% opacity.
Default Color Helper: This text uses a hex value #000000 at 60% opacity.
Error Helper Text: This text uses a hex value #B00020 at 100% opacity.

Example of Dynamic Color Scheme with CSS:

article {
  --red: 230;
  --green: 230;
  --blue: 230;
  --aa-brightness: calc(
    ((var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114)) / 1000
  );
  --aa-color: calc((var(--aa-brightness) - 128) * -1000);
  background: rgb(var(--red), var(--green), var(--blue));
  color: rgb(var(--aa-color), var(--aa-color), var(--aa-color));
}

Layout and Structure

Clear Hierarchy: Use headings and subheadings to organize content and guide the reader’s eye.
Visual Hierarchy: Employ visual cues like font size, color, and spacing to prioritize information.
Whitespace: Utilize whitespace effectively to create a clean and uncluttered layout.
Responsive Design: Ensure your website adapts to different screen sizes and devices for optimal readability.

@include fluid-type("font-size", 50rem, 80rem, 1.296rem, 3.998rem);
@include fluid-type("font-size", 50rem, 80rem, 1.215rem, 2.827rem);
@include fluid-type("font-size", 50rem, 80rem, 1.138rem, 1.999rem);
@include fluid-type("font-size", 50rem, 80rem, 1.067rem, 1.414rem);
@include fluid-type("font-size", 50rem, 80rem, 1rem, 1rem);
@include fluid-type("font-size", 50rem, 80rem, 0.937rem, 0.707rem);

Code Example: Implementing a Dark Mode

html

<!doctype html>
<html>
  <head>
    <title>Readability Example</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button id="toggle-theme">Toggle Theme</button>
    <script>
      const toggleThemeButton = document.getElementById("toggle-theme");
      const body = document.body;

      toggleThemeButton.addEventListener("click", () => {
        body.classList.toggle("dark-mode");
      });
    </script>
  </body>
</html>

css

/* style.css */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

.dark-mode {
  color: #fff;
  background-color: #333;
}

javascript

const btn = document.querySelector(".btn-toggle");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem("theme");

if (currentTheme == "dark") {
  document.body.classList.toggle("dark-mode");
} else if (currentTheme == "light") {
  document.body.classList.toggle("light-mode");
}

btn.addEventListener("click", function () {
  if (prefersDarkScheme.matches) {
    document.body.classList.toggle("light-mode");
    var theme = document.body.classList.contains("light-mode")
      ? "light"
      : "dark";
  } else {
    document.body.classList.toggle("dark-mode");
    var theme = document.body.classList.contains("dark-mode")
      ? "dark"
      : "light";
  }
  localStorage.setItem("theme", theme);
});

This script checks the user’s OS-level theme preference and allows for toggling between light and dark modes, saving the user’s preference in localStorage.

Additional Considerations:

Readability Testing Tools: Use tools like Lighthouse or WebPageTest to analyze your website’s performance and accessibility.
User Testing: Conduct user testing to gather feedback on readability and usability.
Regular Review: Periodically review your website’s design and content to ensure continued readability and user satisfaction.

By following these guidelines and incorporating best practices, you can create websites that are not only visually appealing but also highly readable and user-friendly.

Resources