To higher perceive the accessibility problem, allow us to discover how browser zoom performance works. You could already be accustomed to this function, utilizing keyboard shortcuts like Command / Ctrl + or Command / Ctrl — to scale all content material inside a window. Once you enhance the zoom degree past 100%, the viewport’s top and width proportionally lower, whereas the content material is blown as much as match the bigger window.
As a part of our accessibility testing technique, we had been utilizing browser zoom to check the usability of our pages each on desktop and cell sizes. Desktop testing confirmed that our pages did comparatively properly on the 200% zoom degree with our responsive internet method throughout the positioning. We noticed fewer points within the general consumer expertise when in comparison with cell internet.
This works properly on desktop, the place we serve a smaller breakpoint (e.g., broad to compact) and the viewport is comparatively spacious. Nevertheless, the restrictions of browser zoom turn out to be extra pronounced on cell internet, the place the viewport is smaller. If we had been to scale the content material in a cell viewport, it must match right into a viewport that’s half the width and half the peak of the unique. This can lead to vital accessibility points, because the textual content and UI parts turn out to be extraordinarily troublesome to learn and work together with. As proven within the picture on the appropriate, the power to view even a single itemizing inside a display’s value of house isn’t doable with out scrolling, resulting in a irritating expertise.
Font scaling is the time period we’ll use to explain the power to regulate textual content measurement independently of general web page zoom. Not like browser zoom, which scales all content material proportionally, Font Scaling applies solely to the textual content parts on the web page. This permits customers to customise the font measurement to their most popular studying measurement with out affecting a lot of structure or responsiveness of the remainder of the content material.
Font Scaling, can be the time period we’ll use for scaling the font primarily based on a consumer’s most popular measurement. Not like zoom, this setting can be utilized to all websites. Under is an instance of how the font scaling applies to only the textual content on the display, exhibiting that the one scale of the textual content will increase, as an alternative of all of the content material.
Video Description: Airbnb textual content is scaled by setting the font measurement on arc browser, exhibiting the scaling from 16px to 32xp.
This idea of unbiased font scaling is just like the Dynamic Sort function on iOS, as we mentioned in our weblog submit “Supporting Dynamic Sort at Airbnb”. Dynamic Sort permits customers to set a most popular system-wide textual content measurement, which then mechanically adjusts the font measurement throughout all appropriate apps.
Contemplating our present methods for accessibility on iOS, incorporating font scaling (vs zoom scaling) into our internet accessibility method was a pure subsequent step to assist add parity in approaches throughout our platforms.
Now that we perceive why font scaling is so highly effective for cell internet, we must always concentrate on why we would select one CSS size unit over one other for supporting font scaling. On this weblog submit we’re solely going to concentrate on px, em and rem however there are different models as properly. CSS size models are linked to font scaling as a result of they decide how textual content and different parts are sized on an online web page. Some size models are fastened, that means they don’t change primarily based on the consumer’s font measurement settings, whereas others are relative, that means they scale proportionally with the font measurement.
Let’s take a deep take a look at 3 CSS size models and the way they relate to font scaling:
- px models are probably the most generally used on the net, theoretically they need to characterize one pixel on the display. They’re a hard and fast unit that means the rendered worth doesn’t change.
- em models nonetheless are a relative unit which are primarily based on the father or mother factor’s font measurement. The title ‘em’ comes from the width of the capital letter ‘M’ in a given typeface, which was historically used because the reference level for font sizes. 1 em unit is the same as the peak of the present font measurement, roughly 16px on the default worth. em models scale proportionally, to allow them to be affected by their father or mother’s font sizes
- rem models, brief for “root em”, are just like em models in that they’re proportional to font measurement, however they solely use the basis factor (the html factor) to calculate their font measurement. Because of this rem models supply font scaling, however usually are not affected by their father or mother’s font measurement.
The selection between em and rem models usually comes right down to the extent of management and predictability required for font scaling. Whereas em models can be utilized, they’ll result in cascading font measurement adjustments which may be troublesome to handle, particularly in complicated layouts. In distinction, rem models present a extra constant and predictable method to font scaling, as they’re all the time relative to the basis factor’s font measurement.
That is illustrated within the CodePen instance, the place the completely different font scaling behaviors of px, em, and rem models are demonstrated. In conditions the place font scaling is a crucial requirement, such because the Airbnb instance talked about, using rem models is usually a extra dependable selection to make sure a constant and maintainable font scaling answer.
Relative models like rem can be utilized wherever a hard and fast unit like px can be utilized. Nevertheless, indiscriminate use of rem models throughout all properties can result in undesirable scaling habits and elevated complexity.
Within the case of Airbnb, the workforce determined to prioritize using rem models particularly for font scaling, slightly than scaling all parts proportionally. This focused method supplied the important thing good thing about constant textual content scaling, with out the potential downsides of scaling each facet of the structure.
The rationale behind this determination was twofold:
- Scaling the whole lot utilizing rem models would have been just like Browser Zoom and doubtlessly launched unintended structure points,
- The first focus was on offering a mobile-friendly font scaling answer. By concentrating on font sizes with rem models, the workforce may be certain that an important content material — the textual content — scaled appropriately.
Shifting from pixel-based values to rem models as a company-wide change in CSS observe is usually a vital problem, particularly when working throughout a number of groups. The effort and time required to teach designers and frontend builders on the brand new method, and to have them convert their present pixel-based values to rem models, is usually a vital barrier to adoption. To deal with this, the Airbnb workforce determined to concentrate on automating the unit conversion course of as a lot as doable, enabling a extra seamless transition to the brand new rem-based system.
As an alternative of requiring designers to have to consider new models or introduce some conversion for internet solely, we determined to proceed to creator our CSS in px models. This decreased the quantity of coaching required for groups to begin utilizing rem models out the gate.
One space we did concentrate on with our design groups was beginning to check their designs utilizing font scaling by leveraging the Text Resizer — Accessibility Checker to assist simulate what a design would possibly seem like at 2X the font measurement. This software helped us spot issues earlier into the design course of.
Airbnb is within the means of transitioning from React-with-Styles to a more recent method utilizing Linaria. Whereas the adoption of Linaria was progressing rapidly, we acknowledged the necessity to help each styling methods for a constant expertise. Managing the conversion throughout these two completely different CSS-in-JS methods posed a further problem.
Linaria
By leveraging Linaria’s help for CSS customized properties, the workforce was capable of create new typography theme values that mechanically transformed the prevailing pixel-based values to their rem equivalents. This method allowed the workforce to introduce the brand new rem-based theme values in a centralized method, making them accessible to little one parts. This gave the workforce the power to override the rem values on a per-page foundation, offering the required flexibility in the course of the transition course of.
import typography from './site-theme';// Loops by the CSS Vars we use for typography and converts them
// from px to rem models.
const theme: css`
$getCssVariables( typography: replacePxWithREMs(typography) )
// Modifications from:
// - body-font-size: 16px;
// To
// - body-font-size: 1rem;
`;
// Use the category title generated from linaria to override the theme
// variables for the kids of this element.
const RemThemeLocalProvider: React.FC = ( youngsters ) =>
const cx = useCx();
return <div className=linariaClassNames.theme)>youngsters</div>;
;ty
Though this method helped us convert many of the font scaling properties, there have been many locations in our code that we used pxbased values outdoors the theme. Linaria’s help for post-CSS plugins made fixing these areas comparatively simple. We leveraged postcss-pxtorem to assist goal these values extra simply. We began by utilizing an permit record, in order that we may rigorously apply this transformation to a smaller set of early adopting pages.
It was necessary that we supplied an escape hatch when there was some purpose for front-end engineers needing to make use of px models. Fortunately we had been capable of present this by utilizing a distinct casing for the px worth like proven beneath.
/* `px` is transformed to `rem` */
.convert
font-size: 16px; /* transformed to 1rem */
/* `Px` or `PX` is ignored by `postcss-pxtorem`
however nonetheless accepted by browsers */
.ignore
font-size: 200Px;
font-size: clamp(16Px, 2rem, 32Px);
React with Kinds
A great quantity of our frontend code nonetheless makes use of react-with-styles, so we needed to discover one other strategy to help these instances with a straightforward conversion. By this we created a easy Greater-Order element that made the conversion fairly simple. First we created a wrapper for the withStyles operate like beneath, and gave the power to keep away from conversion as properly.
export const withRemStyles = (
styleFn?: Nullable<(theme: Theme) => Kinds>,
choices?: WithStylesOptions & disableConvertToRemUnits?: boolean ,
) =>
const disableConvertToRemUnits = getDisableConvertToRemUnits(choices);
// If conversion is disabled, simply return the unique withStyles operate
if (disableConvertToRemUnits)
return _withStyles(styleFn, choices);
// In any other case, wrap the unique model operate with a brand new operate
// that converts px to rem
return _withStyles((theme: Theme) =>
if (styleFn)
const types = styleFn(theme);
const remStyles = convertToRem(types);
return remStyles;
return ;
, choices);
;
Then the convertToRem will look by the keys and values and map a transformed worth for any of the font sizing attributes. This allowed us to automate the conversion course of in a extra simple method.
With these two challenges out of the best way, we are able to begin testing our parts to confirm if there are any main points we would must resolve earlier than rolling out. In our element documentation and tooling, we constructed an inner plugin to permit for simpler testing by setting the font-size on the html factor immediately to check with font scaling.
Screenshot testing has helped our groups catch visible regressions. Including help to permit for setting further screenshots at completely different root font sizes has helped our product groups overview what the element appears like at completely different font scales. To do that, we permit for including further font sizes to be set when capturing the screenshots so that you don’t need to create new element variations only for font scaling.
Supporting font scaling for Cellular Safari was tougher. Not like different browsers, there may be not a font measurement desire accessible in Cellular Safari. Nevertheless, they’ve launched help for their very own font: -apple-system-body however there are some necessary concerns.
Since macOS Excessive Sierra (10.13), desktop Safari additionally helps the font desire, however there may be not a straightforward “font measurement” configuration accessible in MacOS. As a result of there may be surprising habits on desktop Safari, so we used a @helps assertion to forestall this. The code beneath will solely goal Cellular Safari.
// Apple's Dynamic Sort requires this font household for use
// Solely goal iOS/iPadOS
@helps (font: -apple-system-body) and (-webkit-touch-callout: default)
:root
font: -apple-system-body;
One other consideration is that the “100%” default font measurement chosen doesn’t equal the usual font measurement of 16px, however slightly 17px. It is a very refined distinction, however it’s crucial for the design high quality bar we intention to attain at Airbnb. So to resolve this situation, we ended up utilizing an inline head script to normalize the worth, by inserting it early into the web page execution we averted seeing a change in font measurement.
(() =>
// do not do something if the browser does not match the helps assertion
if (!CSS.helps('(font: -apple-system-body) and (-webkit-touch-callout: default)')) return;
// Should create a component for the reason that root factor types usually are not but parsed.
const div = doc.createElement('div');
div.setAttribute('model', 'font: -apple-system-body');
// Physique isn't accessible but so this must be added to the basis factor
documentElement.appendChild(div);
const model = getComputedStyle(div);
if (model.fontSize === '17px')
documentElement.model.setProperty('font-size', '16px');
documentElement.removeChild(div);
)();
Then when the web page hundreds we use a resize observer to detect if the worth adjustments once more to unset or set the font-size property on the html factor. This helps us nonetheless help scalable fonts, however not have a big affect on the default font measurement (100%).
Supporting scalable fonts is an funding that ought to make a dramatic distinction for our Hosts and visitors with”with low imaginative and prescient and anybody who advantages from bigger font sizes and management over their looking expertise. Under are two examples of the house web page exhibiting how the default font measurement (16px) seems to somebody who has blurry imaginative and prescient and what it appears like by doubling the font measurement (32px). The second picture is way extra legible and usable.
