Use Legible Text Sizes - Framer

Use Legible Text Sizes in Framer

1. Open your project in Framer and navigate to the page where you want to verify text sizing.
2. Select a text element (paragraph, heading, button label, link, or field label). The right-hand properties panel will appear.
3. Open the Text section and check the current Font Size.
4. Adjust the size to meet accessibility guidelines:
   • Paragraph text: at least 16px
   • Buttons and navigation: 14–16px minimum
   • Headings: scale clearly above body text (H1 ~ 32–48px, H2 ~ 24–32px, H3 ~ 18–24px)
5. Check Line Height (line spacing):
   • Set paragraphs to roughly 1.4–1.6 to maintain readability,
   • Use slightly tighter spacing for headings.
6. For Buttons:
   • Select the button → adjust Text Size under the Text section,
   • Increase padding in the Design panel if a bigger text size needs more space.
7. For Navigation Links:
   • Select the nav item → adjust Font Size under the Text controls,
   • Verify the size remains readable in collapsed mobile menus.
8. For Form Fields:
   • Select each input → open Text,
   • Ensure labels, input text, and placeholders meet minimum size requirements.
9. If using Text Styles or Global Styles:
   • Open the top bar → Fonts & Colors,
   • Update your global typography scale so headings, body text, and buttons follow a consistent, accessible hierarchy.
10. Switch to each breakpoint (Tablet, Mobile) using the top bar:
    • Adjust text sizes specifically for smaller screens to maintain readability,
    • Ensure no text shrinks below 14–16px on mobile.
11. Review layout after resizing:
    • Check that larger text doesn’t overflow or clip inside Auto Layout frames,
    • Adjust padding or frame constraints if needed.
12. Enter Preview mode and scan your page at normal viewing size to confirm readability across all sections.
13. Publish or update your project once text sizes across all breakpoints meet legibility standards.