---
name: signage-screen-design
description: Правила вёрстки и технические требования для любого контента на телевизоре или дисплее в магазине, кафе, салоне, клинике, отеле, офисе — безопасная зона против обрезки краёв, размер шрифта по дистанции, контраст, сетка, иерархия, вертикальные и растянутые (полочные, барные) экраны, холст 4K и 1080p, реальная логическая ширина ТВ (960/1280 CSS px), что из HTML/CSS переживает старые браузеры Smart TV (Tizen, webOS, Android WebView). Использовать при дизайне слайда, промо-экрана или HTML-страницы для digital signage и когда на ТВ что-то обрезано или не читается. Triggers (EN) signage design, TV screen layout, safe zone, font size for TV, portrait display, stretched display.
license: CC-BY-4.0
metadata:
  author: PRTV (prtv.pro)
  version: "1.0"
  date: "2026-09-26"
  language: ru
  related: digital-menu-board, digital-signage-content, signage-widgets, prtv-digital-signage
---

# Дизайн экрана для digital signage

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

## 1. Холст

- **Горизонтальный 1920×1080** — по умолчанию и самый надёжный. Работать в нём даже для 4K-телевизоров, если контент не фотографический и не рассматривается вблизи; иначе 3840×2160 и все размеры ×2.
- **Вертикальный 1080×1920** — телевизор, повёрнутый на 90°. Проверить, умеет ли плеер или ТВ поворачивать картинку; многие бытовые ТВ не умеют, и контент тогда рендерится уже повёрнутым.
- **Растянутые и барные дисплеи** (например, 1488×3840 вертикально, 3840×600 на край полки) — верстать в родном разрешении матрицы, не растягивать макет 16:9.
- Один холст на слайд-шоу. Если контент идёт и на горизонтальные, и на вертикальные экраны — две версии; автоматическая перекладка выглядит случайной.

## 2. Безопасная зона — жёсткое правило

Многие ТВ режут 2–5 % кадра по краям (overscan). Всё значимое (текст, цена, логотип, QR) — не ближе **96 px к боковым краям и 60 px к верху и низу** на 1920×1080 (5 % × 5,5 %). Декоративный фон может уходить под обрез.

## 3. Шрифт по дистанции

Ориентир: **высота прописной ≈ 1/200 дистанции для комфортного чтения**, и никогда не меньше 1/300. Для ТВ 55" 1920×1080:

| Дистанция | Заголовок | Основной текст | Минимум |
|---|---|---|---|
| 1,5–2 м | ≥ 90 px | ≥ 40 px | 32 px |
| 3 м | ≥ 110–120 px | ≥ 44 px | 40 px |
| 4–5 м | ≥ 140 px | ≥ 64–72 px | 56 px |
| 8–10 м (зал, витрина с улицы) | ≥ 220 px | ≥ 120 px | — |

Для 43" прибавить около 25 %, для 65" и больше — убавить 15 %. Всё, что должно читаться, — полужирным; светлые начертания тонут.

## 4. Иерархия, сетка, цвет

- **Тест трёх секунд**: убрать экран через 3 с — главное (предложение и цена или один факт) должно запомниться.
- Иерархия держится на двух параметрах сразу (размер + насыщенность, размер + цвет), не на одном размере.
- 12-колоночная сетка внутри безопасной зоны; равные промежутки и высоты строк. Неровные отступы — первый признак недоделанного слайда.
- Одна палитра на слайд-шоу: около 60 % основной / 30 % дополнительный / 10 % акцент. Акцент — только в точке решения.
- Контраст числом: ≥ 4,5 : 1 основной текст, ≥ 3 : 1 крупный. Линии тоньше 2 px и светло-серое по белому на ТВ пропадают.
- Текст на фото — с подложкой (тёмная полупрозрачная плашка или затемнение на 20–30 %).
- Один визуальный якорь на слайд. Пустое место — либо приём, либо ошибка, случайным оно не бывает.
- Слов на слайде: заголовок ≤ 7 слов, всего ≤ 20–25 слов на промо-слайде.

## 5. Движение

- В кадре одновременно двигается один элемент.
- Появление ≤ 2–4 с, затем пауза ≥ 5 с.
- Ничего не мигает чаще трёх раз в секунду (фоточувствительность).
- Длительность слайда: 8–15 с для промо, от 20–30 с для того, что читают (меню, расписания).

## 6. HTML на телевизорах — браузер старый

Если в слайдах есть HTML (виджеты, анимированные блоки, свои страницы), помнить, на чём это реально показывается. Замер по ~2 700 экранам:

- **~90 % Android** (ТВ, приставки, плееры на WebView), доминирует Android 11 с заводским WebView уровня Chromium 83–90. **~6 % Samsung Tizen, ~4 % LG webOS** — парк LG старее.
- **Около 96 % — Chromium 70 и новее, около 4 % — Chromium 47–69, меньше 1 % — ещё старше.** Цель — Chromium 70; текст и цены должны оставаться читаемыми вплоть до Chromium 47.
- **Логическая ширина часто не 1920.** FullHD-телевизор с плотностью 2 отдаёт странице **960 CSS px**, с 1,5 — **1280**. Около двух третей показов идут при ширине, отличной от 1920. HTML строить в относительных единицах (%, vw, em) и проверять на 960, 1280 и 1920.

Можно везде: flexbox без `gap`, float, inline-block, transform, transition, медиазапросы, object-fit, border-radius, box-shadow, веб-шрифты, ES6 уровня Chromium 49.

Только с запасным вариантом: CSS-переменные (обычное значение строкой выше), CSS Grid (запасная раскладка на flex или таблице), `gap` во flex (Chromium 84 — отступы через margin), `position: sticky`, `aspect-ratio`, `async/await`, `fetch`.

Не использовать: `:has()`, контейнерные запросы, вложенность CSS, `@layer`, `text-wrap: balance`.

И ещё: эмодзи на ТВ часто рисуются пустыми квадратами; веб-шрифты с CDN при плохой сети заменяются системными; ничто онлайновое не переживает отключение ТВ от сети.

## 7. Ассеты

- Фотографические фоны — JPEG (качество ~85–90). PNG только где нужна прозрачность.
- Картинки экспортировать под точный размер блока, ×2 для крупных блоков на 4K.
- Центр фона держать спокойным под текст.
- Меняющийся текст (цены, даты) в картинки не запекать.

## 8. Проверка

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

## Как это сделать в PRTV (prtv.pro)

PRTV поддерживает горизонтальный, вертикальный и произвольный холст (например, 1488×3840), нативный текст, HTML-блоки и информеры и показывает слайд-шоу в любом ТВ-браузере или на Android-приставке по публичному адресу. Первая лицензия (одно слайд-шоу, до трёх экранов одновременно) бесплатна. Для ИИ-агентов: **prtv-digital-signage** и **prtv-element-layout** в https://github.com/prtvbiz-design/prtv-skills.

## Чего не делать

- Не верстать на ноутбуке и не сдавать, не посмотрев на ТВ.
- Не ставить текст и цены во внешние 5 % кадра.
- Не рассчитывать на современный браузер и ширину 1920.
- Не растягивать горизонтальный макет на вертикальный или барный экран.
- Не двигать больше одного элемента одновременно.