HTML Meta Name: text-scale and Browser Text Scaling

This guide covers Meta Name: text-scale and Browser Text Scaling. In browsers that implement the experimental text-scale metadata, users can have the root font size scale with their operating-system text preferences.

Not every new browser feature is ready for every site. It helps to understand the problem first, then check whether the feature is mature enough before you depend on it.

How it is intended to work

In browsers that implement the experimental text-scale metadata, users can have the root font size scale with their operating-system text preferences.

Code example

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="text-scale" content="scale">
    <style>
        body { font-size: 1rem; }
        h1 { font-size: 2rem; }
    </style>
</head>

What you should notice

Values include scale and legacy. This is experimental and not Baseline; test up to very large preferred text sizes before using it. Do not replace accessible zoom and reflow with this hint.

Read the exact attribute and value shown in the code. That is the feature being demonstrated; the surrounding document merely provides the context required for valid HTML. Where JavaScript or CSS is involved, the complete working effect may need more than the markup shown.

How to test compatibility

1. Create a plain HTML page with working essential content.
2. Add the experimental feature as an enhancement, not as the only way to reach important information.
3. Test in the latest browsers relevant to your audience, including keyboard and mobile use.
4. Turn the feature off or use an older browser to confirm the fallback remains useful.

Common Beginner Mistakes

• Values include scale and legacy. This is experimental and not Baseline; test up to very large preferred text sizes before using it. Do not replace accessible zoom and reflow with this hint.
• Assuming a feature supported in a technical preview works for every visitor.
• Removing native accessible behavior before the replacement is proven.

Key Takeaways

• In browsers that implement the experimental text-scale metadata, users can have the root font size scale with their operating-system text preferences.
• Values include scale and legacy. This is experimental and not Baseline; test up to very large preferred text sizes before using it. Do not replace accessible zoom and reflow with this hint.
• Keep a safe baseline and make new browser capabilities optional whenever possible.