1. css
  2. /properties
  3. /text-size-adjust

text-size-adjust

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:

ValueDescription
noneDisables the browser's text inflation algorithm.
autoAllows 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

BrowserChromeEdgeSafariFirefoxOperaInternet ExploreriOS SafariAndroid BrowserOpera MobileChrome for AndroidFirefox for Android
SupportYes*Yes*No*NoYes*NoYes*Yes*Yes*YesYes*

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.

Useful Resources

Can I use: text-size-adjust

W3C Editor's Draft: CSS Text Size Adjust Module Level 1

Safari Web Content Guide - Adjusting the Text Size

Information on Chromium’s Text Autosizer

Use Cases

CSS reset with text-size-adjust

Specific use case and problems with -webkit-text-size-adjust:none

Use case for controlling text size in Safari for iOS without disabling user zoom