The visual appearance of an interactive element when it receives keyboard focus, which is critical for accessibility. Focus states must remain clearly visible; do not remove them without providing an equally visible replacement. A strong focus style improves usability for keyboard and assistive-technology users.

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 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.

The structured use of heading levels (H1-H6) to organize content and communicate importance to users and search engines. Proper heading hierarchy improves accessibility, SEO, and content scanability. Use only one H1 per page and don't skip levels for visual styling. See Text styles and semantic tags.

An interactive element that navigates users to another page, section, or resource when clicked. Links are the fundamental building blocks of web navigation and interconnected content. Style links consistently throughout your site with clear visual distinction from surrounding text.

CSS rules that apply different styles based on device characteristics like screen width, orientation, or resolution. Media queries enable responsive design by adapting layouts at defined breakpoints. Framer handles media queries automatically based on your breakpoint configurations.