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.

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.

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.

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.

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.

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.

The art and technique of arranging text for readability, legibility, and visual appeal. Good typography guides readers through content while reinforcing brand personality. Study typography fundamentals—font choice, sizing, spacing, and hierarchy—to elevate all your designs.

Empty space in a design that provides visual breathing room and separation between elements. Whitespace improves readability, focus, and perceived quality of designs. Resist filling every available space—whitespace is an active design element.

A family of fonts sharing consistent design characteristics, such as Helvetica or Inter, containing multiple weights and styles. Choose typefaces that reflect brand personality while maintaining readability. Limit to 2-3 typefaces per project for cohesion.

The vertical spacing between lines of text, measured from baseline to baseline and also known as line-height in CSS. Proper leading improves readability—too tight feels cramped while too loose breaks visual connection between lines. Generally, set leading between 1.4 and 1.6 times the font size for body text.

The height of lowercase letters in a typeface, measured using the letter ‘x’, affecting perceived size and readability. Fonts with larger x-heights appear larger and more readable at small sizes. Consider x-height when selecting fonts for body text.

A Descender is a typographic stroke extending below the baseline in letters such as g, p, and y, affecting line spacing and readability.