Typography: шрифты и стили текста в редакторе

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

​

Где это найти

1. Выберите текстовый элемент (заголовок, абзац, текст на кнопке и т. д.)
2. Перейдите в правую панель
3. Откройте раздел Typography

​

Настройки Typography

​

Font

• Выбор семейства шрифтов

​

Weight

• Задаёт насыщенность (жирность) текста
• Варианты — от тонкого до жирного

​

Color

• Задаёт цвет текста
• Можно использовать палитру или значения RGB

​

Size

• Задаёт размер текста
• Обычно в пикселях (px)

​

Align

• Выравнивание текста:
  • По левому краю (Left)
  • По центру (Center)
  • По правому краю (Right)

​

Line Height

• Задаёт расстояние между строками текста
• Помогает улучшить читаемость

​

Letter Spacing

• Задаёт расстояние между буквами
• Полезно для заголовков и стилизованного текста

​

Decoration

• Добавляет стили текста:
  • Подчёркивание (Underline)
  • Зачёркивание (Strikethrough)
  • Без оформления (None)

​

Case

• Управляет регистром текста:
  • Все буквы прописные (Uppercase)
  • Все буквы строчные (Lowercase)
  • Каждое слово с заглавной (Capitalized)

​

Важно: наследование

Настройки Typography работают по схеме родитель → дочерний элемент:

• Если применить шрифт к родительскому элементу (например, секции или контейнеру)
• Все дочерние элементы внутри автоматически наследуют этот шрифт

👉 Это работает только если у дочерних элементов не задан собственный шрифт

​

Пример

• Задайте шрифт для секции → Inter
• Весь текст внутри будет в Inter

Если вы измените шрифт у одного текстового блока →
👉 только этот блок будет отличаться

​

Рекомендации

• Задавайте шрифты у родительских контейнеров — так оформление будет единым
• Переопределяйте только при необходимости
• Для заголовков используйте больший размер
• Делайте основной текст читаемым
• Не используйте слишком много разных стилей шрифта