Типографика стандартных блоков Tilda: единые шрифты и размеры на разных экранах

Заголовки в нескольких стандартных блоках должны выглядеть одинаково, а на телефоне — становиться компактнее. Менять каждый по отдельности долго, особенно когда нужно проверить шрифт, размер и интервалы.

Конструктор типографики собирает выбранные тексты в один набор и задаёт им общие правила. Разберём, что стоит объединять, как работают ограничения по ширине и почему пустое поле не означает сброс стиля.

Сначала составьте небольшой список: например, заголовки разделов или описания услуг. В «Где применять» ограничьте нужные блоки, затем выберите конкретные текстовые элементы в каждом стандартном блоке.

Не собирайте в один набор главный заголовок, цену и мелкое примечание только потому, что всё это текст. Общая настройка будет действовать на весь выбранный список. Если элементам нужен разный размер или цвет, разделите их по назначению. Для первого подключения удобнее взять два-три похожих блока, чтобы легко сравнить результат и заметить случайно выбранную подпись.

Задайте шрифт, размер, насыщенность, интервалы, выравнивание и цвет — только те свойства, которые действительно нужно изменить. Пустые поля не переопределяют соответствующий стиль. Так можно, например, поменять размер, сохранив исходные цвета разных блоков.

Это полезно и при постепенной настройке. Сначала проверьте один параметр, затем добавляйте остальные. Не заполняйте все поля случайными значениями ради завершённой панели: такая настройка может убрать различия, которые были нужны в исходном дизайне. После применения перечитайте заголовки и описания вместе с их фоном и соседними кнопками.

Название семейства в конструкторе само по себе не загружает файл шрифта. Если нужного шрифта ещё нет на сайте, сначала подключите его средствами Tilda. Затем укажите уже доступное семейство в настройках мода.

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

Для каждого нужного размера экрана добавьте отдельное правило. Оно работает до указанной ширины включительно. Если на маленьком экране подходят несколько правил, свойства меньшего брейкпоинта переопределяют соответствующие свойства более широкого.

Например, можно задать один размер для экранов до 960 px и меньший — до 640 px. На ширине 640 px действует и более узкая настройка. Проверяйте сам порог и размер чуть выше него. Так проще понять, какое правило сейчас отвечает за текст, и не лечить переносы ещё одной случайной копией кода.

Скопируйте код в T123 после нужных блоков и опубликуйте страницу. Если прежний код типографики уже меняет те же элементы, согласуйте настройки вместо наложения ещё одного набора поверх.

Откройте страницу на широком экране, планшетной ширине и телефоне. В каждом случае проверьте самые длинные заголовки и многострочные описания. Красивый размер сам по себе не гарантирует удобную вёрстку: текст может увеличить блок, придвинуть кнопку или сделать соседние карточки разной высоты. Оцените весь раздел, а не одну строку.

После настройки изменяйте ширину уже открытого окна и наблюдайте за переносами. Это помогает найти промежуточный размер, который легко пропустить при проверке только двух готовых макетов.

• В набор попали только нужные тексты стандартных блоков.
• Пустые свойства сохранили исходное оформление.
• Подключён правильный шрифт с нужными символами.
• Меньшее правило переопределяет нужные свойства на своём пороге.
• Длинные заголовки не закрывают кнопки и соседний текст.

Если разные элементы требуют постоянных исключений, лучше разделить их на более понятные группы.

Читайте также: Обрезка текста в Tilda: многоточие и одинаковая длина описаний · Анимированный градиент текста в Tilda: как сделать плавный перелив.