Text balance
In Framer, balanced text can make headlines and supporting copy feel more intentional across screen sizes by reducing awkward single-word lines.
Form
Components
An interactive element that collects user input through fields like text boxes, dropdowns, and checkboxes. Well-designed forms balance collecting necessary information with respecting user time and effort. Keep forms short, use clear labels, provide helpful validation messages, and consider progressive disclosure for complex forms.
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.
Text
Typography
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.
Kerning
Typography
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.
X-Height
Typography
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.
Baseline
Typography
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.