Типографика

Система иерархической организации текстовой информации.

Отступы на сайте CDS

Отступы

Основная информация

Line height

line-height = font size * 1,45

Цвета

Цвета, использующиеся для текста в дизайн-системе можно увидеть пройдя по ссылке - Текст

Системные шрифты

На данный момент в CDS как основной используется шрифт - Arial.

Рекомендации

Выравнивание

Возможно Правое выравние допустимо для небольших объемов текста

Правое выравние допустимо для небольших объемов текста

Неправильно Левое выравнивание лучше всего подходит для чтения текста

Левое выравнивание лучше всего подходит для чтения текста

Выравнивание по центру можно использовать для небольших объемов текста и заголовков.

Правильно Допустимо для небольших объемов текста и заголовков

Допустимо для небольших объемов текста и заголовков

Возможно Выравниевание по ширине ухудшает читаемость текста

Выравниевание по ширине ухудшает читаемость текста

Регистр

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

Правильно Верхний регистр хорошо читаем в интерфейсе если он в маленьком формате

Верхний регистр хорошо читаем в интерфейсе если он в маленьком формате

Неправильно Не пишите заголовки полностью в верхнем регистре

Не пишите заголовки полностью в верхнем регистре

Начертание

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

Длина строки

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

  1. для мобильных устройств лучше использовать 30 - 40 символов в строке
  2. для экрана компьютера лучше использовать 50 - 75 символов в строке

Длина строки

Лидинг

Увеличивая межстрочное расстояние, улучшается читаемость в обмен на пространство экрана. Для хорошей читаемости межстрочный интервал должен быть на 30% больше, чем высота символов.

Правильно Хорошо подобранное межстрочное расстояние улучшает читабельность

Хорошо подобранное межстрочное расстояние улучшает читабельность

Неправильно Плохо подобранное межстрочное расстояние ухудшает читабельность

Плохо подобранное межстрочное расстояние ухудшает читабельность

Новое мажорное обновление!
Мы активно разрабатываем дизайн систему CDS 3.0 на Vue 3