Rethinking Text Resizing on Web

Airbnb's efforts to improve web accessibility focused on ensuring that text remained legible when enlarged by 200% (Resize Text). Browser zoom, while effective on desktop, proved challenging on mobile devices due to the limited viewport. Airbnb opted for font scaling, which adjusts text size independently of overall page zoom. To support font scaling, Airbnb chose rem units, which scale proportionally with the font size based on the root element. This approach provided consistent text scaling without affecting other layout elements. To simplify the transition to rem units, Airbnb automated the conversion process and provided tools for designers to simulate font scaling during the design phase. Managing the conversion across two CSS-in-JS systems, React-with-Styles and Linaria, presented additional challenges. Airbnb leveraged Linaria's custom property support and post-CSS plugins to convert most font-related properties. An escape hatch was provided to allow developers to use px units when necessary. The implementation of these accessibility improvements significantly reduced the number of reported issues for Resize Text and enhanced the user experience for individuals with vision impairments. By prioritizing user needs and adopting best practices, Airbnb demonstrated its commitment to inclusive web design.