Text Scaling Test — How It Works
Description: Checks whether text has scaled after applying 200% Zoom.
Example
In one observed case the H4, H5 and H6 headings did not scale after zoom was applied, so those elements are reported.
Action Flow
- Captures all text elements and saves them
- Applies Zoom
- Captures all text elements after Zoom
- Compares whether the fontSize of elements before and after Zoom is different and whether these elements use viewport-relative measurement units
Viewport-Relative Units
Text elements with viewport-relative units should be reported automatically. Some of these units are:
- vw
- vh
- svw
- svh
- svmin
- etc.
Although it may seem counterintuitive, viewport-relative measurement units are the ones that change their internal fontSize value when browser zoom is applied (Ctrl + "+", Ctrl + "-"). Visually, from the user's perspective, they remain unaffected by the zoom.
Out of Scope
Overwritten computed elements: e.g., if an element originally had 2.5vh and this unit is later overwritten to 1.2rem, this may generate a false positive. If there is a Missing Issue, attach a screenshot of the element's ComputedStyles showing the fontSize, so that the overwritten styles are visible.
Website https://garyvaynerchuk.com
On this website, the heading "Legacy is greater than currency." appears not to scale, which could be interpreted as a Missing Issue. However, when checking the font size of the element before and after, it is confirmed that it does scale.
To confirm that the font scales, a red rectangle the size of a letter was placed and overlaid on the heading. In this same case, although the styles are overwritten several times, it is not a Missing Issue — the element is correctly ignored. The scale difference in the heading is just a few pixels.