Типографика на сайте: размеры, иерархия, интервалы, выбор шрифтов и лицензии

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

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

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

Сначала роли текста, потом размеры

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

Плохая система выглядит примерно так: основной текст 16 px, в соседнем блоке 17 px, в карточках 18 px; заголовки разделов 36, 38, 40 и 42 px в зависимости от того, когда они создавались. По отдельности разница почти незаметна, но весь сайт постепенно начинает выглядеть неряшливо.

Поэтому полезно начать не с вопроса «каким должен быть H1?», а с вопроса «сколько типов текста мне вообще нужно?». Для большинства сайтов пяти-шести ролей достаточно. Исключения возможны, но они должны быть осознанными, а не возникать потому, что каждый новый блок настраивался заново.

В качестве стартовой, а не обязательной системы можно ориентироваться примерно так:

основной текст — 16–20 px;
второстепенный текст — 13–16 px;
заголовок карточки — 22–30 px;
заголовок раздела — 32–48 px;
крупный заголовок первого экрана — примерно 48–80 px на десктопе.

Это не стандарт и не таблица правильных значений. Один шрифт при 18 px может визуально выглядеть заметно крупнее другого при тех же 18 px. font-size задает размер шрифта, но реальные пропорции букв зависят от самой гарнитуры. Поэтому любые числовые рекомендации нужно проверять на конкретном шрифте и реальном контенте.

Именно поэтому идея механически строить все размеры по золотому сечению тоже не особенно полезна. Модульная шкала может помочь ограничить количество случайных значений, но никакого универсального коэффициента хорошей веб-типографики не существует. Если взять 16 px и последовательно умножать размер на 1,618, быстро получится что-то вроде:

16 → 26 → 42 → 68 → 110 px

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

Размер текста сам по себе почти ничего не решает

Уменьшить основной текст до 12–13 px ради ощущения аккуратности — простой способ действительно сделать макет визуально легче на экране дизайнера и одновременно хуже для чтения.

При этом нет правила WCAG, согласно которому основной текст сайта обязан быть именно 16 px или больше. Поэтому формулировка «минимальный допустимый размер — 16 px» была бы неверной. Диапазон около 16–20 px просто является разумной стартовой точкой для обычного основного текста, после которой нужно оценивать конкретную гарнитуру, длину строк, контраст, устройство и условия чтения.

Особенно осторожно стоит относиться к мелкому тексту в формах, карточках, меню, подписях и юридически значимых элементах. Серый текст 12 px не становится хорошим только потому, что он считается «второстепенным».

Отдельная тема — масштабирование. WCAG требует, чтобы текст можно было увеличить до 200% без потери контента или функциональности. Поэтому сайт полезно проверять не только в исходном масштабе: при увеличении текст не должен обрезаться, исчезать под соседними элементами или делать интерфейс неработоспособным.

Интерлиньяж: почему нормальный шрифт может выглядеть тяжелым

Интерлиньяж — расстояние между строками. В CSS им управляет свойство line-height. Если строки стоят слишком близко, даже обычный Regular начинает выглядеть тяжелым, а длинный текст превращается в плотную массу. Если расстояние слишком большое, строки перестают восприниматься как один абзац.

Для основного текста в качестве стартовой точки часто удобно попробовать line-height примерно 1.4–1.7 от размера шрифта. Например, для текста 18 px это может быть около 25–30 px. Но это снова не стандарт: разные гарнитуры требуют разного пространства.

У крупных заголовков интерлиньяж, как правило, плотнее. Если заголовок занимает две-три строки, слишком большое расстояние между ними буквально разваливает фразу на отдельные блоки. Поэтому крупный display-текст иногда хорошо работает с line-height около 1–1.15, а в некоторых гарнитурах и немного плотнее.

Здесь важно не путать дизайнерскую рекомендацию с требованиями доступности. WCAG 2.2 не требует, чтобы каждый текст на сайте изначально имел line-height: 1.5. Критерий Text Spacing требует, чтобы пользователь мог увеличить межстрочный интервал минимум до 1,5 размера шрифта, межбуквенный до 0,12, расстояние между словами до 0,16 размера шрифта и расстояние после абзацев до 2 размеров шрифта без потери контента и функциональности.

То есть 1.5 — полезный ориентир для длинного текста, но не магическое значение, которое нужно назначать всем заголовкам, кнопкам и подписям.

Не растягивайте текст на весь монитор

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

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

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

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

С `letter-spacing` лучше ничего не делать без причины

Межбуквенное расстояние может менять характер текста, но его часто используют там, где оно вообще не требуется. Хорошая гарнитура уже содержит спроектированные расстояния между символами. CSS-свойство letter-spacing добавляет или уменьшает расстояние относительно естественного интервала шрифта: положительные значения раздвигают символы, отрицательные сближают.

Небольшое увеличение tracking может хорошо работать в короткой подписи прописными буквами. Небольшое отрицательное значение иногда помогает плотному крупному заголовку. Но пытаться «улучшить» таким способом весь основной текст обычно бессмысленно.

Особенно осторожно проверяйте кириллицу, маленькие размеры и тонкие начертания. Настройка, которая прекрасно смотрится на английском CREATIVE STUDIO, может значительно хуже выглядеть на русском тексте.

Иерархия строится не только размером

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

Например:

72 px / Medium — главный заголовок
42 px / Medium — заголовок раздела
24 px / Semibold — заголовок карточки
18 px / Regular — основной текст
14 px / Regular — подпись

Здесь Bold вообще может не понадобиться.

CSS font-weight задает насыщенность шрифта, но доступные веса зависят от конкретной font-family. Если нужного начертания в гарнитуре нет, браузер выбирает доступный вариант по правилам сопоставления веса — он не создает автоматически полноценное дизайнерское начертание, которого не существует в шрифтовом файле.

Поэтому, если дизайн действительно использует 400, 500 и 700, нужно убедиться, что соответствующие начертания существуют и корректно подключены.

Один хороший шрифт часто лучше двух посредственно подобранных

Для профессионального дизайна не обязательно использовать пару шрифтов. Одна качественная гарнитура с несколькими начертаниями прекрасно может обслуживать весь сайт: Regular для текста, Medium для интерфейса, Semibold для заголовков.

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

Правило «возьмите serif для заголовков и sans-serif для текста» иногда дает хороший результат, но ничего само по себе не гарантирует. Важно смотреть на реальные пропорции букв, высоту строчных, ширину, насыщенность, характер, цифры, кириллицу и доступные начертания.

Именно поэтому готовые подборки «10 идеальных пар шрифтов» полезны только как источник идей, а не как готовое решение.

Кириллицу проверяем отдельно

Если сайт будет на русском языке, недостаточно увидеть красивый латинский алфавит на странице гарнитуры. Нужно посмотреть, как выглядят русские строчные и прописные буквы, цифры, кавычки, тире, знак рубля и необходимые начертания. Кириллица может формально существовать, но визуально быть значительно слабее латинской части или иметь другой характер.

Лучше сразу проверять шрифт на реальном тексте проекта. Например:

Фонд помогает семьям получить необходимую поддержку. За год к программе присоединились 12 487 человек.

Так одновременно видны кириллица, цифры и пунктуация.

То же относится к реальным заголовкам. Lorem ipsum хорошо показывает общий объем текста, но совершенно не показывает, что название проекта занимает четыре строки, а кнопка «Подробнее» в реальности называется «Подать заявку на участие в программе».

Финальная проверка типографики должна проходить на настоящем контенте, включая самый длинный заголовок, длинную карточку, фамилии, числа и реальные кнопки.

Desktop и mobile не нужно масштабировать одним коэффициентом

Если главный заголовок на десктопе имеет размер 76 px, это не означает, что для мобильного нужно вычислить пропорцию и получить математически правильные 39,6 px.

На маленьком экране меняется сама композиция. Главные display-заголовки обычно приходится уменьшать заметнее, а основной текст может остаться почти тем же, потому что его задача не изменилась — он должен быть читаемым.

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

H1 — это не название большого шрифта

H1, H2, H3 описывают структуру документа, а не визуальный размер текста. Большой декоративный текст не обязан становиться H1 только потому, что он занимает половину первого экрана.

Tilda позволяет назначать SEO-теги H1—H3 в настройках блоков с заголовками, а в некоторых других элементах — уровни вплоть до H6. В своей инструкции по доступности Tilda рекомендует один H1 на странице и последовательную иерархию остальных уровней.

Поэтому сначала определяем смысловую структуру страницы, а уже затем визуально оформляем ее. Не нужно подбирать SEO-тег по размеру букв.

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

Вместо вопроса «какой шрифт сейчас выглядит современно?» полезнее пройти небольшой практический фильтр. Сначала проверяем языки. Если сайт русскоязычный, нужна нормальная кириллица. Затем смотрим начертания: действительно ли существуют Regular, Medium, Semibold или другие веса, которые предполагает дизайн. После этого проверяем основной текст, а не только эффектный заголовок 80 px.

Дальше оцениваем характер гарнитуры. У благотворительного фонда, технологического сервиса, бара и спортивного проекта действительно могут быть разные визуальные задачи. Но лучше избегать псевдопсихологических объяснений вроде «округлые буквы повышают доверие». Обычно достаточно честного вопроса: соответствует ли характер шрифта визуальному языку бренда и не мешает ли он читать текст.

И наконец, смотрим, сколько файлов и начертаний действительно понадобится. Подключать Light, Regular, Medium, Semibold, Bold, ExtraBold и Black «на всякий случай» нет смысла, если в проекте используются только три из них.

Variable fonts позволяют хранить несколько вариаций, например диапазон веса или ширины, в одном шрифтовом файле вместо отдельного файла для каждого фиксированного начертания. Но из этого не следует, что любой variable font автоматически меньше или быстрее набора статических файлов: сравнивать нужно конкретные ресурсы.

Подключение шрифтов в Tilda

В Tilda можно использовать Google Fonts, собственные файлы и другие предусмотренные платформой способы подключения. Для Google Fonts путь в актуальной документации указан через Настройки сайта → Шрифты и цвета → Расширенные настройки.

Для собственных шрифтов Tilda поддерживает загрузку файлов WOFF и WOFF2, а также работу с вариативными шрифтами. При этом штатная загрузка собственных файлов имеет ограничения: в настройках сайта можно загрузить до трех вариантов шрифта.

Если используется подключение через внешний CSS-файл, сервер, на котором размещены файлы, должен корректно отдавать их для нужного домена; в инструкции Tilda отдельно обращает внимание на CORS. Кроме того, внешний CSS со шрифтом нужно проверять именно на опубликованной странице.

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

Лицензия: файл шрифта и право его использовать — разные вещи

То, что файл .woff, .otf или .ttf удалось найти в интернете, ничего не говорит о праве разместить его на коммерческом сайте.

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

Например, шрифты под SIL Open Font License можно использовать на сайтах, в документах, графике и логотипах; при распространении самих файлов появляются дополнительные условия, в том числе сохранение лицензионной информации.

С коммерческими шрифтами правила могут быть совершенно другими. Лицензия может отдельно регулировать использование на компьютере, сайте, в приложении, передачу файлов клиенту, self-hosting и другие сценарии. Поэтому формулировка «мы купили шрифт» сама по себе недостаточна. Нужно понимать, что именно разрешает приобретенная лицензия.

Особенно показателен Adobe Fonts. Adobe разрешает веб-использование шрифтов сервиса при подходящей активной подписке, но требует подключать их на сайте через предоставленный Adobe embed-код. Условия Adobe не разрешают просто взять web-font из сервиса, загрузить его как собственный файл в конструктор сайта и раздавать самостоятельно. Для клиентского сайта Adobe также требует, чтобы шрифты загружались через подписку самого клиента либо чтобы web-проект был передан ему предусмотренным Adobe способом.

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

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

Базовая система, с которой можно начать

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

Сначала настройте основной текст. Например:

18 px / Regular / line-height около 1.5

Затем задайте заголовок карточки:

24 px / Medium / line-height около 1.2–1.3

Потом заголовок раздела:

40 px / Medium или Semibold / line-height около 1.1–1.2

И только после этого крупный заголовок:

64–72 px / Medium / более плотный line-height

Не воспринимайте эти значения как готовый пресет. Смысл подхода в другом: сначала создать несколько четких ролей, затем адаптировать их под конкретную гарнитуру и композицию.

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

На этом уровне уже можно сделать хороший, читаемый и аккуратный сайт самостоятельно.

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

Как превратить типографику в систему

Главный профессиональный навык здесь — не умение подобрать красивое число для H1. Гораздо важнее уметь ограничивать количество решений.

Представим, что на сайте есть:

H1 — 72 px
еще один H1 — 68 px
заголовки разделов — 44, 42, 40 и 38 px
карточки — 24, 22 и 20 px
текст — 18, 17 и 16 px

Технически всё выглядит приемлемо. Нет шрифта 9 px, нет заголовка 150 px, ничего явно не сломано. Но у проекта уже нет единой типографической логики.

Первое, что имеет смысл сделать, — перестать смотреть на блоки и начать смотреть на роли. Например:

Display — главный акцент страницы;
Section — заголовок смыслового раздела;
Card — заголовок карточки;
Body — основной текст;
Small — вторичная информация;
UI — кнопки, элементы меню, формы.

После этого каждый текст на сайте должен либо получить одну из этих ролей, либо иметь понятную причину быть исключением. Это важный принцип: хорошая система не запрещает исключения. Она делает исключения заметными. Если на одном экране нужен огромный декоративный заголовок 96 px, никто не обязан втискивать его в общий H1. Но если у четырех одинаковых карточек заголовки 22, 23, 24 и 25 px, это не четыре дизайнерских решения. Это отсутствие решения.

Стройте систему от Body, а не от самого большого заголовка

Очень легко начать типографику с эффектного H1: сделать его 80 px, затем подобрать H2, H3, подписи и в конце попытаться куда-то вставить основной текст. На практике устойчивее начинать с того, что пользователь будет читать дольше всего.

Сначала выберите Body и проверьте его на реальном абзаце. Например, 18 px. Настройте ширину текстовой колонки и line-height так, чтобы этот текст действительно было удобно читать. Затем от него стройте остальные уровни.

Для одного проекта может получиться:

Body — 18
Card — 24
Section — 40
Display — 68

Для другого:

Body — 17
Card — 22
Section — 32
Display — 52

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

Одинаковые 18 px — не одинаковый текст

Это одна из причин, по которой готовые таблицы размеров нельзя просто переносить между проектами. Размер 18 px относится к размеру шрифта как CSS-параметру, но визуальная величина строчных букв зависит от метрик конкретной гарнитуры. Именно поэтому в CSS существует, например, font-size-adjust: он позволяет учитывать размер строчных букв при использовании основной или резервной гарнитуры.

На практике это означает простое правило: если поменяли шрифт, перепроверяйте всю систему размеров. Не нужно автоматически оставлять 72 / 42 / 24 / 18 только потому, что эти значения идеально работали с предыдущей гарнитурой. Новая гарнитура может иметь более крупные строчные, быть шире, плотнее или занимать значительно больше места в строке. Иногда после замены шрифта достаточно изменить Body с 18 до 17 px и немного увеличить line-height. Иногда придется сильнее корректировать и заголовки. И это нормально. Числа обслуживают шрифт и композицию, а не наоборот.

Вертикальный ритм: половина ощущения «дорогой» типографики находится вообще не в шрифте

Одна из самых недооцененных проблем — расстояния вокруг текста. Представьте хороший заголовок, хороший Body и подходящий line-height. Если между заголовком и абзацем 50 px, между абзацами 10 px, между текстом и следующим разделом 25 px, а на соседнем экране всё наоборот, проект всё равно будет выглядеть случайным.

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

Принцип очень простой: ближе = связано; дальше = начинается новая группа. Если расстояние между H2 и его абзацем такое же, как расстояние до следующего H2, визуальная структура перестает помогать читать страницу.

Поэтому при аудите типографики смотрите не только на сам текст. Смотрите на связку: заголовок → текст → следующий элемент → следующий раздел. Иногда сайт, который кажется «дешевым из-за шрифта», вообще не требует смены шрифта. Достаточно привести в порядок вертикальный ритм.

Как сочетать два шрифта без готовых «идеальных пар»

Если одной гарнитуры недостаточно и вы хотите использовать две, сначала назначьте им роли. Например: Шрифт A — только крупные заголовки. Шрифт B — основной текст, карточки, кнопки, формы и навигация. Это уже намного надежнее схемы «один шрифт красивый, второй тоже красивый».

После этого откройте обе гарнитуры на одинаковом контенте и сравните:

крупный русский заголовок;
обычный абзац;
цифры;
имя и фамилию;
длинное слово;
короткую кнопку;
длинную кнопку.

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

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

Как понять, что именно делает типографику визуально дешевле

Обычно проблема не одна. Она собирается из десятка мелких решений, каждое из которых само по себе кажется безобидным.

Первый признак — слишком много почти одинаковых размеров. 38 и 40 px одновременно вполне могут быть нужны, но если подобных пар десяток, скорее всего, роли текста не определены.
Второй — постоянный Bold. Если жирные заголовки, кнопки, цены, карточки, меню и ключевые предложения конкурируют друг с другом, жирность перестает работать как акцент. Часто переход с Bold на Medium или Semibold сразу делает интерфейс спокойнее.
Третий — искусственно маленький Body. Это распространенная попытка сделать дизайн «тоньше» и получить больше воздуха. На деле воздух лучше создавать композицией и расстояниями, а не уменьшением читаемости.
Четвертый — слабое различие соседних уровней. Например, основной текст 18 px, карточка 20 px, заголовок раздела 24 px. Формально это три размера. Визуально это почти один уровень.
Пятый — гигантский первый экран при слабой остальной системе. Если H1 96 px, а всё остальное существует в диапазоне 14–22 px, первый экран может быть эффектным, но дальше страница резко теряет характер.
Шестой — случайный tracking. Особенно когда отрицательный letter-spacing применяется ко всем заголовкам просто потому, что однажды красиво сработал на одном слове.
Седьмой — слишком длинные центрированные тексты. Центрирование хорошо работает для коротких фраз и компактных композиций, но большой абзац со строками разной длины сложнее читать, поскольку начало каждой следующей строки находится в новом месте.
Восьмой — одинаковое расстояние между всем подряд. Когда интервалы не показывают смысловые связи, пользователь вынужден самостоятельно разбирать структуру.
Девятый — механическое масштабирование мобильной версии. Если все десктопные размеры просто уменьшили на 50%, Body может стать слишком мелким, а иерархия — слабой.
Десятый — смесь глобальной системы и локальных настроек отдельных блоков. Это особенно характерно для давно существующих Tilda-проектов.

Ловушка локальных настроек Tilda

В актуальной системе стилей Tilda есть очень важное поведение: если значение задано непосредственно в блоке, оно может иметь приоритет над тем же параметром проектного стиля. Более того, если параметр сначала не был задан в стиле, его настроили локально в блоке, а позже добавили в глобальный стиль, Tilda прямо предупреждает о возможном конфликте — приоритет останется у значения из блока.

Именно поэтому ситуация «я поменяла стиль проекта, но несколько блоков почему-то остались прежними» не обязательно означает баг или необходимость писать CSS.

Правильный порядок проверки:

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

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

Аудит типографики готового сайта

Лучший способ привести в порядок старый проект — сначала ничего не менять. Откройте несколько характерных страниц и выпишите реальные значения.

Роль	Что найдено
Главные заголовки	68, 72, 76 px
Заголовки разделов	38, 40, 42, 44 px
Карточки	22, 24 px
Основной текст	16, 17, 18 px
Подписи	13, 14, 15 px

Теперь не нужно механически превращать каждую строку в одно значение. Сначала выясните, одинаковую ли функцию выполняют элементы. Если 68 px используется в компактном Hero, а 76 px в отдельной промостранице и разница осознана, оба значения могут остаться. Если четыре H2 отличаются только потому, что страницы собирались в разные месяцы, скорее всего, их можно привести к одному стилю.

После размеров повторите то же самое для font-weight, line-height и расстояний вокруг текстовых групп. В результате вместо попытки «сделать красивее» получается гораздо более конкретная задача:

Было: 17 размеров, 5 насыщенностей, случайные интервалы.
Стало: 6 основных ролей, 3 насыщенности, понятная система расстояний и несколько осознанных исключений.

Это и есть нормальный типографический рефакторинг.

Проверяйте систему на худшем контенте, а не на лучшем

После унификации не смотрите только на самый красивый экран. Найдите:

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

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

Когда действительно нужен DevTools

DevTools полезен не для того, чтобы превратить дизайнера в разработчика, а когда визуально понятно, что что-то не так, но настройки Tilda не объясняют причину. На опубликованной странице можно выбрать текстовый элемент и проверить его вычисленные свойства:

font-family
font-size
font-weight
line-height
letter-spacing

Это помогает ответить на несколько практических вопросов: какой размер реально применился, какой вес использует браузер, не перебито ли значение другим CSS и какая font-family назначена элементу.

Особенно полезна такая проверка при работе с пользовательскими шрифтами. Если в настройках указан один шрифт, но визуально текст неожиданно напоминает системный, проблема может быть в загрузке шрифтового ресурса или fallback. Не нужно начинать с написания собственного CSS. Сначала выясните, какое значение браузер уже получил.

Если шрифт подключен, но выглядит «не так»

У нестандартных шрифтов полезно последовательно проверить четыре вещи.

Правильное название семейства. В инструкции Tilda по диагностике собственных шрифтов отдельно указано, что официальное название под загруженными WOFF-файлами должно совпадать с названием, выбранным для заголовков или текста в настройках сайта.
Начертания. Если дизайн использует несколько весов, убедитесь, что необходимые варианты действительно доступны.
Локальные настройки блока. Старое ручное форматирование может перебивать проектные параметры.
Способ подключения. Если шрифт идет через внешний CSS, проверяйте именно опубликованную страницу и корректность доступа к файлам. Tilda отдельно указывает требования к CORS для такого сценария.

Только после этого имеет смысл искать более редкую техническую проблему.

Лицензия как часть передачи сайта клиенту

На рабочем проекте недостаточно однажды спросить «можно ли использовать этот шрифт?». Важно понимать, что произойдет с ним после передачи сайта.

Для каждого нестандартного коммерческого шрифта полезно зафиксировать:

откуда получен шрифт и кто его правообладатель;
какая лицензия приобретена;
разрешает ли она использование именно на сайте;
разрешен ли self-hosting, если файлы загружаются непосредственно на Tilda или другой сервер;
есть ли ограничения, связанные с количеством сайтов, просмотров или другими условиями конкретной лицензии;
кто должен оставаться владельцем лицензии после передачи проекта;
можно ли передавать клиенту сами файлы шрифта;
что должен сделать клиент, если ваша подписка или аккаунт перестанут использоваться.

Последний пункт особенно важен для сервисных моделей вроде Adobe Fonts. Нельзя строить клиентский сайт на личной подписке дизайнера и считать вопрос закрытым навсегда: Adobe прямо требует, чтобы клиентский сайт использовал web fonts через подписку клиента либо чтобы проект был передан предусмотренным сервисом способом.

С Google Fonts эта проблема значительно проще: библиотека состоит из open-source шрифтов, разрешенных и для коммерческого использования. Но даже здесь хорошая привычка — знать источник гарнитуры и не хранить в проекте случайный файл с названием вроде Montserrat-final-2.ttf, происхождение которого никто уже не помнит.

Не подключайте весь шрифт только потому, что он существует

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

Regular — основной текст
Medium — интерфейс
Semibold — заголовки

Если остальные варианты нигде не применяются, они не делают типографику богаче.

С variable fonts логика немного другая: один файл может содержать диапазон вариаций вместо множества отдельных статических файлов. Но и здесь не нужно исходить из лозунга «variable всегда быстрее». Смотрите на конкретный размер файла, нужные языки и реально используемые возможности.

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

Финальный аудит перед публикацией

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

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

И только после этого задайте последний вопрос: действительно ли проекту нужен другой шрифт? Очень часто ответ будет «нет». Проблема была не в недостаточно красивой гарнитуре, а в отсутствии системы вокруг нее. Именно поэтому два сайта на одном и том же Inter, Manrope или любом другом популярном шрифте могут выглядеть совершенно по-разному. Гарнитура дает материал. Качество типографики определяется тем, как этим материалом распорядились.