Типограф в Тильде: что это, как включить и как не сломать верстку

2.

3.

1.

6.

10.

7.

11.

8.

4.

5.

9.

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

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

Типограф существует в нескольких форматах:

• как онлайн-сервис — Типограф Лебедева на artlebedev.ru, типограф Бирмана
• как плагин в текстовых редакторах — Word, Google Docs
• как встроенный инструмент конструктора сайтов — в том числе Тильды

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

Главная задача любого типографа — убрать «мусор», который мы неосознанно вставляем при наборе текста: дефисы вместо тире, прямые кавычки вместо «ёлочек», одинарные пробелы там, где нужен неразрывный. Это не про красоту ради красоты. Это про читаемость и профессиональный вид — то, что посетители замечают подсознательно, но не могут объяснить.

Давайте разберём каждое действие типографа подробно — с примерами до и после.

До: "Наш продукт - лучший"

После: «Наш продукт — лучший»

В русском тексте правильные кавычки — «ёлочки» (угловые). «Лапки» (««) — это английский вариант, в русском тексте они смотрятся неграмотно. Большинство людей ставят лапки, потому что именно они находятся на клавиатуре. Типограф исправляет это автоматически.

До: Тильда - конструктор сайтов. Работаем с 10 - 19 часов.

После: Тильда — конструктор сайтов. Работаем с 10–19 часов.

Здесь важно понимать разницу между тремя символами:

• Дефис (-) — орфографический знак, ставится внутри слов: «веб-сайт», «из-за»
• Тире (—) — пунктуационный знак, обозначает паузу в предложении
• Короткое тире (-) — используется в числовых диапазонах: 10−19, 2020−2025

Типограф распознаёт контекст и подставляет нужный символ.

Это, пожалуй, самая практически полезная функция типографа.

Неразрывный пробел (в HTML — ·) запрещает браузеру разрывать строку в этом месте. Без него в конце строки может остаться одинокий предлог или число без единицы измерения — это выглядит неряшливо и в типографике называется «висячий предлог».

Неразрывные пробелы применяются:

• После однобуквенных предлогов и союзов: «в», «и», «к», «с», «а», «но», «или»
• Между числом и единицей измерения: «100 км», «500 руб.», «12 ₽»
• В аббревиатурах и инициалах: «И.И. Иванов», «т. е.», «т. д.»
• После знаков «№», «§»
• Перед «%» и другими знаками при числах

Особенно важно это для мобильной версии — там строки короче и висячие предлоги встречаются чаще, чем на десктопе.

До: Подумай сам…

После: Подумай сам…

Три точки подряд и многоточие — разные символы. Символ «…» занимает немного меньше места и отображается как единый знак препинания, что корректнее с точки зрения типографики.

Если в тексте стоят двойные пробелы или пробелы перед знаками препинания — типограф исправит это автоматически. Особенно актуально для текстов, скопированных из Word или Google Docs.

Сравним честно — что получаем и с чем нужно быть аккуратными.

Если хотите получить профессиональный сайт, где типографика выверена на уровне дизайна — заказать сайт на Тильде можно у команды dviga.marketing. Разрабатываем сайты под ключ: от прототипа до публикации.

Войдите в свой проект на Tilda, найдите нужную страницу и откройте её для редактирования.

Нажмите на блок с текстом, который нужно обработать типографом. Блок перейдёт в режим редактирования — вы увидите текстовый курсор.

Выделите весь текст в блоке (Ctrl+A / Cmd+A) или только тот фрагмент, который нужно обработать. Можно применять типограф к отдельным абзацам или даже предложениям.

В верхнем левом углу редактора появится панель инструментов. Найдите иконку в виде книжки — это и есть типограф. Нажмите на неё. Обработка происходит мгновенно.

Нажмите «Сохранить и опубликовать», чтобы увидеть результат на странице. В режиме редактирования вы увидите код   — это нормально, на сайте всё отобразится правильно.

После применения типографа в режиме редактирования вы увидите что-то вроде «Работаем с 2016 года». Многие в этот момент думают, что сломали сайт.

Не сломали. Всё в порядке.

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

Также в редакторе могут появляться:

• — — длинное тире (—)
• – — короткое тире (–)
• « и » — угловые кавычки «»
• … — многоточие (…)

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

После применения типографа в режиме редактирования вы увидите что-то вроде «Работаем с 
2016 года». Многие в этот момент думают, что сломали сайт.

Не сломали. Всё в порядке.

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

Также в редакторе могут появляться:

• — — длинное тире (—)
• – — короткое тире (–)
• « и » — угловые кавычки «»
• … — многоточие (…)

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

Zero Block — это блок с полной свободой дизайна в Тильде. Типограф здесь тоже есть, но есть важные нюансы.

1. Войдите в редактирование Zero Block
2. Выделите нужный текст в текстовом элементе
3. В контекстном меню найдите иконку типографа (такая же — в виде книжки)
4. Нажмите и выйдите из редактирования

Неразрывные пробелы в Zero Block выглядят так же — как ·. После выхода из редактора они сохраняются в коде и работают корректно при публикации.

Подробнее о возможностях Zero Block — в нашей статье «Модификации и эффекты для Tilda».

Короткий ответ — нельзя простым способом. Типограф работает разово: выделил текст → нажал иконку → получил результат. Это не режим, который можно включить и выключить. Это одноразовое действие.

Если вы ещё не нажали «Сохранить и опубликовать», просто отмените действие через горячие клавиши. Это сработает.

Если уже сохранили — придётся редактировать текст вручную. Для больших объёмов можно воспользоваться ChatGPT — попросить вернуть текст к исходному виду.

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

Типограф полезен почти всегда, но есть ситуации, когда лучше от него отказаться или использовать аккуратно.

Если блок спроектирован так, что текст точно вписан в границы элемента — лишние неразрывные пробелы могут сломать верстку.

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

Браузер может интерпретировать   как точку. Пишите дескриптор без типографа.

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

Типограф Тильды оптимизирован для кириллицы. На английском или другом языке результат может быть непредсказуемым.

У встроенного инструмента есть альтернативы. Сравним основные:

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

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

Используйте этот чек-лист после применения типографа на странице:

О том, как сделать сайт на Тильде привлекательным в целом — читайте в статье «Как продвигать сайт на Тильде: SEO-оптимизация». Типографика — часть большого пазла продвижения.