text-size-adjust

Definition

The text-size-adjust CSS property is used to control the adjustment of font size based on the available space on a device or within a container. It primarily applies to mobile devices and helps maintain the legibility and readability of text when users zoom in or out on a webpage.

The text-size-adjust property accepts the following values:

• auto: This is the default value. It allows the browser to automatically adjust the text size based on the user’s zoom settings.
• none: Disables any automatic adjustment of text size when users zoom in or out. The text will remain at the original size, even if it may overflow the container or become illegible.

Here’s an example:

.body-text {
  text-size-adjust: auto;
}

In this example, the .body-text class sets the text-size-adjust property to auto, allowing the browser to adjust the text size based on the user’s zoom settings.

It’s important to note that the text-size-adjust property mainly affects the behavior of mobile browsers and may not have a significant impact on desktop browsers. Its purpose is to help maintain consistent and readable text size when users zoom in or out on mobile devices, especially when dealing with responsive designs or viewport units.

Keep in mind that the effectiveness of text-size-adjust can vary between browsers and platforms. Additionally, it’s important to consider the overall design and layout of your webpage to ensure proper legibility and readability, even when users adjust the text size or zoom level.

The text-size-adjust property can be particularly useful for mobile-friendly designs, ensuring that text remains legible and accessible for users who prefer to zoom in or have visual impairments.

Syntax

html {
  text-size-adjust: 100%;
}

Values

• auto: let the browser scale text to improve readability (default on mobile).
• none: disable automatic scaling.
• <percentage>: specify a scale factor for text auto-sizing.

Practical Examples

html {
  text-size-adjust: 100%;
}

@supports (-webkit-touch-callout: none) {
  body.small-copy {
    text-size-adjust: 110%;
  }
}

Control mobile text inflation when designing responsive typography systems.

<div class="space-y-3 rounded-xl border border-slate-200 bg-white p-5 text-sm text-slate-700 shadow-sm">
  <p class="text-xs uppercase tracking-wide text-slate-500">Tip</p>
  <p>Keep <code>text-size-adjust</code> at <code>100%</code> unless you have specific reasons to tweak mobile scaling.</p>
</div>

Tips & Best Practices

• Avoid disabling text inflation entirely—users rely on platform adjustments for readability.
• If you increase the percentage, test on real devices to ensure layout stability.
• Use media queries to limit adjustments to specific breakpoints.

Accessibility & UX Notes

Respect user font-size preferences; disabling text inflation can hinder low-vision users.

Browser Support

Supported in mobile Safari, Chrome for Android, and other mobile browsers. Desktop support is limited.

Related

• font-size responsive strategies.
• viewport meta tag which interacts with text scaling.
• @media (prefers-reduced-motion) for broader preference handling.