Типографика — Принципы — Контур.Гайды
Интерфейсы во многом состоят из текста, и от того как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой.
Стили типографики, для использования в сервисах Контура смотрите в гайде по текстовым стилям.
Разрядка
Текст ПРОПИСНЫМИ набирается вразрядку. Чем мельче текст, тем бо́льшая разрядка нужна. Большой объем текста набирать прописными нежелательно — читаемость хуже.
Текст строчными никогда не набирается вразрядку. Благодаря выносным элементам у строчных, человек узнает слово по форме. Большая разрядка наоборот превращает слово в набор отдельных букв, что сильно замедляет чтение.
Фредерик Гауди говорил: «Тот, кто набирает строчными вразрядку, способен красть овец».
Тонкий пробел
Тонкий пробел или 1/8 круглой шпации используется для отделения порядков в числах, наборе инициалов и некоторых других случаях. В HTML тонкий пробел вставляется мнемонимом &thinsp. Чтобы вставить тонкий пробел в макет, включите в настройках Mac OS ввод юникод символов:
Откройте System Preferences > Keyboard > Input Sources.
Нажмите кнопку + под списком источников ввода.
В самом низу списка выберите «Other», а в окне справа — «Unicode Hex Input» и добавьте его в список источников ввода.
Перед вводом юникод символов выберете источник ввода «Unicode Hex Input». Зажав клавишу Option наберите «2009» — с нажатием последней цифры введется тонкий пробел. Не забудьте написать отдельный комментарий для верстальщика, иначе тонкий пробел при переносе макета в верстку может превратится в обычный.
Когда тонкий пробел недоступен, нужно ставить обычный. За исключением знаков % и №, их в таком случае лучше набирать без отступов.
Знак рубля
Используйте знак рубля — ₽. За знаком рубля закреплен юникодовский символ U+20BD и он присутствует в актуальных версиях Lab Grotesque K и Helvetica Neue.
Телефонные номера
Телефонные номера вида (343) 123-45-67 Айфон понимает неправильно. Если открыть на Айфоне страницу с таким телефоном и тапнуть по номеру, то Айфон попытается набрать 343 123-45-67 — не догадается добавить в начало 8 или +7. Решить проблему можно: сверстать так, чтобы Айфон видел +7, а пользователь Айфона — не видел. Если хитрое решение по каким-то причинам невозможно, пишите бесхитростно: +7 343 123-45-67.
Пробелы
Обычный
Неразрывный
Тонкий пробел
 
Черточки
Я
—
директор интернет‑магазина
Эстеты могут отбивать тире тонкими шпациями.
20-30 котлет
В диапазонах цифрами — короткое тире без отбивки.
Возьмите двадцать
—
тридцать котлет
В диапазонах — тоже длинное тире.
−30. ..−5
°C, но 40°
Правильные минусы. Многоточие — не один символ, а три точки.
Цифры
3030
1810
5000
0100
0001
2
×
7
≠
146
%
Номера карт и счетов разбиваются на блоки.
В уравнениях знаки отбиваются тонкой шпацией.
+3; -7; и ±9
Знаки унарных операций — без отбивки.
4
520
800,8
1
м² за 920,00
₽
Единицы измерения и разряды отбиваются тонкой шпацией
Документ №
21701
Номера обычно не разбиваются на группы
2,8
Дробная часть отделяется запятой
Телефонные номера
+7
495
123-45-67
Не ставьте скобки, если номер нельзя набрать без этого кода. Например, если это номер сотового или городского, который набирают с кодом — у Москвы есть два кода города.
123-45-67
При верстке незримо поставьте +7 в начало для того, чтобы Айфон правильно набрал номер.
8
800
100-10-10
Только 8 800 с восьмерки, в остальных случаях +7.
Дата и время
9 апреля, пятница
Апрель лучше, чем 04.
9.04.2012 в 7:40
В датах — точка, во времени — двоеточие
9 апреля 2012
Если места не жалко, ставить в конце г.
9/04/2012 в 7.40
Адреса и т.п.
ул.
П.
С.
Пушкина,
18а/2,
корп. 3
оф.
105
©
1988-2019
СКБ
Контур
т. к.
и
т. д.
Специальные символы Юникод
Символ | HTML-код | Десятичный код | Описание |
---|---|---|---|
|   | неразрывный пробел | |
  |   | узкий пробел (еn-шириной в букву n) | |
  |   | широкий пробел (em-шириной в букву m) | |
– | – | – | узкое тире (en-тире) |
— | — | — | широкое тире (em -тире) |
| ­ | ­ | мягкий перенос |
а́ | ́ | ударение, ставится после «ударной» буквы | |
© | © | © | копирайт |
® | ® | ® | знак зарегистрированной торговой марки |
™ | ™ | ™ | знак торговой марки |
º | º | º | копье Марса |
ª | ª | ª | зеркало Венеры |
‰ | ‰ | ‰ | промилле |
π | π | π | пи (используйте Times New Roman) |
¦ | ¦ | ¦ | вертикальный пунктир |
§ | § | § | параграф |
° | ° | ° | градус |
µ | µ | µ | знак «микро» |
¶ | ¶ | ¶ | знак абзаца |
… | … | … | многоточие |
‾ | ‾ | ‾ | надчеркивание |
´ | ´ | ´ | знак ударения |
№ | № | знак номера |
Знаки арифметических и математических операций
Символ | HTML-код | Десятичный код | Описание |
---|---|---|---|
× | × | × | умножить |
÷ | ÷ | ÷ | разделить |
< | < | < | меньше |
> | > | > | больше |
± | ± | ± | плюс/минус |
¹ | ¹ | ¹ | степень 1 |
² | ² | ² | степень 2 |
³ | ³ | ³ | степень 3 |
¬ | ¬ | ¬ | отрицание |
¼ | ¼ | ¼ | одна четвертая |
½ | ½ | ½ | одна вторая |
¾ | ¾ | ¾ | три четверти |
⁄ | frasl; | ⁄ | дробная черта |
− | minus; | − | минус |
≤ | ≤ | ≤ | меньше или равно |
≥ | ≥ | ≥ | больше или равно |
≈ | ≈ | ≈ | приблизительно (почти) равно |
≠ | ≠ | ≠ | не равно |
≡ | ≡ | ≡ | тождественно |
√ | √ | √ | квадратный корень (радикал) |
∞ | ∞ | ∞ | бесконечность |
∑ | ∑ | ∑ | знак суммирования |
∏ | ∏ | ∏ | знак произведения |
∂ | ∂ | ∂ | частичный дифференциал |
∫ | ∫ | ∫ | интеграл |
∀ | ∀ | ∀ | для всех (видно только если жирным шрифтом) |
∃ | ∃ | ∃ | существует |
∅ | ∅ | ∅ | пустое множество |
Ø | Ø | Ø | диаметр |
∈ | ∈ | ∈ | принадлежит |
∉ | ∉ | ∉ | не принадлежит |
∋ | ∋ | ∗ | содержит |
⊂ | ⊂ | ⊂ | является подмножеством |
⊃ | ⊃ | ⊃ | является надмножеством |
⊄ | ⊄ | ⊄ | не является подмножеством |
⊆ | ⊆ | ⊆ | является подмножеством либо равно |
⊇ | ⊇ | ⊇ | является надмножеством либо равно |
⊕ | ⊕ | ⊕ | плюс в кружке |
⊗ | ⊗ | ⊗ | знак умножения в кружке |
⊥ | ⊥ | ⊥ | перпендикулярно |
∠ | ∠ | ∠ | угол |
∧ | ∧ | ∧ | логическое И |
∨ | ∨ | ∨ | логическое ИЛИ |
∩ | ∩ | ∩ | пересечение |
∪ | ∪ | ∪ | объединение |
Стрелки
HTML-код | Десятичный код | Описание | |
---|---|---|---|
← | ← | ← | стрелка влево |
↑ | ↑ | ↑ | стрелка вверх |
→ | → | → | стрелка вправо |
↓ | ↓ | ↓ | стрелка вниз |
↔ | ↔ | ↔ | стрелка влево и вправо |
↕ | ↕ | ↕ | стрелка вверх и вниз |
⇐ | ⇐ | ⇐ | двойная стрелка влево |
⇑ | ⇑ | ⇑ | двойная стрелка вверх |
⇒ | ⇒ | ⇒ | двойная стрелка вправо |
⇓ | ⇓ | ⇓ | двойная стрелка вниз |
⇔ | ⇔ | ⇔ | двойная стрелка влево и вправо |
⇕ | ⇕ | ⇕ | двойная стрелка вверх и вниз |
Знаки валют
Символ | HTML-код | Десятичный код | Описание |
---|---|---|---|
₽ | ₽ | Рубль | |
€ | € | € | Евро |
¢ | ¢ | ¢ | Цент |
£ | £ | £ | Фунт |
¤ | ¤t; | ¤ | Знак валюты |
¥ | ¥ | ¥ | Знак йены и юаня |
ƒ | ƒ | ƒ | Знак флорина |
₿ | ₿ | Знак биткойна |
Маркеры
Символ | HTML-код | Десятичный код | Описание |
---|---|---|---|
• | • | • | простой маркер |
○ | ○ | круг | |
· | · | · | средняя точка |
† | † | крестик | |
‡ | ‡ | двойной крестик | |
♠ | ♠ | ♠ | пики |
♣ | ♣ | ♣ | трефы |
♥ | ♥ | ♥ | червы |
♦ | ♦ | ♦ | бубны |
◊ | ◊ | ◊ | ромб |
✏ | ✏ | карандаш | |
✎ | ✎ | карандаш | |
✐ | ✐ | карандаш | |
✍ | ✍ | рука с карандашом |
Кавычки
Символ | HTML-код | Десятичный код | Описание |
---|---|---|---|
» | " | " | двойная кавычка |
& | & | & | амперсанд |
« | « | « | левая типографская кавычка (кавычка-елочка) |
» | » | » | правая типографская кавычка (кавычка-елочка) |
′ | ′ | ′ | штрих (минуты, футы) |
″ | ″ | ″ | двойной штрих (секунды, дюймы) |
‘ | ‘ | ‘ | левая верхняя одинарная кавычка |
’ | ’ | ’ | правая верхняя одинарная кавычка |
‚ | ‚ | ‚ | правая нижняя одинарная кавычка |
“ | “ | “ | кавычка-лапка левая |
” | ” | ” | кавычка-лапка правая верхняя |
„ | „ | „ | кавычка-лапка правая нижняя |
‹ | ‹ | одинарная угловая кавычка открывающая | |
› | › | одинарная угловая кавычка закрывающая |
Звездочки, снежинки
Символ | HTML-код | Десятичный код | Описание |
---|---|---|---|
☃ | ☃ | Снеговик | |
❄ | ❄ | Снежинка | |
❅ | ❅ | Зажатая трилистниками снежинка | |
❆ | ❆ | Жирная остроугольная снежинка | |
★ | ★ | Закрашенная звезда | |
☆ | ☆ | Незакрашенная звезда | |
✪ | ✪ | Незакрашенная звезда в закрашенном круге | |
✫ | ✫ | Закрашенная звезда с незакрашенным кругом внутри | |
✯ | ✯ | Вращающаяся звезда | |
⚝ | ⚝ | Начерченная белая звезда | |
⚪ | ⚪ | Средний незакрашенный круг | |
⚫ | ⚫ | Средний закрашенный круг | |
⚹ | ⚹ | Секстиле (типа снежинка) | |
✵ | ✵ | Восьмиконечная вращающаяся звезда | |
❉ | ❉ | Звёздочка с шарообразными окончаниями | |
❋ | ❋ | Жирная восьмиконечная каплеобразная звёздочка-пропеллер | |
✺ | ✺ | Шестнадцатиконечная звёздочка | |
✹ | ✹ | Двенадцатиконечная закрашенная звезда | |
✸ | ✸ | Жирная восьмиконечная прямолинейная закрашенная звезда | |
✶ | ✶ | Шестиконечная закрашенная звезда | |
✷ | ✷ | Восьмиконечная прямолинейная закрашенная звезда | |
✴ | ✴ | Восьмиконечная закрашенная звезда | |
✳ | ✳ | Восьмиконечная звёздочка | |
✲ | ✲ | Звёздочка с незакрашенным центром | |
✱ | ✱ | Жирная звёздочка | |
✧ | ✧ | Заострённая четырёхконечная незакрашенная звезда | |
✦ | ✦ | Заострённая четырёхконечная закрашенная звезда | |
⍟ | ⍟ | Звезда в круге | |
⊛ | ⊛ | Снежинка в круге |
Часы, время
Символ | HTML-код | Десятичный код | Описание |
---|---|---|---|
⏰ | ⏰ | Будильник | |
⏱ | ⏱ | Секундомер | |
⏲ | ⏲ | Таймер | |
⌚ | ⌚ | Часы | |
⌛ | ⌛ | Песочные часы | |
⏳ | ⏳ | Песочные часы | |
🕐 | 🕐 | Один час | |
🕑 | 🕑 | Два часа | |
🕒 | 🕒 | Три часа | |
🕓 | 🕓 | Четыре часа | |
🕔 | 🕔 | Пять часов | |
🕕 | 🕕 | Шесть часов | |
🕖 | 🕖 | Семь часов | |
🕗 | 🕗 | Восемь часов | |
🕘 | 🕘 | Девять часов | |
🕙 | 🕙 | Десять часов | |
🕚 | 🕚 | Одиннадцать часов | |
🕛 | 🕛 | Двенадцать часов |
Греческий алфавит
строчные | прописные | описание | ||
---|---|---|---|---|
символ | html-код | символ | html-код | |
α | α | Α | Α | альфа |
β | β | Β | Β | бета |
γ | γ | Γ | Γ | гамма |
δ | δ | Δ | Δ | дельта |
ε | ε | Ε | Ε | эпсилон |
ζ | ζ | Ζ | Ζ | дзета |
η | η | Η | Η | эта |
θ | θ | Θ | Θ | тета |
ι | ι | Ι | Ι | йота |
κ | κ | Κ | Κ | каппа |
λ | λ | Λ | Λ | лямбда |
μ | μ | Μ | Μ | мю |
ν | ν | Ν | Ν | ню |
ξ | ξ | Ξ | Ξ | кси |
ο | ο | Ο | Ο | омикрон |
π | π | Π | Π | пи |
ρ | ρ | Ρ | Ρ | ро |
σ | σ | Σ | Σ | сигма |
ς | ς | окончательная сигма | ||
τ | τ | Τ | Τ | тау |
υ | υ | Υ | Υ | ипсилон |
φ | φ | Φ | Φ | фи |
χ | χ | Χ | Χ | хи |
ψ | ψ | Ψ | Ψ | пси |
ω | ω | Ω | Ω | омега |
— Пробел: U+0020 — Таблица символов Юникода
U+0020
Щелкните, чтобы скопировать и вставить символ
Техническая информация
Имя | Космос |
Номер Юникода | У+0020 |
HTML-код |
|
Код CSS | \0020 |
Блок | Базовая латиница |
Версия Юникода: | 1. 1 (1993) |
Альтернативный код: | Вариант 32 |
Значение символа
Пробел. Базовая латынь.
Пространство было утверждено как часть Юникода версии 1.1 в 1993 г.
Свойства
Возраст | 1.1 |
Блок | Базовая латиница |
Парный кронштейн двунаправленного типа, тип | Нет |
Исключение состава | № |
Чемодан складной | 0020 |
Простой складной чемодан | 0020 |
Кодировка
Кодировка | шестнадцатеричный | дес (байт) | дек | двоичный |
---|---|---|---|---|
UTF-8 | 20 | 32 | 32 | 00100000 |
УТФ-16ВЕ | 00 20 | 0 32 | 32 | 00000000 00100000 |
УТФ-16ЛЕ | 20 00 | 32 0 | 8192 | 00100000 00000000 |
UTF-32BE | 00 00 00 20 | 0 0 0 32 | 32 | 00000000 00000000 00000000 00100000 |
УТФ-32ЛЕ | 20 00 00 00 | 32 0 0 0 | 536870912 | 00100000 00000000 00000000 00000000 |
Символ Юникода «ПРОБЕЛ» (U+0020)
- Тестовая страница браузера
Структура (как файл SVG)
Шрифты, поддерживающие U+0020
Не используйте этот символ в именах доменов. Браузеры заносят его в черный список из-за возможности фишинга.
Данные Unicode | |
---|---|
Имя | ПРОБЕЛ |
Блок | Базовая латиница |
Категория | Разделитель, пробел [Zs] |
Комбинат | 0 |
БИДИ | Пробел [WS] |
Зеркало | Н |
Элементы указателя | ПРОБЕЛ Пунктуация и символы ASCII Пунктуация и символы, ASCII Символы, пунктуация ASCII и |
Комментарии | иногда считается управляющим кодом другие символы пробела: U+2000-U+200A |
См. также | неразрывный пробел U+00A0 нулевой пробел U+200B узкий неразрывный пробел U+202F объединение слов U+2060 символ пробела U+2420 пустой символ U+2422 открытый ящик U+2423 идеографический пробел U+3000 неразрывный пробел нулевой ширины U+FEFF |
Версия | Юникод 1. 1.0 (июнь 1993 г.) |
Кодировки | |
---|---|
Объект HTML (десятичный) | |
HTML-объект (шестнадцатеричный) | |
Как печатать в Microsoft Windows | Alt +0020 Альтернативный номер 032 Альтернативный номер 32 |
UTF-8 (шестнадцатеричный) | 0x20 (20) |
UTF-8 (двоичный) | 00100000 |
UTF-16 (шестнадцатеричный) | 0x0020 (0020) |
UTF-16 (десятичный) | 32 |
UTF-32 (шестнадцатеричный) | 0x00000020 (0020) |
UTF-32 (десятичный) | 32 |
Исходный код C/C++/Java | «\u0020» |
Исходный код Python | u»\u0020″ |
Подробнее. .. |
Данные Java | |
---|---|
string.toUpperCase() | |
строка.toLowerCase() | |
Символ.UnicodeBlock | BASIC_LATIN |
Символ.charCount() | 1 |
Характер.getDirectionality() | НАПРАВЛЕНИЕ_WHITESPACE [12] |
Символ.getNumericValue() | -1 |
Символ.getType() | 12 |
Символ.isDefined() | Да |
Символ.isDigit() | № |
Character.isIdentifierIgnorable() | № |
Символ.isOControl() | № |
Character.isJavaIdentifierPart() | № |
Character.isJavaIdentifierStart() | № |
Символ.isLetter() | № |
Символ. |