Do you use text-size-adjust in your global styles?

Recently, I stumbled upon an enigmatic CSS issue that manifested only on real mobile devices, particularly iOS Safari. Certain fonts appeared disproportionately large, disrupting the layout integrity. Trying to fix this by applying different font sizes in dev tools, and even using !important had no effect. You can see below the desired screen display and the screen I ended up seeing.

Understanding what’s going on

Upon investigating, I found out that sometimes mobile browsers dynamically adjust font sizes to enhance readability for users. The rendering behavior of mobile browsers differs from that of desktop browsers. Unlike desktop browsers, which typically render pages at the width of the device screen, mobile browsers often utilize a wider viewport, commonly set at 980px as a default, to accommodate for websites that are not optimized for smaller screens. This will inevitably lead to horizontal scroll. To counteract this, the rule below is commonly employed in HTML to ensure that the viewport scales to fit the device size accurately.

<meta name="viewport" content="width=device-width, initial-scale=1" />

However, while scaling down to fit a mobile screen, some browsers may render text too small, prompting the application of a text inflation algorithm to enlarge it for improved legibility. This algorithm sometimes leads to unexpected font enlargement, particularly noticeable when an element spanning the full width of the screen experiences text size augmentation without altering the layout. To address this behavior and maintain consistent text sizing across devices, we can utilize the CSS text-size-adjust property.

 

The text-size-adjust empowers web authors to disable or adjust this automatic text inflation behavior, particularly crucial for websites designed with small screens in mind (which I believe majority of new websites are). This property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore it. The default size adjustment affects text and form controls, whether those form controls contain text (e.g., text inputs, selects) or do not (e.g., radio buttons, checkboxes).

 

It has 3 possible values (mdn):

• auto: This value instructs renderers to utilize the default size adjustment when rendering text on small devices.
• none: Renderers are directed not to perform any size adjustment for text displayed on small devices.
• percentage[0,∞]: Renderers must not do size adjustment but instead the computed value of font-size must be multiplied by this percentage. Using 100% is equivalent to using none.

My approach to fixing this

I fixed the text inflation problem by adding this property to the body as part of our global css styles (can be added to html too). I recommend adding this rule to your global/reset/normalize css file:

body {
    // prevent font-size inflation on small devices
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

Few other considerations to keep in mind:

• Experimental nature: It’s crucial to exercise caution when implementing the text-size-adjust property in production environments, as it remains an experimental feature. Browser support and implementation may undergo changes over time.
• Definition of “small device”: There’s still ambiguity surrounding the definition of what constitutes a “small device”.
• Some people were complaining that using none will prevent zooming on mobiles, but that wasn’t the case when I tested, none and 100% worked the same as per mdn explanation.

How others use it

Several popular CSS reset/normalization libraries incorporate some variation of text-size-adjust.

• normalize.css
• The new CSS reset
• sanitize.css.

More resources

Thanks for reading! 😊 Here are additional resources if you ever feel inclined to read more about this.

• drafts.csswg.org

• webreference

• developer.apple.com