How to Test Font Scaling for Accessibility Using Figma Variables

Introduction

Testing font scaling is a critical part of ensuring your digital products are accessible to all users, especially those who rely on text resizing or zooming features. Figma variables offer a powerful way to manage typography consistently and test how well your design adapts when font sizes are increased. This guide walks you through a practical, step-by-step process to set up and test font scaling with Figma variables, so you can catch accessibility issues early and build more inclusive interfaces.

What You Need

• A Figma account (free or professional) with access to the Variables feature (available in 2023 and later).
• A design file that contains at least one text layer or typography system.
• Basic familiarity with Figma’s interface, including styles, components, and prototyping.
• Understanding of WCAG 2.1 Success Criterion 1.4.4 (Resize Text) – text should scale up to 200% without loss of content or functionality.
• Optional: a browser plugin or tool to simulate high-zoom conditions (e.g., Zoom Text Only extension).

Step-by-Step Guide

1. Step 1: Create Typography Variables

   Open your Figma file and navigate to the Local variables panel (found in the right sidebar or via the Actions menu). Create a new variable collection named something like Typography Scale. Within that collection, add variables for each font size you plan to use – for example, body, h1, h2, caption. Set each variable’s type to Number and assign pixel values that match your design system. For accessibility, ensure your smallest readable size is at least 12px (though 16px is recommended for body text).

2. Step 2: Apply Variables to Text Styles

   Go to the Text styles panel and create or edit your existing styles. For each style, instead of using a fixed font size, bind the size property to the corresponding variable you created. For instance, select the body style and in the font size field, click the variable icon and choose Typography Scale.body. Repeat for all text styles (headings, captions, etc.). This makes your typography dynamic and testable.

3. Step 3: Define a Scaling Factor Variable

   Create another variable called Scale Factor in a separate collection (e.g., Accessibility Tests). Set its type to Number with a default value of 1 (representing 100% scale). This variable will be used to multiply your base font sizes when testing scaling.

4. Step 4: Build a Scaling Calculation

   Now you need a way to multiply every typography variable by the scale factor. Figma variables don’t support mathematical expressions directly, but you can create a set of computed variables. For each base font size variable (e.g., body), create a corresponding `body-scaled` variable. Set its value to body * Scale Factor using Figma’s variable expression syntax (you can type * {{Scale Factor}} in the value field). Do this for every size you have. If your Figma version doesn’t support multiplication, you can manually create alternative values at 100%, 150%, and 200% scale as separate variables.

5. Step 5: Swap Text Styles to Use Scaled Variables

   Update your text styles again to point to the scaled variables (e.g., body-scaled) instead of the base ones. This ensures that when you change the Scale Factor variable, all text that uses those styles will resize accordingly. For components, make sure any overridden text uses the variable-binding as well.

   

6. Step 6: Test with Different Scale Factors

   Go to the Variables panel and change the Scale Factor value from 1 to 1.25 (125%), 1.5 (150%), and 2 (200%). Observe how your design behaves. Look for:

   • Text clipping or overflow outside containers.
   • Content being hidden or truncated.
   • Layout breaking – elements overlapping or misaligning.
   • Loss of readability at larger sizes (e.g., line spacing too tight).

   Take screenshots or use Figma’s Prototype mode to simulate user interaction at each scale.

7. Step 7: Adjust Design to Pass Accessibility Checks

   Based on your observations, update your layout to accommodate scaling. This may involve:

   • Increasing container heights to allow text to grow.
   • Switching from fixed widths to flexible (e.g., using Auto layout with padding).
   • Using relative units (em or rem equivalent in Figma via variables).
   • Ensuring resizing doesn’t hide interactive elements like buttons or links.

   Re-test by changing the Scale Factor again until all text remains legible and functional up to 200%.

8. Step 8: Document and Share Results

   Create a testing report in your design file – use a frame with annotations showing the behaviour at each scale. Share this with developers and product managers so they understand the required responsiveness. Export a set of mockups at 200% scale to serve as a reference for engineering.

Tips for Success

• Start small – focus on one core screen or flow before scaling the whole design system.
• Use real content – test with actual text length; dummy text often fails to reveal overflow issues.
• Combine with color contrast testing – font scaling can affect readability when coupled with low contrast. Use Figma plugins like Stark to check contrast at each scale.
• Involve developers early – share your variable structure so they can mirror it in code (e.g., using CSS custom properties with a scale factor).
• Consider line-height and letter-spacing – these should also scale proportionally. Create companion variables for these properties or ensure your design system includes them.
• Remember that zoom is not the same as font scaling – users may zoom the whole page (200% zoom) or just increase text size. Test both scenarios if possible.
• Iterate based on user testing – automated tests are great, but real users with low vision will reveal nuances your variables might miss.