People with visual impairments may access websites by enlarging the text using the browser’s magnification function or custom CSS, but if the site does not respond properly, the layout will be disrupted. Airbnb’s company blog explains how to accommodate text size changes while maintaining the layout.
Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium
https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881
Here’s what an Airbnb page looks like to someone with severely impaired eyesight: It’s very difficult to read what’s written on it.
The browser has a zoom feature that can be accessed from the menu or by using the shortcut ‘Ctrl + +’ to zoom in and out on the content of any page.
You can use the service without any problems using the zoom function on devices with a large display area, such as desktop PCs. However, on mobile devices, zooming up to 200% causes the headers and footers to become larger, cutting the area available for the viewport in half, making browsing comfortable.
That’s where font scaling comes in. Some browsers, like
Arc , have the ability to change the size of fonts, which allows you to scale only the text elements, as opposed to zooming, which scales the entire content of the page.
When dealing with font scaling, we need to distinguish between elements that should scale when the font size changes, and elements that should remain a constant size regardless of the font size. In CSS, the distinction between these two settings is made by units such as ‘px’, ’em’, and ‘rem’.
‘px’ is a unit that represents one pixel on the screen, and content whose size is specified in px units will always be rendered at a constant size. ‘rem’ and ’em’ are both units that specify a size relative to the font size. The image below shows an example of specifying a size in each of the three units, with the font size initially set to 16px.
When the font size is increased to 20px, elements whose size was specified in ‘px’ units do not change, but elements whose size was specified in ‘rem’ and ’em’ become larger to match the font size. Because ‘rem’ is a size relative to the font size of the html element, even if you overlap an element with ‘0.5rem’, it will be displayed at the same size, but because ’em’ is a size relative to the parent font size, if you overlap ‘0.5em’, the final display size will be multiplied and will become smaller and smaller.
The rem unit is always based on the font size of the root html element, which makes it more consistent and predictable even in complex layouts. Airbnb decided to use ‘rem’ instead of ’em’, and to use ‘rem’ only when changing the font size, so that the layout is maintained while only the font size is changed.
Airbnb is in the process of migrating their CSS-in-JS system from
react-with-styles to Linaria , and they needed to write code that works with both tools. Linaria introduced a new theme that automatically converts existing pixel-based values to rem, as shown below, allowing users to override rem values on a page-by-page basis.
For parts where you still want to specify in px units, they state that this can be addressed by using capital ‘Px’.
To address this issue with react-with-styles, they have prepared a wrapper for the withStyles function that gives the ability to avoid conversion and assigns the rem value that is automatically converted to the font size.
We also used
Text Resizer to check how the text would look when the font size was changed, and made adjustments to create a layout that maintained readability even when the font size was doubled.
