Use Legible Text Sizes - Elementor

Use Legible Text Sizes in Elementor

1. Open your WordPress dashboard, navigate to the page you want to adjust, and click Edit with Elementor.
2. Select a text element (Heading, Text Editor, Button text, Nav Menu item, or Form label). The Elementor panel on the left will load its settings.
3. Open the Style tab, then expand Typography.
4. Check the current Font Size:
   • Set paragraph text to at least 16px.
   • Set button labels and navigation text to at least 14–16px.
   • Scale headings clearly above body text (H1: 32–48px, H2: 24–32px, H3: 18–24px).
5. Adjust the text size using the pixel slider or type a value directly to ensure comfortable readability.
6. Review Line Height:
   • Set paragraph line height to roughly 1.4–1.6 for readability.
   • Use slightly tighter line height for headings.
7. If the element uses Global Styles:
   • Click the hamburger menu in the top-left → Site Settings → Typography.
   • Adjust global text, heading, and button sizes for consistent legibility sitewide.
8. Check Buttons specifically:
   • Select the button widget → Style → Typography.
   • Ensure the text size stays readable after adjusting padding or background.
9. Check Form Fields:
   • Select the Form widget → Style → Typography / Fields.
   • Make sure labels, input text, and placeholder text meet minimum size guidelines.
10. Open Responsive Mode (bottom left icons) and switch to Tablet and Mobile.
11. Adjust Tablet and Mobile font sizes separately:
    • Ensure body text stays at least 14–16px on smaller screens.
    • Reduce heading sizes only enough to maintain hierarchy while staying readable.
12. Review the Nav Menu in mobile view:
    • Select the Nav Menu widget → Style → Dropdown.
    • Increase mobile menu item text to at least 14–16px.
13. Click Update to save changes.
14. Preview the page in a new browser tab and quickly scan it to confirm all text reads clearly without zooming on desktop, tablet, and mobile.