The CSS text-size-adjust Property

Overview

The text-size-adjust property allows control over the text inflation algorithm applied by some mobile browsers on small screens. This algorithm enlarges text to enhance readability, but its default behavior may not be ideal for web pages designed with small devices in mind.

Note: The W3C Editor's Draft states that a more specific definition of "small device" is needed.

Examples and Usage

Due to the experimental nature of this property and its varying behavior across browsers, it's crucial to exercise caution if it's used in production to prevent unexpected problems.

With that in mind, here's a reference example of using relevant vendor prefixes:

/* Firefox */
-moz-text-size-adjust: /* value */;

/* WebKit (Safari, Chrome, etc.) */
-webkit-text-size-adjust: /* value */;

/* Edge */
-ms-text-size-adjust: /* value */;

Specific use cases can be found in the Useful Resources section from tried and tested approaches.

Values

The text-size-adjust property can accept the following values:

Value	Description
`none`	Disables the browser's text inflation algorithm.
`auto`	Allows usage of the inflation algorithm on the element; cancels a previously set `none` value.
`<percentage>`	Similar to `auto`, but the percentage value specifies the increase rate for the font size.

Tips and Considerations

Due to its experimental status, be cautious when using the text-size-adjust property in production environments, as browser support and implementation may change.
Potentially consider using text-size-adjust as part of your CSS reset or normalize styles to ensure consistent text sizing across different mobile browsers.
While using text-size-adjust can help achieve more consistent text sizing, it's still important to create responsive designs that adapt well to various screen sizes and devices.
Always test your designs on multiple devices and browsers to ensure the desired appearance and behavior.

Browser Compatibility

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer	iOS Safari	Android Browser	Opera Mobile	Chrome for Android	Firefox for Android
Support	Yes*	Yes*	No*	No	Yes*	No	Yes*	Yes*	Yes*	Yes	Yes*

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Note: For specific version compatibility, vendor prefixes, and less-used browsers, refer to the first link in the Useful Resources section below.