A variable font containing multiple weights, widths, or styles in a single file, enabling smooth interpolation between values. Variable fonts reduce file downloads while offering greater typographic flexibility. Use variable fonts for performance benefits and fluid typography that responds to user preferences.

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.

A saved combination of font, size, weight, spacing, and color settings that can be applied consistently to text elements. Text styles ensure typographic consistency and make global updates efficient—change the style, update all instances. Build a systematic hierarchy with styles for headings, body, captions, and other text types.

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.

Cascading Style Sheets—the styling language that controls how HTML elements appear, including colors, fonts, spacing, and layouts. While Framer generates CSS automatically from your visual designs, understanding CSS concepts helps you troubleshoot issues and leverage advanced features. Custom CSS can be added through code components or overrides when needed.

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 Font Family is a grouped collection of type styles and weights designed with consistent visual DNA for cohesive typography systems.

Midline is a typographic reference line that aligns the tops of short lowercase letters and helps define x-height proportion.

Points are a standard unit in typography for sizing text and related spacing, where 1 point equals 1/72 of an inch.

In Framer, font subsetting can improve page speed by minimizing font downloads while preserving the typography needed for the published site.