Сканировать

Требования к шрифту и размеру текста по 168-ФЗ: полный разбор

Одно из ключевых требований 168-ФЗ касается равнозначности русскоязычного текста по отношению к иноязычному. Это означает, что русский перевод не должен быть мельче, бледнее или менее заметным, чем оригинальный текст на иностранном языке. В этой статье мы подробно разберём все требования к шрифтам, размерам и оформлению текста на сайтах, а также дадим практические рекомендации для веб-разработчиков и дизайнеров.

Принцип равнозначности

Закон 168-ФЗ устанавливает фундаментальный принцип: русскоязычный текст должен быть представлен не менее заметно, чем иноязычный. Этот принцип затрагивает несколько аспектов визуального оформления одновременно: размер шрифта, цвет текста, контрастность относительно фона, расположение на странице и визуальный вес элемента. Если ваш слоган на английском набран крупным жирным шрифтом в центре экрана, а перевод на русский — мелким курсивом под ним, это прямое нарушение принципа равнозначности, даже если формально перевод присутствует.

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

Размер шрифта: что говорит закон

Закон не устанавливает конкретных числовых значений минимального размера шрифта в пикселях или пунктах. Однако из принципа равнозначности следуют чёткие правила. Русский текст должен быть набран шрифтом не меньшего размера, чем соответствующий иноязычный текст. Если заголовок на английском имеет размер 36px, русский перевод должен быть не менее 36px. Если описание товара на английском набрано 16px, русское описание не может быть 12px.

На практике мы рекомендуем следующие минимальные размеры для русскоязычного контента на сайтах: основной текст страницы — не менее 14px (оптимально 16px для хорошей читаемости), заголовки первого уровня (H1) — не менее 24px, заголовки второго уровня (H2) — не менее 18px, подписи к изображениям и мелкий текст — не менее 12px, текст на кнопках и CTA-элементах — не менее 14px, текст в плейсхолдерах форм — не менее 14px.

Контрастность русскоязычного текста

Контрастность — это отношение яркости текста к яркости фона. Международный стандарт доступности WCAG 2.1 рекомендует минимальный коэффициент контрастности 4.5:1 для обычного текста и 3:1 для крупного текста (18px и выше, или 14px жирного). Эти же рекомендации полностью применимы к требованиям 168-ФЗ о равнозначности.

Типичные нарушения контрастности, которые мы обнаруживаем при сканировании: русский перевод набран серым цветом (#999 или #AAA) на белом фоне, в то время как английский текст — чёрным. Русский текст с пониженной прозрачностью (CSS opacity: 0.5 или color: rgba(0,0,0,0.4)). Русский перевод размещён на фоновом изображении без обеспечения контрастности.

Расположение текста на странице

Русскоязычный текст должен находиться в непосредственной близости от иноязычного эквивалента или занимать приоритетную позицию. Категорически недопустимо: размещать перевод в конце страницы далеко от оригинала, скрывать его в всплывающих подсказках (tooltip), которые появляются только при наведении мыши, прятать за кликом «Показать перевод» или за раскрывающимся блоком, выносить все переводы в сноски внизу страницы.

Допустимые и рекомендуемые форматы размещения: русский текст перед иноязычным (приоритетная позиция), русский и иноязычный текст рядом на одном визуальном уровне, компактный формат «Русское название (English Name)» для отдельных терминов и названий.

Визуальный вес и стилистика

Визуальный вес текстового элемента определяется совокупностью факторов: размер шрифта, насыщенность (жирность), цвет и контрастность, расположение на странице, наличие декоративных элементов вокруг текста, фон блока. Если английский текст выделен жирным шрифтом (font-weight: 700), русский перевод не может быть набран обычным начертанием (font-weight: 400). Если английский текст центрирован и окружён декоративной рамкой, русский не должен быть прижат к краю страницы без оформления.

Специальные случаи

Логотипы и товарные знаки

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

Изображения с текстом

Баннеры, инфографика, промо-материалы и другие изображения, содержащие текст на иностранном языке, полностью подпадают под действие закона. Русский перевод должен быть либо встроен непосредственно в изображение, либо размещён рядом с ним в виде текстового блока с аналогичным визуальным весом.

Формы и интерфейсные элементы

Кнопки, поля ввода, выпадающие списки, чекбоксы, радиокнопки — все интерфейсные элементы с текстом должны соответствовать требованиям равнозначности. Если кнопка «Buy Now» набрана шрифтом 18px bold белым цветом на ярком фоне, кнопка «Купить» не может быть 12px regular серым текстом.

Типичные ошибки оформления

Проанализировав тысячи сайтов через КириллоСкан, мы выявили пять наиболее распространённых ошибок в оформлении текста на российских сайтах.

  1. Мелкий перевод под крупным оригиналом — самая частая ошибка. Англоязычный слоган набран 48px, русский перевод скромно расположен под ним шрифтом 14px. Создаётся впечатление, что перевод — это сноска, а не полноценный контент.
  2. Серый или полупрозрачный перевод — русский текст набран светло-серым цветом или с пониженной прозрачностью, в то время как оригинал — насыщенным чёрным или ярким цветом. Формально перевод есть, но прочитать его затруднительно.
  3. Скрытый перевод — русский текст появляется только при наведении мыши, клике на иконку или прокрутке скрытого блока. Перевод должен быть виден постоянно, без дополнительных действий пользователя.
  4. Перевод в подвале страницы — все иноязычные элементы имеют русские аналоги, но они собраны списком внизу страницы, далеко от оригинальных элементов.
  5. Разные стили для разных языков — английский текст жирный и центрированный в декоративном блоке, русский — обычным начертанием, курсивом и прижат к левому краю.

Рекомендации для разработчиков

Для обеспечения равнозначности на уровне CSS используйте одинаковые классы стилей для русского и иноязычного текста. Избегайте инлайн-стилей, которые могут различаться для разных языковых версий. Проверяйте контрастность с помощью чек-листа разработчика и специализированных инструментов проверки WCAG. Тестируйте отображение на мобильных устройствах — на маленьких экранах проблемы с размером шрифта особенно заметны.

По данным наших сканирований, около 35% всех нарушений 168-ФЗ связаны именно с оформлением текста: мелкий шрифт, низкая контрастность, скрытый перевод. Эти нарушения легко выявляются при автоматическом сканировании и быстро исправляются.

Заключение

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

Просканируйте свой сайт

Автоматическая проверка на все требования 168-ФЗ. Результат за 2 минуты.