Шрифты и стиль кнопок

Две глобальные настройки, которые задают тональность всего сайта. Правильный выбор — и витрина сразу выглядит собранно.

10 семейств шрифтов

В toolbar → Site → Шрифты → выпадающий список:

Серьезные / деловые:

• Inter
• Roboto
• Open Sans
• IBM Plex Sans

Современные / рестораны высокого уровня:

• Manrope
• Montserrat
• DM Sans

Дружелюбные:

• Nunito
• Poppins

Моноширинные для акцентов:

• JetBrains Mono

Для QR-меню Misea по умолчанию использует пару Manrope (заголовки) + Inter (текст) — универсальная для кафе и ресторанов.

Раздельные шрифты

Одна кнопка = одно семейство для всего сайта. Но вы можете разделить:

• Шрифт заголовков — для H1, H2, H3, названий блюд в каталоге.
• Шрифт основного текста — для описаний, цен, кнопок.

Переключатель в настройках шрифтов. Обычная комбинация: акцентный заголовочный (Manrope, Montserrat) + нейтральный основной (Inter, DM Sans).

Размеры

Базовый размер текста — слайдер от 12 до 24 px:

• 14 px — компактно, плотно. Для меню с большим количеством блюд.
• 16 px — стандарт. Хорошо читаемо на всех устройствах.
• 18–20 px — крупно, премиально. Для ресторанов с небольшим меню и акцентом на читаемость.

Заголовки масштабируются пропорционально: H1 = 2.5× базового, H2 = 1.8×, H3 = 1.3×.

Кнопки

Три параметра:

1. Форма

• Прямоугольная — классика, деловой тон.
• Слегка скруглённая (4–8 px) — стандарт современных сайтов.
• Сильно скруглённая (16–24 px) — «pill» стиль, дружелюбно.
• Полностью круглая — только для иконочных кнопок.

2. Размер

• Compact — мельче, меньше padding.
• Default — стандарт.
• Large — выдающиеся CTA.

3. Визуальный стиль

• Filled — сплошной Primary-цвет. Максимальный контраст.
• Outlined — только рамка. Для вторичных действий.
• Ghost — только текст + лёгкий hover. Для третьих ролей.

Комбинация: на одной странице одна Filled-кнопка (CTA), остальные — Outlined или Ghost.

4. Тень

• Нет — плоский стиль.
• Лёгкая — минимальный lift.
• Выраженная — «приподнятый» эффект.

Для современных минималистичных сайтов — без тени. Для «игривых» / детских кафе — с выраженной.

Предпросмотр

Внизу окна настроек — live-секция «Примеры»:

• Заголовок h1.
• Абзац body-текста.
• Три варианта кнопок.
• Карточка-плашка (мини-симуляция карточки блюда).

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

• Меньше = лучше. Один шрифтовый контраст, один размер кнопок. Не миксуйте 4 семейства и 3 формы — сайт выглядит «собранным из случайных кусков».
• Читаемость первее красоты. 12-px Bebas Neue может выглядеть стильно, но никто не читает мелкий декоративный шрифт в меню. Мобильный браузер всё равно поднимет до 16 px.
• Оставьте Misea-дефолты (Manrope + Inter, 16 px, скруглённые 8 px, filled shadow-легкая) если не уверены. Они проверены на десятках ресторанов.

Следующие шаги

• Цветовая палитра.
• Анимированные фоны.