Skip to content

Typography

Jump to bottom
Zak edited this page Apr 3, 2020 · 5 revisions

Overview

Typography (or text, fonts, etc) is used to display the most common type of content on the web. It has a direct impact on the user's experience and the accessibility of a website. Typography should provide a high degree of accessibility by default with little-to-no thought by the developer in a wide variety of applications including, but not limited to:

  • light & dark themes
  • long & short-form content

Motivation

Typography is hard. Having an accessible-by-default solution to text content in a webapp is a critical factor in the overall viability of a component library.

Ideal Experience

  • Typography automatically applies correct color from theme to maintain contrast ratios
  • Size and Style are independent of semantic tag
  • Margin Collapse is supported to provide accessible spacing with both short and long-form text
    • Requires display: block or display: inline-block on wrapping container. Should probably be addressed when we build out a Spacing System

Accessibility

  • Best Practices (WebAIM Guidance)
    • Use real text rather than text within graphics.
    • Select basic, simple, easily-readable fonts.
    • Use a limited number of fonts.
    • Ensure sufficient contrast between the text and the background.
    • Avoid small font sizes.
    • Use relative units for font size.
    • Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
    • Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
    • Avoid blinking or moving text.
  • Practical Requirements

Additional Resources

Clone this wiki locally