Визуальное тестирование и веб-типографика: шрифты — невидимая деталь, которая разрушает ваш UX

Ключевые выводы

Веб-шрифты ответственны за значительную долю визуальных багов, но редко включаются в стратегии тестирования
Явления FOUT (Flash of Unstyled Text) и FOIT (Flash of Invisible Text) невидимы для функциональных тестов и не обнаруживаются без визуального захвата
Различия типографического рендеринга между операционными системами порождают регрессии, которые может выявить только кроссплатформенное визуальное тестирование
Автоматизированное визуальное тестирование — единственный инструмент, способный контролировать типографическую согласованность вашего сайта в масштабе

Веб-типографика, по определению W3C, — это «использование шрифтов в веб-документах, включая загрузку удалённых шрифтов через правило @font-face, управление рендерингом через font-display и управление типографическими метриками для обеспечения согласованного отображения текста» (W3C, CSS Fonts Module Level 4).

Это академическое определение. На практике веб-типографика — это визуальное минное поле, через которое большинство команд идут с завязанными глазами.

Ваши пользователи, возможно, не замечают сознательно, какой шрифт вы используете. Но они мгновенно замечают, когда что-то не так. Текст, прыгающий при загрузке. Символы крупнее ожидаемого. Заголовок, выходящий за пределы контейнера. Странные расстояния между буквами. Эти визуальные микроагрессии подрывают доверие и воспринимаемый профессионализм вашего сайта.

И хуже всего: ваши текущие тесты их, вероятно, не ловят.

Веб-шрифты — это не статические файлы

Существует широко распространённое заблуждение о работе веб-шрифтов. Многие разработчики относятся к ним как к статическим ресурсам: объявляете шрифт в CSS, браузер скачивает, отображает. Просто.

В реальности загрузка веб-шрифта — сложный процесс с множеством точек отказа. Браузер сначала разбирает CSS для определения нужных шрифтов. Затем инициирует загрузку файлов шрифтов, которые могут весить от нескольких десятков до нескольких сотен килобайт каждый. Во время загрузки браузер должен решить, что отображать вместо них. Когда шрифт наконец приходит, браузер должен его растеризовать и пересчитать раскладку.

Каждый из этих шагов может дать визуальный результат, отличный от ожидаемого. И каждый браузер, каждая ОС, каждая сетевая конфигурация обрабатывает эти шаги по-своему.

FOUT и FOIT: призраки веб-типографики

Если вы работаете в веб-разработке, вы наверняка встречали эти аббревиатуры. Если вы работаете в QA, вы должны знать их наизусть — это два самых распространённых типографических визуальных бага.

FOUT — Flash of Unstyled Text

FOUT возникает, когда браузер отображает текст запасным шрифтом до загрузки веб-шрифта, а затем подставляет финальный шрифт. Пользователь видит «прыжок» текста: слова меняют размер, строки перераспределяются, раскладка перестраивается.

Это явление длится от двухсот миллисекунд до нескольких секунд в зависимости от скорости соединения и размера файла шрифта. На мобильном соединении в зоне слабого покрытия может длиться значительно дольше.

FOUT — больше, чем эстетическое неудобство. Если пользователь нажимает кнопку в момент прыжка текста, он может промахнуться. Если форма перестраивается во время ввода, пользователь теряет фокус. Если заголовок меняет размер и сдвигает контент вниз, пользователь может потерять позицию чтения.

FOIT — Flash of Invisible Text

FOIT — другая стратегия браузера: вместо отображения запасного шрифта он полностью скрывает текст до загрузки веб-шрифта. Пользователь видит страницу с пустыми местами там, где должен быть текст.

Некоторые браузеры применяют таймаут к FOIT. Chrome и Firefox скрывают текст максимум три секунды, затем переключаются на запасной шрифт. Safari же может скрывать текст бесконечно долго, пока шрифт не загрузится.

Представьте: пользователь заходит на вашу страницу и видит невидимый заголовок три секунды. Эти три секунды ваша страница выглядит сломанной. Пользователь не знает, что загружается шрифт. Он видит пустоту и делает вывод, что у вашего сайта проблемы.

Почему стандартные тесты их не видят

Ни FOUT, ни FOIT не вызывают ошибку JavaScript. Ни один DOM-элемент не пропал. Ни один атрибут не изменился. Текстовое содержание присутствует и корректно. С функциональной точки зрения всё в порядке.

Selenium-тест, проверяющий правильность текста заголовка, пройдёт успешно, даже если этот заголовок невидим три секунды из-за FOIT. Cypress-тест, кликающий по кнопке, выполнится успешно, даже если эта кнопка сместилась из-за FOUT, пока пользователь пытался по ней нажать.

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

Запасные шрифты: тихая опасность

Когда веб-шрифт вообще не загружается (CDN недоступен, файл удалён, ошибка CORS, слишком агрессивный блокировщик рекламы), браузер использует запасной шрифт из вашего CSS. Если запасной не указан — системный по умолчанию.

Проблема в том, что запасной шрифт имеет другие метрики. Высота символов отличается. Ширина букв отличается. Интервалы отличаются. Кернинг отличается.

На практике кнопка, рассчитанная на текст «Подтвердить заказ» в Inter, может не вместить тот же текст в Arial. Текст выходит за границы, или кнопка кажется слишком большой. Заголовок, рассчитанный на одну строку в Montserrat, может занять две строки в Helvetica. Вся раскладка сдвигается.

Эти подмены должны быть временными (ожидание загрузки веб-шрифта), но могут стать постоянными при неудачной загрузке. И поскольку ошибка не генерируется, никто не замечает — кроме ваших пользователей.

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

Различия рендеринга между операционными системами

Вот истина, которую многие команды разработки предпочитают игнорировать: один и тот же шрифт с одним и тем же CSS отображается по-разному на Windows, macOS и Linux.

Причина в том, что каждая ОС использует свой движок растеризации шрифтов. Windows — DirectWrite (ранее ClearType). macOS — Core Text. Linux — FreeType. Каждый движок принимает разные решения об антиалиасинге, хинтинге, субпиксельном рендеринге и сглаживании.

Видимый результат: текст выглядит толще на macOS, чем на Windows при том же шрифте и размере. Лигатуры обрабатываются по-разному. Автоматический кернинг варьируется. На Linux рендеринг может существенно отличаться в зависимости от конфигурации FreeType дистрибутива.

Эти различия редко драматичны посимвольно, но накапливаются на полной странице. Абзац, занимающий пять строк на macOS, может занять шесть на Windows. Заголовок, умещающийся в одну строку на Windows, может перейти на две на Linux. Горизонтальное меню с восемью пунктами на macOS показывает только семь на Windows перед переносом строки.

Кроссплатформенное визуальное тестирование фиксирует эти различия, запуская одни и те же тесты на разных ОС и поддерживая отдельные эталоны для каждой. Вы не сравниваете рендеринг Windows с macOS (это бессмысленно — они всегда будут различаться). Вы сравниваете сегодняшний рендеринг Windows с эталоном Windows, и сегодняшний рендеринг macOS с эталоном macOS. Каждая регрессия обнаруживается в своём контексте.

Variable fonts и новые источники багов

Variable fonts содержат все стили в одном файле с непрерывными осями вариации (вес, ширина, наклон). Вместо загрузки файла на каждый стиль вы получаете бесконечную гранулярность. Можно указать вес 437 вместо просто «regular» (400) или «medium» (500).

Эта гранулярность прекрасна для дизайна. Она опасна для визуальной согласованности. Если разработчик меняет вес с 400 на 410, разница слишком тонка для обнаружения при code review. Но она заметна внимательному пользователю, особенно когда изменённый текст находится рядом с текстом, сохранившим исходный вес.

Визуальное тестирование с правильно откалиброванным порогом чувствительности обнаруживает эти постепенные типографические дрейфы, которые не могут поймать ни функциональные тесты, ни code review.

font-display и его визуальные последствия

CSS-свойство font-display управляет поведением браузера при загрузке веб-шрифта. Со значением swap браузер отображает текст запасным шрифтом, затем подменяет (гарантированный FOUT). Со значением block скрывает текст на короткое время (гарантированный FOIT). Со значением optional может решить вообще не загружать шрифт при медленном соединении.

Каждое значение — визуальный компромисс, влияние которого зависит от контекста: скорости соединения, размера файла, количества одновременно загружаемых шрифтов. Визуальный тест, симулирующий различные сетевые условия, может зафиксировать реальные последствия вашего выбора font-display и проверить, что опыт остаётся приемлемым во всех условиях.

Влияние на воспринимаемую производительность и SEO

Типографика напрямую влияет на Cumulative Layout Shift (CLS) — одну из трёх Core Web Vitals Google. Каждый раз, когда запасной шрифт заменяется финальным и текст перераспределяется, генерируется CLS. Высокий показатель означает плохой пользовательский опыт и негативное влияние на позиции.

Визуальное тестирование обнаруживает симптомы, вызывающие CLS: скачки контента, перераспределения текста, изменения размера. Устраняя типографические регрессии, вы механически улучшаете CLS и, следовательно, SEO.

Иконочные шрифты: критический особый случай

Иконочные шрифты (Font Awesome, Material Icons) отображают символы вместо букв. Когда они не загружаются, ваши иконки превращаются в пустые прямоугольники или случайные символы. Навигация, кнопки, весь интерфейс выглядит сломанным.

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

Построение стратегии типографического визуального тестирования

Типографика заслуживает выделенного внимания. Создайте специфические тесты, нацеленные на критические типографические сценарии.

Тестируйте начальную загрузку с throttling сети для проверки поведения вашей стратегии font-display. Тестируйте с заблокированными веб-шрифтами для проверки, что запасные шрифты дают приемлемый результат. Тестируйте на трёх основных ОС с отдельными эталонами. И тестируйте иконочные шрифты отдельно, блокируя их загрузку.

Типографика — не деталь

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

Автоматизированное визуальное тестирование — единственная эффективная страховочная сеть от этих невидимых регрессий. Оно видит то, что не могут ваши функциональные тесты. Обнаруживает то, что пропускают ваши уставшие глаза в конце спринта. Контролирует то, что никто не успевает контролировать вручную.

Потому что типографика — не деталь дизайна. Это транспорт для вашего контента. И если транспорт сломан, качество того, что он перевозит, не имеет значения.

Часто задаваемые вопросы

Как визуальное тестирование отличает намеренное изменение шрифта от бага?

Автоматически — никак, и это важный момент. Визуальное тестирование обнаруживает любое отличие от эталона. Определить, намеренное ли это изменение (обновление брендбука, запланированная смена шрифта) или случайное (запасной шрифт, пойманный FOUT, регрессия) — задача команды. Поэтому регулярное обновление тестовых эталонов необходимо: при намеренном изменении типографики обновите эталон, чтобы тесты отражали новое желаемое состояние.

Может ли визуальное тестирование обнаружить FOUT длительностью в несколько сотен миллисекунд?

Да, при условии что тест настроен на захват страницы в нужный момент. Большинство инструментов визуального тестирования позволяют делать захваты в конкретные моменты загрузки, включая до полной загрузки веб-шрифтов. Комбинируя захваты «при первом рендере» и «после полной загрузки», можно проверить и поведение загрузки, и конечный результат.

Нужны ли разные тестовые эталоны для каждого браузера и ОС?

Да, и это часто игнорируемая лучшая практика. Типографический рендеринг различается между Chrome, Firefox и Safari, а также между Windows, macOS и Linux. Использование единого эталона для всех сред порождает постоянные ложноположительные срабатывания. Поддерживая эталоны для каждой комбинации браузер-ОС, вы обнаруживаете только реальные изменения, а не нормальные межплатформенные различия.

Google Fonts надёжнее самостоятельно размещённых шрифтов?

С точки зрения доступности Google Fonts опираются на CDN-инфраструктуру Google, которая чрезвычайно надёжна. Однако они создают стороннюю зависимость, которую вы не контролируете. Google может изменить обслуживаемые файлы шрифтов (и уже делал это для оптимизации размера). Блокировщики рекламы могут блокировать запросы к доменам Google. С точки зрения визуального тестирования самостоятельное размещение уменьшает переменные и даёт более предсказуемый и тестируемый результат.

Как работать с variable fonts в стратегии визуального тестирования?

Variable fonts добавляют непрерывные оси вариации (вес, ширина, наклон). Визуально тестируйте те значения осей, которые реально используете в CSS. Если используете веса 400, 500 и 700 — захватите эталоны для каждого. Основной риск с variable fonts — случайное изменение значения оси (например, 400 на 410). Визуальный тест с подходящим порогом чувствительности обнаруживает эти тонкие изменения, которые code review систематически пропускает.

Может ли визуальное тестирование помочь выбрать правильные запасные шрифты?

Косвенно — да. Заблокировав загрузку веб-шрифтов в тестах и захватив результат с запасными шрифтами, вы видите именно то, что видят ваши пользователи, когда шрифты не загружаются. Это позволяет выбрать запасные шрифты с метриками, близкими к основному шрифту, минимизируя визуальный скачок FOUT и обеспечивая приемлемый опыт даже без веб-шрифтов.

Для углубления

Ваши веб-шрифты — источник визуальных багов, за которым никто не следит? Пора это изменить.

Попробовать Delta-QA бесплатно →