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

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

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

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

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

Стили типографики смотрите в гайде по текстовым стилям.

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

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

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

Хоткеи

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

Неправильно

Правильно

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

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

Неправильно

Правильно

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

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

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

Неправильно

Правильно

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

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

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

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

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

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

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

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

Неправильно

Правильно

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

Неправильно

Правильно

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

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

Хорошо

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

Неправильно

Правильно

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

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

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

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

Неправильно

Правильно

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

Неправильно

Правильно

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

Неправильно

Правильно

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

Неправильно

Правильно

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

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

Неправильно

Правильно

Хоткеи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Неправильно

Правильно

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

Неправильно

Правильно

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

Неправильно

Правильно

При этом наращивается только одна буква.

Неправильно

Правильно

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

Неправильно

Правильно

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

Неправильно

Правильно

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

Неправильно

Правильно

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

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

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

Неправильно

Правильно

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

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

Неправильно

Правильно

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

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

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

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

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

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

Неправильно

Правильно

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

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

Неправильно

Правильно

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

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

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

Неправильно

Правильно

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

Допустимо

Хорошо

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

Неправильно

Правильно

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

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

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

Неправильно

Правильно

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

Правильно

Правильно

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

Неправильно

Правильно

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

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

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

Неправильно

Правильно

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

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

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

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

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

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

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

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

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

Неправильно

Правильно

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

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

Правильно

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

Правильно

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

Неправильно

Правильно

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

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

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

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

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

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

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

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

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

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

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

Правильно