Limited support Use with care and confirm browser support before shipping it to all users.

text-size-adjust

Experimental: This is an experimental technology

Check the Browser compatibility table carefully before using this in production.

The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

Because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.

Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. The text-size-adjust property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.

OtherTypography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-size-adjust
Experimental
54
79
54
1
auto
Experimental
54
79
54
none
Experimental
54
79
54
percentages
Experimental

`<percentage>`
54
12
54
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Compatibility
  • Available with a vendor prefix: -webkit- (12)

Syntax

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

Live demo

100%(lock)

CSS 100%(lock) demo.

PreviewFullscreen

Auto(auto)

CSS Auto(auto) demo.

PreviewFullscreen

None(disabled)

CSS None(disabled) demo.

PreviewFullscreen

Use cases

  • Use text-size-adjust

    Use text-size-adjust when the default CSS behavior is not expressive enough for the component or layout you are building.

  • Handle edge cases

    Apply text-size-adjust to solve a specific styling constraint without introducing broader layout or behavior changes.

Cautions

  • Test text-size-adjust in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Confirm that using text-size-adjust does not make content harder to perceive, understand, or operate in assistive contexts.

Related links