A practical guide to testing font size scaling for accessibility using Figma variables. Covers why 26% of mobile users increase default font sizes, WCAG 1.4.4 compliance requiring 200% text resize support, and a 10-step workflow: designing interfaces with auto layouts, creating text styles, defining number variables for each scale (100%–200%), applying variable sets to copied screens, and identifying layout issues. Emphasizes that design systems make this process straightforward since the variable-swapping pattern mirrors light/dark mode switching. Includes a freely available Figma community file as a reference.

18m read timeFrom smashingmagazine.com
Post cover image
Table of contents
Accessibility And DesignWe Don’t Control EverythingIncrease Font SizeCompliance With GuidelinesStandardized AccessTest In FigmaThe Role Of Design SystemsExample File

Sort: