Математический центр
Половина ширины viewBox. Легко вычислить, но он игнорирует плотность знака и букв.
Интерактивный гайдНе по линейке.
Не по линейке.
По глазу.
У логотипа есть математическая рамка и визуальная масса. Они почти никогда не совпадают. Здесь можно увидеть разницу и подобрать компенсацию без гадания.
Лаборатория
центра
Двигайте ширину контейнера. Пока места мало, компенсация растёт вместе с защитным полем. После достижения нормы она фиксируется: контейнер расширяется, а логотип больше не «уплывает».
Живая область размещениякоррекция фиксирована
слева 332 pxсправа 296 px
геометрическая оськомпенсированный центр
Что именно
мы ровняем
Центр рамки — полезная отправная точка. Финальное положение задаётся не размерами SVG, а распределением визуального веса внутри него.
Оптический центр
Точка равновесия пятен. Знак и буквенная часть распределяют массу несимметрично — поэтому связке нужна небольшая оптическая компенсация.
Фиксируем, не тянем
После полного защитного поля коррекция остаётся постоянной. На широких экранах меняется только свободное пространство.
В строке
и у края
Логотип — не обычная картинка. Для него важны высота прописных, старт текстовой части и контекст соседних элементов.
Вертикально: по высоте прописных
В строке ориентируйтесь на cap-height текста, а не на геометрическую середину line-height. Чаще всего нужна коррекция вверх на 4–7% от кегля.
Рекомендуется
для бизнеса
.logo { vertical-align: middle;
transform: translateY(-0.06em); }
transform: translateY(-0.06em); }
Слева: можно, но с правилом
Не запрещаем левое размещение: оно нормально для навигации. Но абзац под логотипом выравнивайте по началу букв «ВТБ», а не по левому краю знака.
Текст по wordmark
Финансовые решения начинаются на одной оси с текстовой частью логотипа.
--vtb-word-start: 72px;
padding-inline-start: var(--vtb-word-start);
padding-inline-start: var(--vtb-word-start);
Рядом с текстом: держим воздух
Минимальная дистанция до текста — высота средней полосы знака. На маленьких размерах округляйте позицию до целого пикселя.
1× безопасная зона
Банк для людей и бизнеса
Когда лучше центрировать
Для обложек, заставок, пустых состояний и одиночных бренд-моментов. Не смешивайте оптическое центрирование с колонной текста слева.
Не смешивать оси
Этот абзац создаёт новую ось и спорит с центром логотипа.
Быстрая
проверка
Четыре решения, которые сохраняют ощущение баланса на любом носителе.
Делайте
- Начинайте с центра рамки и добавляйте один стабильный optical token.
- Проверяйте на белом и тёмном фоне, а также в монохроме.
- Сохраняйте защитное поле даже внутри кнопки или карточки.
- Для UI округляйте координаты до целых физических пикселей.
Не делайте
- Не растягивайте компенсацию вместе с шириной экрана бесконечно.
- Не центрируйте по видимой ширине отдельных букв вручную каждый раз.
- Не ставьте абзац под знак без учёта начала текстовой части.
- Не меняйте viewBox ради исправления конкретного макета.
Токены
для макета
Зафиксируйте числа один раз и используйте их в Figma, CSS и шаблонах. Тогда «на глаз» превращается в воспроизводимое правило.
| Токен | Значение | Назначение |
|---|---|---|
| --vtb-optical-x | +18 px при ширине логотипа 220 px | Финальная горизонтальная компенсация |
| --vtb-clearspace | 64 px | Минимальное поле вокруг связки |
| --vtb-inline-y | −0.06 em | Подъём логотипа относительно строки |
| --vtb-word-start | 72 px | Ось текста под логотипом слева |
| --vtb-min-desktop | 120 px | Минимальная ширина на десктопе |
| --vtb-min-mobile | 96 px | Минимальная ширина на мобильном |
Важно: значения в этом прототипе — рабочая калибровка для показанного SVG. Перед внесением в официальный брендбук сверяйте их с мастер-файлом логотипа и утверждённой охранной зоной.