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.

A library of free, open-source web fonts hosted by Google with global CDN delivery for fast loading. Google Fonts simplifies typography with easy embedding and wide browser support. Framer integrates Google Fonts directly, making them available without additional configuration.

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.

Written content displayed on web pages, the primary means of communicating information to visitors. Quality text content is essential for engagement, SEO, and accessibility. Structure text with headings, short paragraphs, and scannable formatting.

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.

A font loaded from the web rather than installed locally, ensuring consistent typography for all visitors. Web fonts expand typographic options beyond system fonts but add loading time. Framer provides Google Fonts integration and supports custom font uploads for brand fonts.

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 adjustment of space between individual letter pairs to achieve visually balanced text, particularly important in headlines and logos. Poor kerning creates awkward gaps or collisions that undermine professional appearance. Pay special attention to problematic pairs like AV, To, and We where mechanical spacing looks wrong.

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.

The invisible line where the bottom of most letters sit, used as a reference point for aligning text and maintaining vertical rhythm. Baseline alignment ensures multiple text elements appear visually connected even at different sizes. Understanding baselines helps create polished typography in multi-column layouts.