# Why Does normalize.css Include `-webkit-text-size-adjust: 100%`? The iOS Font Scaling Fix Explained

> Discover why normalize.css uses -webkit-text-size-adjust 100% to fix iOS font scaling issues and ensure consistent typography across devices.

- Repository: [Nicolas Gallagher/normalize.css](https://github.com/necolas/normalize.css)
- Tags: deep-dive
- Published: 2026-03-07

---

**The `-webkit-text-size-adjust: 100%` rule in [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) prevents iOS Safari from automatically inflating font sizes during orientation changes or system text-size adjustments, ensuring your typography renders exactly as specified.**

The [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) library provides a minimal, cross-browser CSS baseline that removes quirky default browser styles. Among its carefully selected resets, the `-webkit-text-size-adjust: 100%` declaration targets a WebKit-specific behavior that can break layout consistency on mobile Apple devices.

## The iOS Text Scaling Problem

iOS Safari automatically scales text when a page's viewport changes or when users adjust their system "text size" preferences. This automatic scaling can disrupt carefully crafted typography and spacing, causing text to overflow containers or appear disproportionate to surrounding elements. Without intervention, a page designed with precise rem or pixel values might render unpredictably when a user rotates their iPhone from portrait to landscape.

## How normalize.css Implements the Fix

In the core [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) file, the rule appears within the HTML element block alongside a descriptive comment:

```css
html {
  -webkit-text-size-adjust: 100%; /* 2 */
}

```

The inline comment identifies this as the second normalization in the file, specifically noting its purpose: **"Prevent adjustments of font size after orientation changes in iOS."** By forcing the value to `100%`, the stylesheet disables the browser's automatic adjustment algorithm, locking text sizes to the author's declared values regardless of device orientation or user settings.

## WebKit Prefix and Legacy Browser Support

`-webkit-text-size-adjust` is the vendor-prefixed version of the standard `text-size-adjust` CSS property. According to the source code in [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css), older versions of iOS Safari (pre-iOS 10) only recognize the `-webkit-` prefix, making the prefixed declaration essential for cross-browser consistency. The standard unprefixed property remains experimental in many browsers, so normalize.css includes the WebKit-specific version to guarantee the fix works across both legacy and modern WebKit engines.

## Customizing or Overriding the Rule

While normalize.css disables automatic adjustment to preserve layout integrity, you can override this behavior for specific accessibility or design requirements:

**Allow automatic scaling (respects user preferences):**

```css
html {
  -webkit-text-size-adjust: auto;
}

```

**Disable adjustments completely:**

```css
html {
  -webkit-text-size-adjust: none;
}

```

**Using the standard property for modern browsers:**

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

```

## Summary

- **iOS Safari automatically scales text** during orientation changes and system text-size adjustments, which can break visual layouts.
- **`-webkit-text-size-adjust: 100%`** disables this automatic scaling, preserving the author's intended font sizes as implemented in [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css).
- The rule uses the **WebKit-specific prefix** because older iOS versions (pre-iOS 10) require it for support.
- You can override the value with `auto` or `none` depending on whether your project prioritizes user accessibility preferences or strict visual control.
- The standard `text-size-adjust` property works in modern browsers, but the prefixed version ensures backward compatibility.

## Frequently Asked Questions

### What exactly does `-webkit-text-size-adjust: 100%` do?

This CSS declaration tells WebKit browsers—primarily iOS Safari—to render text at exactly 100% of the size specified by the author, preventing the browser from automatically inflating font sizes when the device rotates or when users change system text-size settings. It ensures the computed font size matches your stylesheet definitions exactly.

### Is this property still necessary in modern iOS Safari?

Yes. While iOS has evolved, the automatic text-scaling behavior remains part of Safari's default stylesheet to improve readability on mobile sites. Including the rule in [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) ensures consistent rendering across all iOS versions, including legacy devices running pre-iOS 10 software that only recognize the `-webkit-` prefix.

### How does this differ from the standard `text-size-adjust` property?

`-webkit-text-size-adjust` is the vendor-prefixed implementation specific to WebKit engines like Safari. The standard `text-size-adjust` property follows the CSS specification but has limited browser support. Normalize.css uses the prefixed version to guarantee the fix works in older Safari versions while still affecting modern WebKit browsers.

### Can I safely remove this rule if I'm not targeting iOS?

If your project explicitly excludes WebKit-based browsers—including Safari on macOS and iOS, plus legacy Chrome versions—you could technically remove it. However, since [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) aims to provide a universal baseline, keeping the rule ensures protection against any WebKit-based user agents that might render your content, maintaining the library's goal of cross-browser consistency.