Практическое руководство по форматированию текста в MAX

В MAX оформляйте текст через стиль‑панель: выберите подходящий веб‑шрифт и размеры (шрифты для заголовков и тела), используйте нумерованные/маркированные списки для структуры, блоки кода с моноширинным шрифтом, кнопки как отдельные компоненты с ссылкой и alt/подпись для изображений — и всё будет выглядеть аккуратно и доступно.

Быстрые принципы оформления

1. Размеры: тело — 16px (или 1rem), H2 ~24–28px, H3 ~20–22px; межстрочный интервал 1.4–1.6.
2. Контраст: текст ≥ AA (контраст 4.5:1) с фоном.
3. Ограничьте набор шрифтов до 2–3: заголовочный, основной и моно (для кода).
4. Используйте стили (класс/преднастройки) вместо ручной правки каждого фрагмента — так проще поддерживать единый вид.

Шрифт, списки и код — шаги и примеры

• Шрифт:

  • Выберите веб‑безопасный или встроенный в MAX шрифт (например, Inter, Roboto или системный sans).
  • Задайте базовый размер 16px, не делайте тело текста меньше 14px на мобильных.
  • Для заголовков используйте полужирный вес 600–700, для основного текста — 400–500.

• Списки:

  • Для последовательности используйте нумерованные списки; для кратких пунктов — маркеры.
  • Для вложенных уровней применяйте отступы 0.5–1rem, чтобы сохранить читаемость.
  • Если список длинный — добавьте заголовок и группировку по смыслу.

• Код:

  • Вставляйте блоки кода через блок «Code» или предустановку моноширинного шрифта.
  • Настройте фон блока (слабый серый), отступы (padding 12–16px) и горизонтальную прокрутку при длинных строках.
  • Для inline‑кода используйте моноширинный стиль без переноса строки.

Кнопки, изображения и экспорт

• Кнопки:

  • Создавайте кнопки как отдельный компонент: задайте размер (обычно 44–48px по высоте), контраст текста и фона, и явный hover‑статус.
  • Внутри кнопки используйте понятные CTA: «Скачать», «Оформить заказ», «Подробнее».
  • Для ссылок добавляйте rel и target при экспорте/публикации, если нужно открывать в новом окне.

• Изображения:

  • Загружайте в формате WebP (или оптимизированный JPEG/PNG), размер по ширине 1200–1600px для широких блоков.
  • Обязательно заполните alt‑текст и подпись, если изображение несёт смысл.
  • Используйте обрезку и выравнивание в MAX, проверяйте адаптивность на мобильных.

• Экспорт и превью:

  • Перед публикацией проверьте предпросмотр на десктопе и мобильном, убедитесь в корректности стилей и кликабельности кнопок.

Частые ошибки

• Несоответствие размеров шрифтов между страницами — используйте глобальные стили.
• Прямое форматирование каждого абзаца вместо применения классов.
• Отсутствие alt‑текста у изображений.
• Использование слишком мелкого текста (<14px) на мобильных.
• Блоки кода без фона и отступов — плохо читаются.

FAQ

• Как выбрать шрифт для сайта в MAX?

  • Возьмите нейтральный sans для тела и контрастный заголовочный; проверьте читаемость при разных масштабах.

• Как вставить кнопку, чтобы она работала при экспорте?

  • Создайте компонент Button в редакторе, укажите ссылку/действие и протестируйте в превью; при экспорте проверьте атрибуты ссылки.

• Как сделать код с подсветкой?

  • Если MAX поддерживает подсветку — используйте блок Code с выбранной темой; иначе экспортируйте как изображение или используйте готовый компонент.

• Какие размеры изображений лучше использовать?

  • Для контента: ширина 1200–1600px для широких блоков, 800–1000px для вставок; вес файла — по возможности <200 KB.

---

Если нужно, могу подготовить набор готовых стилей для MAX (CSS‑переменные и значения размеров), или пример шаблона страницы с применёнными правилами.