Типографика текста на сайте: дефис, тире и минус, кавычки, неразрывные пробелы и как проверять оформление

Коротко: что такое типографика текста на сайте и зачем она нужна магазину

Типографика — это правила оформления текста: какие использовать кавычки, чем отличается тире от дефиса, где ставить неразрывный пробел, как писать числа и сокращения. Читатель редко формулирует, что именно ему не нравится, но замечает: прямые кавычки " вместо «ёлочек», дефис вместо тире, предлог «в» в конце строки, цена, разорванная между строками. Текст выглядит небрежно, и вместе с ним — компания. Для интернет-магазина это часть доверия: аккуратные тексты на карточках, в описаниях категорий и в статьях выглядят надёжнее.

Важное уточнение, чтобы не обещать лишнего: на ранжирование типографика напрямую не влияет — я не нашёл ни в справках Google, ни в справках Яндекса требований к типу кавычек или тире. Влияет она косвенно: на читаемость, доверие, поведение на странице и на то, как выглядят заголовки и описания в выдаче. Поэтому здесь вы не найдёте «правил SEO-типографики», а найдёте ориентиры из авторитетных практических источников и техническую часть: как правильно вводить знаки в HTML.

Основные правила в одной таблице (по материалам о русской типографике и справочнику MDN):

В статье: что такое каждый знак и когда его использовать, как набирать их на клавиатуре и в HTML, как работать с неразрывными пробелами, цены, числа и единицы, как типографика связана с заголовками, описаниями и сниппетом, как автоматизировать (типограф) и проверять, десять ошибок и PDF-чек-лист на 25 пунктов. Для быстрой правки: типограф онлайн на tools.cetto.ru (кавычки-ёлочки, длинное тире, неразрывные пробелы после предлогов и в числах; вывод символами или HTML-мнемониками).

Основа статьи — справочник MDN об HTML-сущностях и об элементе q, статья Хабра «Расстановка дефисов, минусов, тире и кавычек» (2009, о правилах для HTML и LaTeX; автор сам оговаривает, что часть правил для диапазонов вывел сам), опинион-материал Хабра о длинном тире (2026) и обзорная выдача по «Ководству» Студии Лебедева. Сайт «Ководства» при моих запросах не открылся (ошибка соединения), поэтому детали правил оттуда я не цитирую; из его оглавления видно, что в нём есть разделы о кавычках, тире и дефисе, букве «ё», многоточии, знаке рубля и оформлении ссылок. Справочник Розенталя я не открывал. Все правила ниже — общепринятые практики, а не «требования закона»; для официальных документов, изданий и договоров сверяйтесь с требованиями конкретного заказчика или издателя.

Знаки: что и когда использовать

Дефис, тире, минус: три разные «черточки»

Это самая частая ошибка: везде ставят дефис с клавиатуры. По материалам Хабра и пересказу Ководства, различают три знака:

• Дефис соединяет части слова без пробелов («во-первых», «кто-то», «интернет-магазин»). Слово с дефисом — одно слово, и обычно оно не разрывается между строками.
• Длинное тире (—) — знак препинания: отделяет слова в предложении («Ответ — 42»), обычно отбивается пробелами с двух сторон. Хабр-статья 2009 года советует перед ним ставить неразрывный пробел, чтобы тире не оказалось в начале строки.
• Короткое тире (–) — для числовых диапазонов без пробелов: «1941–1945», «10–15». Для прочих диапазонов (например, «Москва – Санкт-Петербург») в Хабр-статье 2009 года автор признаёт, что явных правил не нашёл и вывел их сам, поэтому для таких случаев сверяйтесь с редактором или справочником.
• Минус (−) — математический знак перед числом: «−5 °C». MDN: − (U+2212) отличается от дефиса.

Опинион-материал Хабра (2026) добавляет любопытную деталь: длинное тире в текстах сейчас иногда воспринимают как признак текста, написанного нейросетью. Автор напоминает, что правила использования тире в русском языке не новые (они есть в школьном учебнике и в справочниках), а языковые модели просто воспроизводят нормы хорошо вычитанных книг. Он же приводит опрос из 64 голосов: примерно 11% читателей называют признаком ИИ тире и кавычки, около 58% — шаблонные «пластиковые» формулировки. Это мнение одного автора и небольшая выборка. Вывод для редактора: не отказывайтесь от правильных знаков из-за моды, но и не набивайте текст тире, и проверяйте содержание, а не только знаки.

Кавычки

• В русском тексте основные кавычки — «ёлочки» (MDN называет их стандартным выбором для русского текста); вложенные — «лапки» («Он сказал: „привет“»).
• Прямые кавычки " — типичный признак набора «на коленке». В HTML их применяют только для атрибутов.
• Знаки препинания: по Хабр-статье 2009 года, точка и запятая ставятся после закрывающей кавычки, а «?», «!» и многоточие — перед ней (когда относятся к цитате); спорные случаи уточняйте у корректора.
• Для коротких цитат в HTML есть элемент q: по MDN, браузер сам добавляет кавычки, а для длинных цитат нужен blockquote. MDN отдельно не описывает выбор кавычек по языку; общеизвестно, что тип кавычек зависит от атрибута lang и свойства CSS quotes (проверьте в своём браузере).

Неразрывный пробел

Неразрывный пробел ( , U+00A0) не даёт строке разорваться между двумя словами. Привязывайте им то, что нельзя разделять: предлоги и союзы к следующему слову («в магазине»), число и единицу измерения («5 кг», «1 200 ₽»), инициалы и фамилию, тире к предыдущему слову, номер и название («№ 5»). Ководство, по пересказу, советует «привязывать» слова неразрывным пробелом, чтобы инициалы, предлоги и тире не оказывались в конце строки. Предупреждения MDN: не используйте   для отступов (для интервалов есть margin и padding в CSS);   не равен обычному пробелу, он может мешать поиску, сравнению строк и копированию.

Мягкий перенос

­ — невидимый знак: показывается только если слово переносится в этом месте. В русскоязычных текстах он нужен редко: для очень длинных слов (названий) в узких колонках и на мобильных. Его не видно при редактировании, поэтому его легко «потерять» (предупреждение MDN). Поиск по странице со скрытыми переносами может не находить слово: проверяйте.

Прочее

• Буква «ё». В «Ководстве» есть раздел о букве «ё»; содержимое я не открыл. Практический выбор: единообразие. Для названий и фамилий «ё» обязательна, а в остальных текстах решайте политикой сайта (и учитывайте поиск: по обзорам, поисковики воспринимают «е» и «ё» как варианты одного слова, но подтверждения в моих источниках нет).
• Многоточие — один знак «…» (U+2026) вместо трёх точек. Разделы «Многоточие» и «Висячая пунктуация» есть в Ководстве; содержимое не открывал.
• Знак рубля «₽» — в Ководстве есть раздел о знаке рубля; содержимое не открывал. Цена и знак связываются неразрывным пробелом («1 200 ₽»).
• Числа и разряды: тысячи отделяют неразрывными пробелами; дробную часть — запятой.
• Сокращения и инициалы: «т. е.», «и т. д.» — с неразрывными пробелами внутри; единообразно на всём сайте.

Как вводить знаки

Таблица составлена мной по общеизвестным сочетаниям; в Хабр-материале 2026 года подтверждены способы для длинного тире (долгое нажатие на дефис на телефоне, Option+Shift+дефис на Mac, Alt+0151 на Windows, автозамена двойного дефиса в Word и Google Документах, типографская раскладка). Остальные сочетания зависят от раскладки и приложения: проверьте у себя. Надёжнее настроить автоматику (типограф или автозамену) или копировать знаки из проверенного источника.

Сущности или символы

MDN: HTML-сущность — синоним символьной ссылки; один и тот же знак можно записать именем (—), десятичным кодом (—) или шестнадцатеричным (—). Правила: всегда ставьте точку с запятой; сущности не работают внутри script и style (в JavaScript используйте escape-последовательности вроде «); в XML и XHTML предопределены лишь &, <, >, ", '. Если страница отдаётся в UTF-8 (<meta charset="utf-8">), знаки можно писать прямо символами: это читаемее и надёжнее (MDN). Поэтому: UTF-8 на всём сайте и сущности только для невидимых и служебных знаков ( , ­): «Мета-теги».

Типографика и SEO

• Title и description. Тире, кавычки и неразрывные пробелы допустимы, но их нужно проверить в превью: некоторые символы шире или уже, а обрезка идёт по ширине в пикселях, а не по числу знаков: превью сниппета, «Сниппет».   в title лучше не использовать без нужды: он не равен обычному пробелу и может мешать сравнению строк (предупреждение MDN).
• Подсчёт символов. Знаки типографики считаются как обычные символы; эмодзи и составные знаки ведут себя иначе: «Подсчёт символов».
• Адреса страниц. Типографские знаки в URL не нужны: адрес строится из латиницы, цифр и дефисов: «ЧПУ».
• Заголовки и структура. Тире и кавычки не заменяют иерархию заголовков: проверка заголовков.
• Поиск по сайту и копирование. Неразрывные пробелы внутри слов и мягкие переносы могут ломать поиск; не вставляйте их внутрь ключевых слов.
• Текстовые «ИИ-маркеры». Не отказывайтесь от нормальных знаков из-за слухов; если сомневаетесь в качестве текста, смотрите на содержание: «Тошнота и водность», «Уникальность текста».

Как автоматизировать и проверять

1. Типограф. Вставьте текст в типограф: он расставит ёлочки, тире и неразрывные пробелы после предлогов и в числах; выберите вывод символами или мнемониками. Результат всё равно просмотрите: автоматика ошибается в спорных случаях (прямая речь, вложенные кавычки).
2. Единые правила. Закрепите в регламенте: какие кавычки и тире, как писать числа и сокращения, использовать ли «ё».
3. Шаблоны CMS. Многие движки умеют автоматически типографировать вывод; проверьте, что результат корректен и не ломает ссылки и код.
4. Поиск ошибок. Найдите в тексте прямые кавычки, дефис между словами с пробелами (« - »), двойные пробелы, три точки: тестер регулярных выражений поможет составить шаблоны (проверяйте совместимость диалекта: «Регулярные выражения»).
5. Сравнение версий. После автоматической обработки сравните с исходником: сравнение текстов.
6. Проверка на сайте. Откройте страницу на телефоне и компьютере: нет ли строк, оканчивающихся предлогом, оторванных цен и тире в начале строки.
7. Приёмка текста. Добавьте пункт про типографику в чек-лист приёмки: чек-лист приёмки текста.

Особенности магазина

• Цены. Число, пробелы между разрядами и знак «₽» связаны неразрывными пробелами («1 290 ₽»), чтобы цена не разрывалась.
• Характеристики. Единицы измерения привязаны к числам («500 мл», «45 см»); диапазоны через короткое тире («10–15 кг»).
• Названия товаров. Кавычки и регистр единообразны; бренды пишутся одинаково.
• Таблицы и списки. Одинаковое оформление знаков в ячейках.
• Названия и ссылки. Не меняйте адреса страниц ради типографики; правки текста не должны ломать якоря и ссылки: «Ссылки на странице».
• Импорт описаний. Фиды поставщиков часто содержат прямые кавычки, дефисы вместо тире и лишние пробелы: обработайте их до публикации: «Описания товаров».
• Письма и SMS. Типографские кавычки и тире в SMS могут перевести сообщение в более дорогую кодировку: «Подсчёт символов».

Десять частых ошибок

1. Дефис вместо тире в предложении.
2. Прямые кавычки вместо «ёлочек» и «лапок».
3. Нет неразрывных пробелов: цена оторвана от знака рубля, предлог остался в конце строки.
4. Неразрывный пробел вместо отступов и внутри слов.
5. Длинное тире вместо короткого в диапазонах чисел и наоборот.
6. Минус набран дефисом в характеристиках.
7. Три точки вместо знака многоточия и лишние двойные пробелы.
8. Разное оформление одинаковых элементов на разных страницах.
9. Слепое доверие автоматике: типограф не проверен в спорных местах.
10. Сущности без точки с запятой или в кодировке не UTF-8.

Что проверяю в аудите я

Типографика не входит в ядро SEO-аудита, но влияет на впечатление от сайта, поэтому я отмечаю в отчёте системные недочёты в заголовках, описаниях, карточках и статьях: прямые кавычки, дефис вместо тире, оторванные цены, «мусорные» пробелы, — и даю рекомендации, что исправить автоматически, а что вручную. Результат аудита: PDF-отчёт на 30–50 страниц, технические задания для программистов, прогноз по трафику и заявкам и созвон, на котором я лично расскажу о найденных ошибках и отвечу на вопросы. Стоимость от 30 000 ₽, срок 3–5 рабочих дней для небольшого сайта и 7–10 для крупного магазина.

Итоговый чек-лист (короткая версия, полная в PDF)

• Приняты единые правила: ёлочки и лапки, длинное и короткое тире, минус, дефис, «ё», числа, сокращения.
• Неразрывные пробелы привязывают предлоги, цены, числа с единицами и инициалы.
• Сайт отдаётся в UTF-8; сущности записаны с точкой с запятой.
• Title, description и заголовки проверены в превью; нет лишних служебных символов.
• Текст обработан типографом и проверен вручную в спорных местах; результат сравнён с исходником.
• Типографика включена в чек-лист приёмки текстов.

Об автореВладимир Родионов

Интернет-маркетолог, частный SEO-специалист cetto.ru. 10+ лет в IT, 200+ реализованных проектов, сертификация Яндекса и Google.

Все статьи автора →Задать вопрос в Telegram →