Readability

Readability describes how comfortably users can consume written content, influenced by typography, line length, spacing, and visual contrast.

Related terms

Related terms

  • Color Contrast

    Accessibility

    The difference in luminance between foreground and background colors, critical for text readability and accessibility. WCAG guidelines require minimum contrast ratios of 4.5:1 for normal text and 3:1 for large text. Use contrast checking tools to ensure your color combinations are accessible to users with visual impairments. See Understanding contrast ratio.

  • Font

    Typography

    A specific style and weight within a typeface family, like Inter Bold or Helvetica Light Italic. Choosing appropriate fonts affects readability, brand perception, and page performance. Framer provides access to Google Fonts and supports custom font uploads for complete typographic control.

  • Letter Spacing

    Typography

    The uniform adjustment of space between all characters in a word or block of text, also called tracking. Increased letter spacing can improve readability for uppercase text and small sizes. Avoid negative letter spacing in body text as it impairs readability.

  • Line Height

    Typography

    The vertical space allocated to each line of text, affecting readability and overall text block appearance. Proper line height prevents cramped or overly loose text—typically 1.4-1.6 for body copy. Adjust line height proportionally with font size for consistent rhythm.

  • Padding

    Layout

    The space inside an element, between its content and border. Padding improves readability and visual balance by creating internal breathing room. Consistent padding values help maintain a coherent design system.

  • Text Effects

    Framer

    Visual enhancements applied to text including shadows, gradients, outlines, and animations. Text effects can add personality and emphasis but should maintain readability. Use effects sparingly and test at various sizes and backgrounds.