# Legibility and Readability
This section of our design system documentation, [inspired by Murathan Biliktü's 2023 research,](https://openresearch.ocadu.ca/id/eprint/4032/) focuses on the enhancement of legibility in user interfaces (UI) specifically for individuals with low vision conditions. Biliktü's work, "Improving Legibility of User Interfaces for Low Vision Conditions with a Crowdsource Platform", lays the foundation for Agora's approach in designing accessible and inclusive digital environments. ### **Legibility vs. Readability: Simplified Definitions** **Legibility** focuses on how easily individual characters or words are recognized. It's influenced by font size, color contrast, character shapes, tracking, and weight. **Readability** goes beyond legibility. It includes factors like line length, line spacing (leading), font familiarity, and overall text presentation. Readability is a blend of legibility and factors that make the overall text easy and comfortable to read. ### **Key Considerations** 1. **Font Choice and Size**: Select fonts that are clear and easily distinguishable at various sizes. Ensure the font size is appropriate for the content type, considering the x-height which affects overall legibility. 2. **Color and Contrast**: Utilize high-contrast color schemes that differentiate text from its background, enhancing character recognition. 3. **Line Spacing (Leading)**: Adequate line spacing is crucial. It improves text flow and readability, especially in longer texts like articles or books. 4. **Character and Line Spacing**: Balance the spacing between characters and lines. Too tight spacing can hinder readability, while too loose can disrupt visual harmony. 5. **Serif vs. Sans Serif**: The debate between serif and sans-serif fonts for legibility is ongoing. However, sans-serif fonts like Arial or Helvetica are often recommended for their clarity, especially in digital contexts. 6. **Typeface Weight and Style**: Choose typeface weights that stand out without overwhelming the text. Bold fonts can be used for emphasis, but excessive boldness can reduce reading speed. 7. **Fixed vs. Variable Width Fonts**: Consider the context of use when choosing between fixed and variable width fonts. Fixed-width fonts, like Courier, may offer advantages in certain situations. 8. **Capitalization**: Use capital letters judiciously. While they can be effective for emphasis or headings, overuse can impact reading speed. 9. **Aesthetics and Emotional Impact**: The visual style of a typeface can influence the emotional response of the reader. Choose typefaces that align with the intended message and tone. 10. **Accessibility**: Ensure that your typography choices accommodate users with visual impairments or reading difficulties, like dyslexia. ### **Implementation Strategies** **Responsive Design**: Typography must adapt seamlessly across various screen sizes and resolutions. **User Testing**: Regularly conduct user testing to gather feedback on typography effectiveness, especially from users with accessibility needs. **Continuous Improvement**: Update and refine typography choices based on evolving user needs and technological advancements.