Верстка сумм

Account

Десятичный разделитель — запятая.

1,20 ₽

Группы разрядов отбиваются пробелом. Подробнее в Википедии

1 000

Знак валюты отбивается пробелом.

1 000 ₽

Для отрицательных значений используем минус . Знак от суммы пробелом не отбивается. В MacOS найти его можно в панели символов Ctrl + Cmd + Space. В HTML -.

−1 000 ₽

Symbols

Для упрощения работы с макетами можно использовать среднее тире Alt - в MacOS. Не надо использовать дефис -.

String example

Для положительных значений используем плюс +. Знак от суммы пробелом не отбивается.

+1 000 ₽

Стилистика

Для удобства чтения сотые и знак валюты отделяются от целой части более легким начертанием. Для стандартного кегля это пара Regular и Light. Для кеглей больше 20pt это Light и Thin.

Account Account

Исключения

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

Account

«Копейки»

Сотые значения не отображаются, если их нет.

Никогда не округляются до десятой части, если они есть.

2 000 ₽ и 2 000,10 ₽

10 $ и 10,50 $

Исключения

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