Правила использования шрифтов

Руководство по использованию шрифтов и стилей.

Гарнитура

В качестве основного шрифта мы используем Roboto в различных вариациях, для заголовков шрифт Montserrat. Скачать данные шрифты можно на сайте Google Fonts.

Типографика

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

Heading1 (H1)

Font: Montserrat Bold (700)
Font size: 54
Line-height: 60

Color: #ffffff

Color: #252525
Основной цвет

Color: #ff5a5a
ПримечаниеДанный цвет в заголовке необходимо использовать, если нужно показать активную гипперссылку

Heading2 (H2)

Font: Motserrat Bold (700)
Font size: 38
Line-height: 44

Color: #ffffff

Color: #252525
Основной цвет

Color: #ff5a5a
ПримечаниеДанный цвет в заголовке необходимо использовать, если нужно показать активную гипперссылку

Heading3 (H3)

Font: Montserrat Bold (700)
Font size: 28
Line-height: 32

Color: #ffffff

Color: #252525
Основной цвет

Color: #ff5a5a
ПримечаниеДанный цвет в заголовке необходимо использовать, если нужно показать активную гипперссылку

Heading4 (H4)

Font: Montserrat Bold (700)
Font size: 22
Line-height: 28
ПримечаниеДанный заголовок используется в хлебных крошках

Color: #ffffff

Color: #6e6e6e
ПримечаниеДанный цвет используется только в хлебных крошках

Color: #252525
Основной цвет

Color: #ff5a5a
ПримечаниеДанный цвет в заголовке необходимо использовать, если нужно показать активную гипперссылку

Heading5 (H5)

Font: Montserrat Bold (700)
Font size: 18
Line-height: 24
ПримечаниеДанный заголовок используется в футере сайта

Color: #ffffff

Color: #252525
Основной цвет

Color: #ff5a5a
ПримечаниеДанный цвет в заголовке необходимо использовать, если нужно показать активную гипперссылку

Heading6 (H6)

Font: Montserrat Bold (700)
Font size: 14
Line-height: 18
ПримечаниеИнформация о данном шрифте

Color: #ffffff

Color: #252525
Основной цвет

Color: #ff5a5a
ПримечаниеДанный цвет в заголовке необходимо использовать, если нужно показать активную гипперссылку

Subtitle

Font: Montserrat Bold (700)
Font size: 22
Line-height: 28
ПримечаниеДанный позаголовок используется в слайдерах

Color: #ffffff

Color: #252525

Color: #ff5a5a
ПримечаниеДанный цвет в подзаголовке необходимо использовать, если нужно показать активную гипперссылку

Basic-font

Font: Roboto Light (300)
Font size: 18
Line-height: 24

Color: #ffffff

Color: #6e6e6e
ПримечаниеЦвет по умолчанию для основного шрифта

Color: #ff5a5a
ПримечаниеДанный цвет необходимо использовать, если нужно показать активную гипперссылку или всплывающую информацию

Small-font

Font: Roboto Light (300)
Font size: 14
Line-height: 18

Color: #ffffff

Color: #6e6e6e
ПримечаниеЦвет по умолчанию для данного шрифта

Color: #ff5a5a
ПримечаниеДанный цвет необходимо использовать, если нужно показать активную гипперссылку или всплывающую информацию

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