Chrome Canary でテキスト拡大・縮小のサポートをお試しください。

要約

Chrome Canary は、ウェブページ上でオペレーティングシステムのテキストサイズ設定を尊重するようブラウザに指示する新しいメタタグ

<meta name="text‑scale">

モバイルユーザーの約三分の一（Android 約 37％、iOS 約 34％）が OS テキストサイズを調整していますが、ほとんどのブラウザはこれらの設定を無視しています。 Safari と Chrome はスキップし、Firefox for Android はページズームを使用します。グローバルサポートを有効にするとデスクトップレイアウトが壊れる可能性があります（例：フォントサイズが倍になると LinkedIn のページが崩れます）。したがって慎重な実装が必要です。

開発者向けベストプラクティスチェックリスト:

初期 CSS
font-size
を上書きしないでください。デフォルトを medium（約 16 px）に設定するか、パーセンテージ値を使用します。

コンテンツ要素にはフォント相対単位（em, rem）のみを使用してください。 必要がない限り、マージン・パディング・ギャップには使用しません。

開発者ツールで 320 px ビューポートに 200 % テキストスケールをシミュレートし、
env(preferred-text-scale)
関数を使ってテストしてください。

未解決の質問があります：大きな見出しは本文より低い倍率で拡大すべきでしょうか（例：32 px → 64 px）？ブラウザは今年後半に

<meta name="text‑scale">

広く採用されれば、デザインを壊すことなくアクセシビリティ設定に対応できるようになります—ただしレイアウトの崩れを防ぐためにスペーシング単位を管理する必要があります。

Chrome Canary + 「Experimental Web Platform features」
Chrome Canary で Experimental Web Platform features フラグを有効にしている場合、以下の新しい HTML メタタグを試すことができます。

<meta name="text-scale" content="scale">

この機能は 2024 年夏に CSS Working Group で提案され、David Grogan と Philip Rogers（Google Chrome チーム）の協力のもと開発されました。詳細な解説はこちらにあります。

これは何ですか？

iOS や Android のシステムテキストサイズを拡大すると、ウェブ上以外では文字が大きくなりますが…

Safari / Chrome – 変化なし
Firefox for Android – ページ全体のズーム（テキストスケーリングとは別）

Appt の調査によると、以下の割合でユーザーがシステムレベルのテキスト拡大率を変更しています。

約 37 % が Android ユーザー
約 34 % が iOS ユーザー

ウェブ開発者は現在、その設定に対応する手段を持っていません。

<meta name="text-scale">

タグがこの問題を解決します。

<meta name="viewport">

と同様に、ユーザーが OS のテキストサイズを拡大したときでもサイトが正常に機能するようブラウザへ通知します。

タグを追加すると、文字はユーザーの設定に従って拡大されます。

なぜ有効化しなければならないのでしょうか？

ブラウザがすべてのページで自動的にこの機能を採用できるわけではありません。そうすると多くのサイトが壊れてしまうためです。

デスクトップブラウザは既にユーザーがウェブサイトのテキストサイズを拡大できるようになっていますが、これは隠し機能です。
Firefox で LinkedIn を閲覧すると、文字サイズを倍にすると「車の衝突」レイアウトになることがあります。
この機能をモバイルで有効化した場合、多くのサイトも同様に壊れます。

さらに、小さなビューポートでもユーザーはテキストを 200 % まで拡大できるべきです（横スクロールなし）。これは WCAG 2.2 のガイドライン 1.4.4（Resize Text）と 1.4.10（Reflow）に準拠しています。
したがって、2008 年からのモバイルビューポートサポート同様、オプトイン方式で導入する必要があります。

ウェブサイトでテキストスケーリングをサポートするには？

すべてのブラウザが

<meta name="text-scale">

を実装するまで待つ必要はありません。
真のテキストスケーリング はデフォルトのフォントサイズだけを変更し、画像や余白、ギャップなどはブラウザズームと同じように拡大されません。

1. 初期フォントサイズを上書きしない

<!-- 👎 こうしないでください -->
<meta name="text-scale" content="scale">
<style>
  :root {
    font-size: 16px;   /* デフォルトを上書き */
  }
</style>

理想的には

font-size

を未設定にするか、パーセンテージで調整します。

2. コンテンツにフォント相対単位を使用

テキスト、画像、アイコンは em と rem が推奨
マージン・パディング・ギャップなどのレイアウトプロパティでは必要に応じてのみ使用
ボーダーはケースバイケースで決定：ボタンやテキストボックスはスケールさせるべき、デザイン上の区切り線は px のままでも構わない

3. 十分なテストを行う

安価なスマートフォンで文字サイズが倍になる状況をシミュレートします。

デスクトップ開発ツールでビューポート幅を 320 px に設定
テキストスケールを 200 % に変更（各ブラウザの
```
env(preferred-text-scale)
```
を確認）
レイアウト崩れが起きる箇所を特定し、必要に応じて調整

今後は？

今年後半には他のブラウザもサポートを追加する見込みですが、公式なスケジュールは未定
ボディテキストより低い倍率で大きな文字（例：32 px → 64 px）が過度に大きくなるケースを検討中です。アイデアがあればぜひ共有してください！

CSS Day 2026（6 月）でさらに詳細を発表予定です。ぜひご参加ください！機能が成熟するにつれて、追加のドキュメントも公開します。