Use Legible Text Sizes - Webflow

Use Legible Text Sizes in Webflow

1. Open your Webflow project and navigate to a page containing the text elements you want to review.
2. Select a text element on the canvas (e.g., paragraph, heading, link, button label).
3. Open the Style panel and locate the Typography section.
4. Check the Font Size value:
   • Ensure body text is at least 16px.
   • Large text for headings should scale appropriately: H2 generally 28–36px, H3 20–28px, depending on design.
   • Button and UI text should be no smaller than 14–16px.
5. Increase the font size by clicking the size field and typing the new value or using the up arrow until the text is comfortably readable.
6. Check the Line Height setting to ensure readability. Set it between 1.4–1.6 for paragraphs and slightly tighter for headings if needed.
7. Review text styles applied via Global Classes (e.g., Body, Paragraph, Heading classes). Update the class once to apply consistent sizing across the site.
8. Switch between breakpoints (desktop, tablet, mobile landscape, mobile portrait) and ensure text sizes remain legible on smaller screens:
   • Adjust lower breakpoints individually by selecting them and updating font size per breakpoint.
9. Check buttons, link blocks, and navigation items for small or compressed text. Increase size or adjust padding so text remains readable and uncluttered.
10. Enter Preview mode and scroll through the full page to verify that all content remains easy to read and consistent in hierarchy.
11. Publish the site and review it on an actual mobile device to confirm real-world readability and comfort across screen sizes.