Add a Accessibility Font Size Adjuster for Squarespace

6 May

Written By JC Pass

Try it by clicking the icon above

Is This Free to Use?

Personal use is free forever.
If you’re using this tool/game on your own blog, portfolio, or personal Squarespace site, you don’t need to pay — enjoy it freely.

Commercial use requires a one-time license.
If you’re a developer, agency, or using this on a client project or monetized site, please purchase a commercial license. It helps support ongoing development and gives you peace of mind.

One-time cost: £49.99 (normally £79.99)
Covers unlimited client sites, all current tools, and future updates.

👉 Learn more or buy a lic ense here

Disclaimer

This script is provided as-is with no guarantees. While it's designed to be safe for most Squarespace sites, always test changes before going live — especially if you’ve installed third-party plugins, custom fonts, or heavy integrations. By using this code, you accept that we are not liable for any unexpected behavior or performance changes.

Give your readers full control over readability — no coding, no plugin, just a simple button they can click to adjust the text size sitewide.

What It Does

This tool adds a custom button to your Squarespace site that reveals a small, accessible menu. Visitors can choose between:

🅰 Default font size
🅰 Large font size (ideal for casual reading or visual fatigue)
🅰 Extra large font size for maximum legibility

Selections are saved in the visitor’s browser, so their preferred font size will stick around next time they visit.

The button can be placed anywhere on your page — header, footer, sidebar, inline — and is fully customizable to match your branding.

How to Use It

Simply click the copy code button and paste into a code block, you can add this feature to any page or add it to you sites footer for it to apply globally.

<div class="font-size-menu">
  <button class="font-size-toggle" aria-label="Font Size Menu">A</button>
  <div class="tooltip">Font Size Options</div>
  <div class="font-size-options">
    <button data-size="100%">Default Font Size</button>
    <button data-size="112.5%">Large Font Size</button>
    <button data-size="125%">Extra Large Font Size</button>
  </div>
</div>

.font-size-toggle {
    background: #222;
    color: #fff;
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }

.font-size-menu .tooltip {
    position: absolute;
    bottom: 125%;
    left: 0;
    background: #333;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    display: none;
    transform: translateY(-0.3rem);
  }

.font-size-menu:hover .tooltip {
    display: block;
  }

.font-size-options {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    min-width: 160px;
  }

.font-size-options button {
    display: block;
    width: 100%;
    padding: 0.4rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    color: #222;
    cursor: pointer;
  }

.font-size-options button:hover {
    background-color: #f0f0f0;
  }

.font-size-options button.selected {
    font-weight: bold;
    color: #000;
    background-color: #e6f7ff;
  }

.font-size-options button::after {
    content: '';
    float: right;
    font-weight: bold;
  }

.font-size-options button.selected::after {
    content: '✓';
    color: #0077cc;
  }
</style>

function setFontSize(size) {
      document.documentElement.style.fontSize = size;
      localStorage.setItem('sp-font-size', size);
      updateSelected(size);
    }

toggleBtn.addEventListener('click', () => {
      options.style.display = options.style.display === 'block' ? 'none' : 'block';
    });

sizeBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const size = btn.getAttribute('data-size');
        setFontSize(size);
        options.style.display = 'none';
      });
    });

// On load: apply saved or default size
    const saved = localStorage.getItem('sp-font-size') || '100%';
    document.documentElement.style.fontSize = saved;
    updateSelected(saved);

// Close menu if clicked outside
    document.addEventListener('click', (e) => {
      if (!wrapper.contains(e.target)) {
        options.style.display = 'none';
      }
    });
  })();
</script>

Why It Matters

Font size is one of the biggest barriers to accessibility for readers with low vision, reading fatigue, or dyslexia. By giving users control over text size, you're improving readability without compromising your layout or design.

Unlike browser zoom (which can break page formatting), this tool respects your site’s layout and scales text using rem units — the proper, semantic way to scale typography on the web.

JC Pass

JC Pass is a specialist in social and political psychology who merges academic insight with cultural critique. With an MSc in Applied Social and Political Psychology and a BSc in Psychology, JC explores how power, identity, and influence shape everything from global politics to gaming culture. Their work spans political commentary, video game psychology, LGBTQIA+ allyship, and media analysis, all with a focus on how narratives, systems, and social forces affect real lives.

JC’s writing moves fluidly between the academic and the accessible, offering sharp, psychologically grounded takes on world leaders, fictional characters, player behaviour, and the mechanics of resilience in turbulent times. They also create resources for psychology students, making complex theory feel usable, relevant, and real.

https://SimplyPutPsych.co.uk/