Экранная типографика

В этом гайде описаны правила экранной типографики для сервисов Контура.

Бóльшая часть правил набора описана:

в редполитике Контура,
в гайде «Текст в интерфейсе»,
в этом гайде
и в редполитике вашего продукта.

Если ни в одном из этих источников нет ответа на ваш вопрос, правила набора поищите в Справочнике Мильчина и Чельцовой, а правила орфографии и пунктуации — в Справочнике Лопатина.

Подробнее о стилях типографики — в гайде «Текстовые стили».

Традиции

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

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

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

При этом по «классическим» правилам типографики в некоторых случаях пробел должен быть тонким, но в фирменном шрифте Контура — Lab Grotesque тонкий неразрывный пробел почти невидим: 5 000 ₽. Поэтому используйте обычный неразрывный пробел.

Илья Бирман сделал типографскую раскладку для Мака и ПК, её можно установить вместо стандартной, это даст возможность легко набирать все нужные типографские знаки.

⌥ + space в MacOs или в раскладке Бирмана

Буквы и знаки

Не изображайте знаки, используйте настоящие.

Знаки, набранные буквами и цифрами: «тм», «м2, м3», «(с)», буква «о» вместо градуса, плюс с дефисом «+-» вместо плюс-минуса, буква «х» вместо знака умножения

Неправильно

Настоящие знаки: товарный знак ™, «м², м³» с верхними индексами, копирайт ©, знак градуса, плюс-минус ±, знак умножения ×

Правильно

Если не знаете, как набрать нужный знак, поищите его в таблице Юникода.

Единицы измерения

Все единицы измерения, включая знаки валют и знак процента, отделяются от числа неразрывным пробелом.

«32м²» — единица измерения слитно с числом, без пробела

Неправильно

«32 м²» — между числом и единицей измерения пробел

Правильно

Буква Ё

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

когда возможны разночтения,
в именах собственных.

Например, в гайдах мы везде используем букву Ё

Знак рубля

Используйте знак рубля — ₽, а не сокращайте до руб. или р.

⌥ + 8 в MacOs

⌥ + р в раскладке Бирмана

Знак номера №

Используйте знак №, а не решётку (#). Сам номер отделяется от знака пробелом.

«Платёжное поручение №32» — номер слитно со знаком номера

Неправильно

«Платёжное поручение № 32» — номер отделён от знака номера пробелом

Правильно

Смотрите также правила записи номеров.

Знаки валют

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

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

Знак валюты отделяется неразрывным пробелом обычной ширины.

Суммы 20 000 ₽, 20 000 $ и 20 000 € — знак валюты после числа через пробел

Проценты и процентные пункты

Процент означает долю от целого. Знак процента, как и все остальные единицы измерения, отделяется от значения.

«5 % годовых» и «Распознаём документ: 68 %» — знак процента отделён от числа пробелом

Процентный пункт означает разницу между значениями в процентах.

Если ставка по вкладу была повышена с 6 до 8 %, то она повысилась на 2 процентных пункта, но на 33 процента (на треть) от того, что было.

Процентный пункт обозначается как «% п.» или «п. п.».

«Ставка по вкладу увеличилась на 2 %» — рост ставки записан в процентах, а не в процентных пунктах

Неправильно

Два варианта: «Ставка по вкладу увеличилась на 2 % п.» и «Ставка по вкладу увеличилась на 2 п. п.»

Правильно

Кавычки

В тексте на русском языке мы используем «кавычки-ёлочки».

В англоязычных сервисах используйте кавычки-лапки — двойные (“…”) и одинарные (‘…’).

Заголовок «Как заполнить декларацию по УСН „Доходы минус расходы“ в 2025 году»: название режима в кавычках-лапках вместо ёлочек

Неправильно

Тот же заголовок, название режима «Доходы минус расходы» в кавычках-ёлочках

Правильно

Если в тексте в кавычках нужны ещё кавычки, например:

есть цитата,
есть слово в переносном смысле,
используется обращение к объекту через родовое слово,

то образуется второй уровень, в нём используйте „кавычки-лапки“.

Предложение о понятии «период „охлаждения“» в тексте договора: внешние кавычки — ёлочки, внутренние — лапки

Хорошо

Не используйте прямые кавычки ( " " ) — они переехали из мира печатных машинок в среды разработки и не используются в наборе текста для людей.

« — ⌥ + / в MacOs

» — ⌥ + shift + / в MacOs

« — ⌥ + < в раскладке Бирмана

» — ⌥ + > в раскладке Бирмана

Цифры

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

Чтобы включить моноширинные цифры в Фигме, нужно:

отсоединить стиль у текстового слоя и открыть настройки стиля,
открыть вкладку Details,
в блоке Numbers переключить Style на Monospace uppercase / Lining.

В CSS моноширинные цифры включаются инструкцией: font-variant-numeric: lining-nums tabular-nums;

Суммы 54 456,99, 499 111,11 и 1 000 000,00 в столбик по правому краю: цифры разной ширины, разряды не встают друг под другом

Неправильно

Те же суммы моноширинными цифрами: разряды стоят ровно друг под другом

Правильно

Рекомендуем включить моноширинные цифры сразу во всём продукте, а не включать их по месту и следить, что реализация на фронте совпадает с макетом в каждом конкретном месте.

Арифметические знаки

Плюс (+) и минус (−) используются в двух случаях:

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

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

«Остаток: -3 ₽» и «100 - 30 = 70» — вместо знака минуса дефис

Неправильно

«Остаток: −3 ₽» и «100 − 30 = 70» — настоящий знак минуса, по ширине как цифра

Правильно

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

«Остаток: − 3 ₽» — минус отделён от числа пробелом; «100−30 = 70» — минус в выражении без пробелов

Неправильно

«Остаток: −3 ₽» — минус слитно с числом; «100 − 30 = 70» — минус в выражении отделён пробелами

Правильно

Знаки плюс-минус (±) и тильда (~) используются как обозначение приблизительного значения и в таком случае не отделяются от числа.

«± 3» и «~ 3» — плюс-минус и тильда отделены от числа пробелом

Неправильно

«±3» и «~3» — плюс-минус и тильда слитно с числом

Правильно

Знаки равенства (=), умножения (×) и деления (÷) используются в арифметических выражениях и отделяются от чисел.

Выражение «3×10÷5=6» — знаки умножения, деления и равенства без пробелов

Неправильно

Выражение «3 × 10 ÷ 5 = 6» — знаки умножения, деления и равенства отделены пробелами

Правильно

Знак умножения (×) также используется для обозначения коллаборации.

«Контур × Yankee Sierra» и «Контур × Стенография» — названия разделены знаком умножения с пробелами

Не используйте букву Х и звёздочку (*) вместо знака умножения и слеш (/) вместо знака деления.

«3 * 10 / 5 = 6» со звёздочкой и слешем и «3 x 10 / 5 = 6» с буквой «х» и слешем вместо знаков умножения и деления

Неправильно

«3 × 10 ÷ 5 = 6» со знаками умножения и деления

Правильно

≠ — ⌥ + = в MacOs или в раскладке Бирмана

± — shift + = в MacOs или в раскладке Бирмана

− — ⌥ + - в MacOs

× — ⌥ + 9 в MacOs

− — ⌥ + m в раскладке Бирмана

× — ⌥ + x в раскладке Бирмана

÷ — ⌥ + \ в MacOs. В раскладке Бирмана невозможно

Дефис

Дефис (-) — это орфографический знак, встречается внутри слов. Например, в составных словах:

При переносе слова по слогам на следующую строку:

Предложение «Если предложение не влезает в полосу, оно перейдёт на следующую строку» с переносом: в конце первой строки «стро» с дефисом, на второй — «ку.»

В сокращениях слов по первой и последней букве:

Слово «господин» и его сокращение «г-н» через дефис

Тире

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

Например, в интервалах значений и дат. Если интервал обозначен числами, тире не отделяется пробелами, а если словами, то пробелы нужны.

Интервалы: «© 1988–2019 СКБ Контур» через короткое тире; «17—19 февраля», «17—19 фев 2025», «20—30 сотрудников» — длинное тире без пробелов; «17 фев — 17 мар», «20 дек 2025 — 5 янв 2026», «двадцать — тридцать сотрудников» — с пробелами

Для обозначения прямой речи в тексте:

Прямая речь: «— Будем строить экосистему сервисов, — сказал Владислав.» Реплика начинается с тире, перед словами автора запятая и тире.

При определении понятий:

Определения через тире с пробелами: «Экстерн — это система для отправки отчётности» и «Платёжное поручение — самый старый способ отправки безналичных средств»

При переходе от причины к следствию без образования нового предложения:

«Поступило обращение — мы ответили» — части предложения разделены тире с пробелами

И во многих других случаях построения предложений.

Также тире используется как прочерк, когда данных нет.

Таблица с колонками «Организация» и «Задолженность, ₽»: у ИП Пешков Алексей Максимович 21 894,12, у ООО Бест Продакшн вместо суммы серое тире, у ОАО Глобал Индастриз 312 485,99. Названия организаций в прямых кавычках.

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

Короткое и длинное тире

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

Некоторые источники могут говорить как о правиле о том, что короткое тире для одних случаев, а длинное для других, но это просто стилистические предпочтения, а не правило типографики.

Использовать два вида тире в бумажном издании может быть оправдано, но в веб-сервисе это просто усложнение. Используйте обычное (длинное) тире.

Правила набора

Числа

В числах разряды отделяются неразрывным пробелом обычной ширины, в том числе в четырёхзначных числах:

Суммы 1 000 ₽, 32 780 ₽ и 10 999 101 ₽ — разряды разделены пробелом, в том числе в четырёхзначном числе

Дробная часть отделяется от целой части запятой, а не точкой.

Неправильно

Правильно

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

Используйте одно и то же количество десятичных знаков в одних и тех же данных, даже если они находятся в разных частях сервиса.

Суммы «38 000 ₽» и «871,18 ₽» в столбик: у первой нет десятичных знаков, у второй — два

Неправильно

Суммы «38 000,00 ₽» и «871,18 ₽» в столбик: у обеих по два десятичных знака

Правильно

Наращение суффикса — только для порядковых числительных.

«На протяжении 4-х лет» — наращение «х» через дефис у количественного числительного

Неправильно

«На протяжении 4 лет» без наращения и «4-й пункт договора» с наращением у порядкового числительного

Правильно

Если последней букве предшествует согласный звук, то наращивается две буквы. И одна, если предшествует гласный звук. Грамота.ру

Наращения с одной буквой вместо двух: «5-о дня», «5-у студенту»; под чертой — с двумя буквами вместо одной: «4-ый пункт договора», «в 4-ом пункте договора»

Неправильно

Наращения с двумя буквами: «5-го дня», «5-му студенту»; под чертой — с одной буквой: «4-й пункт договора», «в 4-м пункте договора»

Правильно

В некоторых случаях возможно присоединение слова, но оно не сокращается.

«4-кр-е увеличение» — присоединённое слово сокращено до «кр-е»

Неправильно

«4-кратное увеличение» — число присоединено дефисом, слово «кратное» написано полностью

Правильно

Номера

Номера документов не разбиваются на группы.

«Счёт-фактура № 15 496» — номер разбит пробелом на группы разрядов

Неправильно

«Счёт-фактура № 15496» — номер без пробелов

Правильно

Если номер записан словами, то и знак номера использовать не следует.

«Вагон номер 5» — слово «номер», а число цифрой

Неправильно

Два варианта: «Вагон номер пять» — номер словами, и «Вагон № 5» — знак номера и цифра через пробел

Правильно

Телефонные номера

Телефонные номера набираются с неразрывными пробелами и с дефисами.

Телефон «+7 912 123-45-67»: код страны, код сети и первая группа цифр через пробелы, остальные группы через дефисы

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

Код сети не ставим в скобки, потому что его нельзя опустить.

Три номера: «+7 (912) 123-45-67» с кодом сети в скобках, «(912) 123-45-67» без кода страны и «123-45-67» без кодов

Неправильно

Четыре номера в полном формате без скобок: «+7 912 123-45-67», «+7 912 123 45 67» с группами через пробелы, «+995 511 123 456» и «8 800 123-45-67»

Правильно

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

Дата и время

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

«09/12/2026 17.22.01» — дата через косые черты, время через точки, между ними пробел без запятой

Неправильно

«09.12.2026, 17:22:01» — дата через точки, время через двоеточия, между ними запятая

Правильно

Используйте формат записи даты, который подходит вам в конкретном месте.

Три формата одной даты: «31 декабря 2026», «31 дек 2026» и «31.12.2026»

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

Три формата даты друг под другом: «01.01.2027», «1 янв 2027» и «1 января 2027»

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

Предложение «С 1 января 2027 года ФНС меняет правила ответа на требования» — дата полностью, со словом «года»

Пробелы в дате должны быть неразрывными.

День недели и относительное значение (сегодня, вчера) отделяются от даты запятой.

«9 декабря, пятница» и «9 декабря, сегодня» — день недели и слово «сегодня» отделены от даты запятой

Если рядом с датой есть день недели или относительное значение (сегодня, вчера), пишите месяц словом.

«09.12, пятница» — месяц цифрами рядом с днём недели

Неправильно

«9 декабря, пятница» и «9 дек, пятница» — месяц словом, полностью или сокращённо

Правильно

Смотрите также сокращения для календарных периодов, для названий месяцев и для дней недели.

Адреса

Между обозначением части адреса и значением ставьте неразрывный пробел ( ).

Адрес «Ивановская обл., г. Иваново, ул. Пушкина, д. 3, офис 12» с переносом строки после «ул.» — сокращение оторвано от названия улицы

Неправильно

Адрес «Ивановская обл., г. Иваново, ул. Пушкина, д. 3, офис 12» с переносом строки перед «ул.» — сокращение осталось рядом с названием улицы

Правильно

Фамилия и инициалы

Не ставьте пробел между инициалами, а между инициалами и фамилией ставьте неразрывный пробел ( ).

«Иванов И.И.» и «И.И. Иванов» — между инициалами пробела нет, от фамилии они отделены пробелом

И т.д. и т.п.

В устойчивых сокращениях после союза стоит неразрывный пробел, а между сокращёнными словами пробела нет.

ИНН и КПП

В Контуре пару реквизитов ИНН и КПП принято писать через тире.

Неправильно

ИНН и КПП «662348519—660101001» через длинное тире без пробелов

Правильно

Номера банковских счетов

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

Номер счёта «4070 2810 1000 0000 0000» разбит пробелами на равные группы по 4 цифры

Допустимо

Номер счёта, разбитый по смыслу, в двух вариантах: «407 02 810 1 0000 0000000» и «40702 810 1 0000 0000000»

Хорошо

Номера банковских карт

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

Номер карты «2200-9604-0000-0000» — группы по 4 цифры через дефисы

Неправильно

Номер карты «2200 9604 0000 0000» — группы по 4 цифры через пробелы

Правильно

Предложение, абзац и подпись

Точка в тексте

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

Подробнее — в гайде «Текст в интерфейсе».

Точка и вопросительный знак в заголовках

В заголовках точка ставится только между предложениями.

Заголовки с точкой в конце: «Проверка и отправка.» и «Выгрузка документов. Пять способов.»

Неправильно

Заголовки без точки в конце: «Проверка и отправка» и «Выгрузка документов. Пять способов» — точка только между предложениями

Правильно

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

Заголовки-вопросы к пользователю с вопросительным знаком: «Как прошла ваша первая отчётность в Экстерне?» и «Прервать отправку отчёта?»

Правильно

Модальное окно с жёлтым восклицательным знаком, заголовком «Прервать отправку черновиков?», текстом о том, что отправка черновика будет отменена, и кнопками «Прервать отправку» и «Отменить»

Правильно

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

Заголовки с вопросительным знаком: «Как заполнить ведомость?» и «Где получить электронную подпись?»

Неправильно

Заголовки без вопросительного знака: «Как заполнить ведомость» и «Где получить электронную подпись»

Правильно

Капс и капитель

Капс — это набор текста прописными буквами без разрядки. Так набирают текст, если хотят привлечь внимание пользователя, но:

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

Поэтому набор капсом запрещён.

«ЗАПОЛНИТЕ ЗАЯВЛЕНИЕ» — весь текст капсом

Неправильно

«Заполните заявление» — строчными буквами, с прописной только в начале

Правильно

Капитель — начертание шрифта или шрифт, в котором строчные буквы имеют рисунок прописных.

Фраза «Буквы, набранные капителью» капительным начертанием шрифта Source Serif Pro: строчные буквы с рисунком прописных, но ниже заглавной «Б»

Когда такого начертания нет, можно сделать псевдокапитель:

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

Тогда рисунок слова получится близким к капительному.

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

Меню навигации: заголовки групп «ОТЧЁТЫ» и «ТРЕБОВАНИЯ» мелкими серыми прописными с разрядкой, под ними обычные пункты — «В работе», «Отправленные отчёты», «Все требования» и другие

Списки

Есть два способа набора списков.

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

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

Не смешивайте эти стили.

Жирный заголовок «Что взять на встречу:» с двоеточием, под ним пункты через тире с запятыми и точкой в конце: заявление, доверенность, квалифицированную подпись

Неправильно

Два списка. Классический: «Что взять на встречу:», затем через тире с запятыми «заявление», «доверенность» и «квалифицированную подпись» с точкой. Набор элементов: жирный заголовок «Что взять на встречу» без двоеточия и пункты «Заявление», «Доверенность», «Квалифицированная подпись» без знаков препинания.

Правильно

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

Элемент списка не обязан начинаться с буллита или тире.

Классический список «Что взять на встречу:» в двух вариантах: элементы «заявление», «доверенность», «квалифицированную подпись» с запятыми и точкой в конце — без тире и с тире в начале

Правильно

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

Два списка с отступом между началом и первым элементом: жирный заголовок «Что взять на встречу» с пунктами без знаков препинания и классический «Что взять на встречу:» с запятыми и точкой в конце

Правильно

Скрытие данных

Обычный буллит слишком жирный и сильно выдаётся в обычном наборе текста. Скрывайте части номеров и других личных данных при помощи Middle Dot (·). Это обычная точка, как в конце предложения.

Телефон «+7 950», затем три жирных буллита вместо скрытых цифр, затем «12 28»

Неправильно

Телефон «+7 950», затем три точки Middle Dot вместо скрытых цифр, затем «12 28»

Правильно

Сокращения

Календарные периоды

секунда → с
минута → мин.
час → ч.
день → д.
неделя → нед.
месяц → мес.
квартал → кв.
год → г.

Секунду принято сокращать без точки, потому что она входит в международную систему единиц (СИ).

Названия месяцев

Названия месяцев сокращаются по первым трём буквам, без точки в конце, в том числе в предложении и в отдельно стоящей дате:

январь → янв
февраль → фев
март → мар
апрель → апр
май → май
июнь → июн
июль → июл
август → авг
сентябрь → сен
октябрь → окт
ноябрь → ноя
декабрь → дек

Это исключение из общего правила: если слово сокращено изъятием некоторых букв, а не усечением с конца, то точка не ставится.

Напр.: миллиард → млрд

Названия дней недели

Названия дней недели сокращаются до двух букв, с точкой в конце:

понедельник → пн.
вторник → вт.
среда → ср.
четверг → чт.
пятница → пт.
суббота → сб.
воскресенье → вс.

Единицы информации

Объём памяти измеряется в битах и сокращается так:

Бит — б
Байт — Б
Килобайт — КБ
Мегабайт — МБ
Гигабайт — ГБ

Пропускная способность измеряется в битах в секунду и сокращается так:

Бит в секунду — бит/с
Килобит в секунду — Кбит/с
Мегабит в секунду — Мбит/с
Гигабит в секунду — Гбит/с

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

Байт в секунду — Б/с
Килобайт в секунду — КБ/с
Мегабайт в секунду — МБ/с
Гигабайт в секунду — ГБ/с

Предложение «При ширине канала в 1 ГБит/с скорость скачивания и загрузки не будет превышать 128 МБ/с, а файл размером в 8 ГБ скачается не раньше, чем через 1 минуту и 4 секунды»

Правильно