Фундамент → 1.4
Типографика
Бренд использует два шрифта с чётким разделением по контексту применения. Никогда не смешивайте их в одном носителе без необходимости.
Шрифты бренда
DINPro
Бренд-шрифт · не Google Fonts
Применяется на: форме сотрудников, бейджах, вывесках, транспорте, полиграфии. Лицензионный шрифт — передаётся дизайнером.
--font-brand
Fira Sans
Веб-шрифт · Google Fonts
Применяется на: сайте oclinica.ru, в цифровом брендбуке, онлайн-материалах. Подключён через next/font/google (кириллица + латиница).
--font-web
Правило применения
| Носитель | Шрифт |
|---|---|
| Сайт, цифровые материалы, брендбук | Fira Sans |
| Форма сотрудников, бейджи | DINPro |
| Вывески, таблички, навигация | DINPro |
| Брендирование транспорта | DINPro |
| Визитки, листовки, полиграфия | DINPro |
| Telegram-бот, пуш-уведомления | Fira Sans (системный) |
DINPro — шкала заголовков
Бренд-шрифт. Используется в оффлайн-носителях. Отображается с системным фоллбэком Arial, если шрифт не установлен.
40px / 2.5rem
w700 · lh1.2
32px / 2rem
w700 · lh1.25
24px / 1.5rem
w700 · lh1.3
20px / 1.25rem
w700 · lh1.35
16px / 1rem
w700 · lh1.4
14px / 0.875rem
w700 · lh1.4
Fira Sans — полная шкала
Веб-шрифт. Используется на сайте и в цифровых материалах. Загружается через Google Fonts.
40px / 2.5rem
w600 · lh1.2
32px / 2rem
w600 · lh1.25
24px / 1.5rem
w600 · lh1.3
20px / 1.25rem
w500 · lh1.35
16px / 1rem
w500 · lh1.4
14px / 0.875rem
w500 · lh1.4
16px / 1rem
w400 · lh1.6
14px / 0.875rem
w400 · lh1.6
12px / 0.75rem
w400 · lh1.5
12px / 0.75rem
w500 · lh1.4
10px / 0.625rem
w600 · lh1.4
Живой пример — блок контента
Типичная комбинация заголовка и тела текста на сайте.
Наши специалисты
Запись к ЛОР-врачу
без очереди и ожидания
В нашей клинике работают специалисты высшей категории с опытом от 15 лет. Диагностика и лечение заболеваний уха, горла, носа и смежных органов.
Лицензия № ЛО-77-01-018234 · Москва, ул. Примерная, д. 1
Типографика сайта — факт на 23.03.2026
Реальные размеры и стили, задокументированные по perm.oclinica.ru/lor. Источник: скриншот + CSS темы clinic_bootstrap_mobile.
| Элемент / блок | Шрифт | Размер | Weight | Цвет | Пример |
|---|---|---|---|---|---|
| H1 страницы (над Hero) | Fira Sans | 36px | 700 | #cb9768 | ЛОР Клиника ухо, горло, нос… |
| H2 секции | Fira Sans | 36px | 700 | #000000 | Приём ведут опытные ЛОР врачи |
| Заголовок Hero-баннера | Fira Sans | 22px | 700 | #333333 | ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ… |
| Статистика (цифра+текст) | Fira Sans | ~18px | 700 | #60959c | Ежедневно 27 ЛОР врачей… |
| Подзаголовок секции | Fira Sans | ~14px | 400 | #374151 | Фундаментальная теоретическая… |
| Пункт checklist (ключ) | Fira Sans | 13px | 700 | #111827 | БЕЗОПАСНО |
| Пункт checklist (описание) | Fira Sans | 13px | 400 | #374151 | оперируют хирурги с 15-летним… |
| Имя врача в карточке | Fira Sans | 12px | 500 | #60959c | Макарова Людмила Германовна |
| Специализация врача | Fira Sans | 11px | 400 | #374151 | ЛОР врач, сурдолог |
LLM-спецификация
Машиночитаемые данные раздела для использования AI-ассистентами при разработке дизайна, макетов и кода. Нажмите «Скопировать» чтобы получить полный текст.
LLMLLM-спецификация
Шрифты бренда
| Шрифт | Тип | Применение | CSS font-family |
|---|---|---|---|
| DINPro | Бренд | Оффлайн, физические носители (бейджи, таблички, транспорт, форма) | 'DINPro', Arial, sans-serif |
| Fira Sans | Веб | Сайт, цифровые материалы, брендбук | 'Fira Sans', sans-serif · Google Fonts · 300/400/500/600 |
DINPro — шкала (оффлайн)
| Стиль | font-size | rem | weight | line-height |
|---|---|---|---|---|
| h1 | 40px | 2.5rem | 700 | 1.2 |
| h2 | 32px | 2rem | 700 | 1.25 |
| h3 | 24px | 1.5rem | 700 | 1.3 |
| h4 | 20px | 1.25rem | 700 | 1.35 |
| h5 | 16px | 1rem | 700 | 1.4 |
| h6 | 14px | 0.875rem | 700 | 1.4 |
Fira Sans — шкала (веб)
| Стиль | font-size | rem | weight | line-height | letter-spacing |
|---|---|---|---|---|---|
| h1 | 40px | 2.5rem | 600 | 1.20 | -0.025em |
| h2 | 32px | 2rem | 600 | 1.25 | -0.020em |
| h3 | 24px | 1.5rem | 600 | 1.30 | -0.010em |
| h4 | 20px | 1.25rem | 500 | 1.35 | 0em |
| h5 | 16px | 1rem | 500 | 1.40 | 0em |
| h6 | 14px | 0.875rem | 500 | 1.40 | +0.010em |
| body | 16px | 1rem | 400 | 1.60 | 0em |
| body-sm | 14px | 0.875rem | 400 | 1.60 | 0em |
| caption | 12px | 0.75rem | 400 | 1.50 | +0.020em |
| label | 12px | 0.75rem | 500 | 1.40 | +0.030em |
| overline | 10px | 0.625rem | 600 | 1.40 | +0.100em |
Применение по носителю
| Носитель | Шрифт |
|---|---|
| Сайт, цифровые материалы, брендбук | Fira Sans |
| Форма сотрудников, бейджи | DINPro |
| Вывески, таблички, навигация | DINPro |
| Брендирование транспорта | DINPro |
| Визитки, листовки, полиграфия | DINPro |
| Telegram-бот, пуш-уведомления | Fira Sans (системный) |
Правила применения