Учитывать масштабирование системного текста

Обзор

Пользователи с нарушениями зрения часто настраивают масштабирование текста на уровне операционной системы (например, динамические шрифты в iOS или масштабирование размера шрифта в Android/ChromeOS). По умолчанию мобильные браузеры игнорируют эти настройки специальных возможностей на уровне ОС, чтобы предотвратить визуальные сбои на устаревших сайтах с фиксированными пикселями.

Вместо того чтобы оставлять страницу статической или полагаться на специальные, ненадежные расчеты макета JavaScript, выберите масштабирование текста в операционной системе с помощью тега <meta name="text-scale">. Когда она активна, браузер динамически масштабирует размер корневого шрифта (1rem) в соответствии с настройками ОС пользователя, позволяя автоматически и корректно масштабировать все относительные (rem/em) размеры шрифтов, макеты и интервалы.

Реализация

1. Как включить масштабирование текста в ОС

Разместите элемент <meta name="text-scale"> внутри элемента <head>. Это сообщает поддерживающим браузерам, что ваш макет современный, адаптивный и безопасный для масштабирования:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. Используйте относительную типографику и интервалы

Задавайте размеры шрифтов в относительных единицах (rem или em), а не в пикселях (px). Для высоты строк используйте значения без единиц измерения, чтобы она масштабировалась пропорционально размеру шрифта каждого элемента.

Используйте относительные единицы измерения для полей и отступов, если интервалы связаны с размером текста или должны адаптироваться при масштабировании текста. Интервалы, не зависящие от текста, могут использовать фиксированные единицы измерения, если это целесообразно, при условии, что масштабирование не приводит к обрезке текста, перекрытию, потере контента или непригодному для использования макету:

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

Задавайте базовый размер текста в body, только если дизайн требует размера, отличного от унаследованного по умолчанию в браузере. В противном случае оставьте наследование. Задайте размеры отдельных элементов, например заголовков, в относительных единицах, таких как rem или em. Используйте rem, чтобы задать размер относительно размера шрифта корневого элемента, и em, если размер должен зависеть от размера шрифта родительского элемента. Не задавайте собственный размер шрифта для :root или html.

Адаптивная типографика

В адаптивной типографике МОГУТ использоваться единицы, связанные с областью просмотра, например vw, при условии, что размеры шрифта также включают компонент, связанный со шрифтом, например rem или em. Дополнительные сведения о методах гибкого масштабирования, включая единицы запросов контейнера и clamp(), можно найти в статье Гибкое масштабирование.

Не задавайте размер текста только в единицах области просмотра.

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

Вместо этого используйте относительные значения размера шрифта и масштабирования области просмотра, а также относительные минимальные и максимальные границы:

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

Проверьте, можно ли увеличить текст как минимум до 200% от размера по умолчанию без потери контента или функциональности. Для адаптивной типографики полезное практическое правило – следить за тем, чтобы максимальный размер шрифта не превышал минимальный более чем в 2,5 раза. Также проверьте перекомпоновку при ширине области просмотра 320 пикселей CSS (эквивалентно масштабу 400% от ширины области просмотра 1280 пикселей CSS). Контент ДОЛЖЕН оставаться доступным без двумерной прокрутки, за исключением случаев, когда это необходимо.

3. Используйте масштабируемые адаптивные контрольные точки

При настройке контрольных точек для адаптивного дизайна НЕЛЬЗЯ исходить из того, что текст будет оставаться в размере по умолчанию. Если контрольная точка предназначена для реагирования на доступное пространство для текста, отдавайте предпочтение макетам на основе контента, запросам контейнеров или медиазапросам на основе em, а не фиксированным пороговым значениям пикселей.

Протестируйте адаптивные макеты с включенным масштабированием текста в операционной системе и масштабированием в браузере. Текст должен оставаться читаемым, а контент – видимым без наложения, обрезки или горизонтальной прокрутки.

4. Используйте перенос контента и гибкую высоту

При увеличении масштаба текста элементам требуется больше места по вертикали и горизонтали, чтобы избежать усечения или перекрытия. Чтобы компоненты были надежными, создавайте макеты, которые динамически расширяются вокруг контента, а не принудительно используют жесткие координаты:

• Разрешите текстовым контейнерам увеличиваться. Компоненты и контейнеры, содержащие текст, должны иметь возможность увеличиваться, чтобы вмещать масштабированный текст. Не используйте фиксированные значения height или block-size и ограничивающие значения max-height или max-block-size, которые могут привести к обрезке или переполнению. Рекомендуется задавать размер на основе контента. Используйте min-height или min-block-size, только если нужно задать минимальный размер.
• Разрешите естественный перенос текста. Не ограничивайте перенос текста по строчной оси с помощью white-space: nowrap в блоках, содержащих предложения. Текст должен переноситься на новые строки естественным образом.
• Используйте гибкие макеты Flexbox и Grid (необязательный пример). Для галерей карточек с несколькими столбцами используйте перекомпоновку столбцов, например repeat(auto-fit, minmax(min(100%, 16rem), 1fr)), чтобы элементы располагались вертикально, если превышены пороговые значения их относительной ширины:

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. Не переопределяйте размер шрифта корневого элемента

При использовании элемента <meta name="text-scale" content="scale"> НЕ задавайте корневой элемент font-size в таблице стилей. Это относится к объявлениям в :root или html, а также к абсолютным и относительным единицам и вычисленным значениям.

Например, не переопределяйте размер корневого шрифта фиксированным значением:

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

Не используйте согласие <meta name="text-scale" content="scale"> вместе с env(preferred-text-scale), чтобы вручную применить масштабирование текста операционной системы. Браузер применяет масштабирование через метатег, поэтому использование обоих способов может привести к двойному масштабированию:

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

Размер корневого шрифта определяется браузером. Браузер автоматически обрабатывает масштаб текста операционной системы и применяет его к контенту, размер которого задан относительно размера шрифта корневого элемента.

Резервные стратегии

В браузерах, которые не поддерживают <meta name="text-scale" content="scale">, макет будет отображаться корректно. Страница будет отображаться с размером шрифта, заданным по умолчанию в браузере (обычно 16 пикселей). Пользователь сможет вручную изменить масштаб страницы или использовать жест сведения/разведения пальцев.