Use Legible Text Sizes - Squarespace

Use Legible Text Sizes in Squarespace

1. Open your Squarespace site and navigate to the page you want to update, then click Edit to activate inline editing.
2. Select a text element (paragraph, heading, button label, navigation item, or form text) and click Edit to open the text editor.
3. Open the Format (¶) menu or Design panel depending on the block type.
4. Review the current text size:
   • Ensure paragraph text is at least 16px.
   • Heading sizes should scale clearly above body text (e.g., H1: 32–48px, H2: 24–32px, H3: 18–24px).
   • Button labels and navigation text should be at least 14–16px.
5. Adjust text size using the Size dropdown or pixel slider until it is comfortable to read and matches site hierarchy.
6. Open Site Styles (Design → Site Styles) if your template uses global typography:
   • Adjust text sizes under Headings, Paragraphs, or Buttons.
   • These changes apply consistently across all pages.
7. Review Line Height (line spacing) for readability:
   • Paragraph text should use approximately 1.4–1.6 line height.
   • Headings can be slightly tighter.
8. Check spacing within buttons:
   • Select the button → Edit → Design.
   • Increase padding if the button becomes visually cramped after adjusting text size.
9. Switch to Mobile preview:
   • Ensure mobile text remains at least 14–16px for paragraphs.
   • Adjust mobile-specific heading sizes if your template supports them.
10. Review menu text in the header editor:
    • Open Edit Site Header.
    • Increase navigation text size if items appear too small on desktop or mobile.
11. Click Preview and scroll the full page to confirm all text reads clearly at a normal viewing distance.
12. Save and publish your changes, then test on an actual mobile device to ensure real-world legibility across all text elements.