Montserrat
Главный голос Artemy Design System: интерфейсы, презентации, заголовки, документы. Используй Light для больших спокойных заголовков, Regular для текста, Medium/SemiBold для UI.
ADS / typography / text rules
Текст и типографика
Правила для заголовков, абзацев, подписей, таблиц, форм, статусов и презентаций. Главная идея: текст не должен бороться с контейнером. Сначала читаемость, потом декоративность.
Шрифты системы
Основано на файлах общей системы: Montserrat как база, mono только для технических меток, максимум 2 шрифта в одном проекте.
Manrope
Проектный sans для SaaS, web UI и плотных интерфейсов. Хорошо подходит для ВИТ-операционных экранов, где нужна современная, мягкая читаемость.
Source Sans 3
Для длинного чтения: документы, описания продукта, требования, аналитические записки. Если текста много, Source Sans 3 спокойнее Montserrat.
IBM Plex Mono
Основной mono-акцент: ID, даты, статусы, версии, коды, токены, короткие технические подписи. Не использовать для длинных абзацев.
JetBrains Mono / Roboto Mono
Для кода, dev-документов, табличных технических данных и fallback mono. В интерфейсе использовать дозированно.
Bebas Neue
Только короткий акцент: обложки, постеры, редкие презентационные заголовки. Нельзя использовать в рабочих интерфейсах и длинном тексте.
Главные правила
Если текст выглядит тесно, проблема почти всегда в ширине строки, line-height или недостаточном padding.
Ширина строки
Для длинного русского текста держи строку в диапазоне 58-82 символа. В карточках лучше 42-64 символа. Если строка длиннее, увеличь отступы или разбей блок на две зоны.
Line-height
- Крупный заголовок: 1.05-1.15.
- Заголовок карточки: 1.2-1.3.
- Обычный текст: 1.55-1.7.
- Мелкие подписи: 1.35-1.5.
Отступы вокруг текста
Чем больше текста, тем больше внутренний отступ. До 2 строк: 12-16 px. Небольшая карточка: 16-20 px. Длинный текстовый блок: 24-44 px. Hero/манифест: 36-56 px.
Заголовки
Заголовок должен объяснять вывод, а не называть тип блока. Используй text-wrap: pretty для крупных заголовков, чтобы не оставлять одно слово на последней строке.
Линии
Линия нужна для разделения смыслов, а не для украшения. Используй тонкую теплую линию 1 px между meta и body, в таблицах, в карточках, перед раскрываемым кодом.
Моноширинный текст
Mono использовать для ID, времени, чисел, токенов, коротких технических подписей. Не набирай mono длинные абзацы: они становятся шумными и хуже читаются.
Пример длинного текста
Так должен вести себя блок, когда фраза внезапно стала длиннее.
вит / шкаф / рекомендация
Через 8 минут будет риск нехватки стрипсов на второй полке теплового шкафа.
Добавь 6 стрипсов сейчас, если поток заказов не начал снижаться. Не закладывай лишнюю партию после пика: система покажет спад отдельным состоянием.
Контейнер не сжимает шрифт и не обрезает текст. Он дает строке нормальную ширину, абзацу нормальный line-height, а соседним элементам достаточно расстояния.
Типографическая шкала
Не надо масштабировать шрифт от viewport хаотично. Используй роли текста.
Hero title
48-72 px, line-height 1.02-1.08. Только для первого экрана или сильного раздела. Не использовать внутри карточек.
Section title
26-36 px, line-height 1.15-1.25. Один смысловой заголовок на секцию, рядом короткая note-строка.
Card title
17-22 px, line-height 1.25-1.35. Заголовок карточки должен выдерживать 2 строки без изменения высоты кнопок и сетки.
Body text
14-18 px, line-height 1.55-1.7. Для документов и длинных правил лучше 16-17 px, для плотных BI-карточек 13.5-14 px.
Meta / caption
11-13 px, line-height 1.35-1.5. Используется для ID, времени, статуса, подписи картинки, токена.
Numbers
Mono/tabular, 28-56 px по роли. У числа всегда есть подпись и единица измерения: %, минут, штук, руб.
Что не делать
Типографика ломается не от длинного текста, а от отсутствия правил для длинного текста.
Как делать
- Проверять компоненты на длинных русских фразах.
- Давать блокам адаптивный padding через clamp.
- Ограничивать max-width текста внутри широких секций.
Смотреть
- Не стало ли в строке больше 82 символов.
- Есть ли расстояние после заголовка.
- Не выглядит ли note как основной текст.
Не делать
- Не уменьшать шрифт, чтобы впихнуть текст.
- Не красить фоны do/watch/dont в разные цвета.
- Не делать карточку шире только ради одной длинной строки.