Типографика

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

Productivity

На productivity-сервисах используются шрифты Arial / Helvetica.

Заголовок первого уровня@fontH1Productivity { font-size: 24px; line-height: 32px; font-weight: regular; margin-bottom: 20px }
Заголовок второго уровня@fontH2Productivity { font-size: 20px; line-height: 28px; font-weight: regular; margin-bottom: 16px }
Заголовок третьего уровня@fontH3Productivity { font-size: 17px; line-height: 24px; font-weight: regular; margin-bottom: 12px }
Заголовок четвертого уровня@fontH4Productivity { font-size: 15px; line-height: 20px; font-weight: bold; margin-bottom: 8px }
Наборный текст на странице@fontBodyProductivity { font-size: 15px; line-height: 20px; font-weight: regular }
Шрифт для сносок и вторичного текста@fontFootnoteProductivity { font-size: 13px; line-height: 20px; font-weight: regular }
Шрифт для кнопок и полей ввода@fontControlProductivity { font-size: 15px; line-height: 20px; font-weight: regular }
Шрифт для лейблов у полей ввода@fontControlLabelProductivity { font-size: 13px; line-height: 20px; font-weight: bold; margin-bottom: 4px }

Медиапроекты

Используются шрифты Roboto и Roboto Slab.

Для основного текста показываются разные начертания и шрифты для разных платформ:

— Windows Vista и старше: Roboto Regular;
— MacOS: Roboto Light;
— Windows XP: Arial.

Заголовок нулевого уровня до 1280px@fontH0Media { font-size: 44px; line-height: 52px; font-weight: bold }

Заголовок нулевого уровня на 1024px@fontH0ResponsiveMedia { font-size: 40px; line-height: 48px; font-weight: bold }
Заголовок первого уровня до 1280px@fontH1Media { font-size: 32px; line-height: 40px; font-weight: bold }

Заголовок первого уровня на 1024px@fontH1ResponsiveMedia { font-size: 30px; line-height: 40px; font-weight: bold }
Заголовок второго уровня до 1280px@fontH2Media { font-size: 24px; line-height: 32px; font-weight: bold }

Заголовок второго уровня на 1024px@fontH2ResponsiveMedia { font-size: 20px; line-height: 28px; font-weight: bold }
Заголовок третьего уровня до 1280px@fontH3Media { font-size: 20px; line-height: 28px; font-weight: bold }

Заголовок третьего уровня на 1024px@fontH3ResponsiveMedia { font-size: 17px; line-height: 24px; font-weight: bold }
Заголовок четвертого уровня до 1280px@fontH4Media { font-size: 17px; line-height: 24px; font-weight: bold }

Заголовок четвертого уровня на 1024px@fontH4ResponsiveMedia { font-size: 15px; line-height: 20px; font-weight: bold }
Основной наборный текст до 1280px@fontBodyMedia { font-size: 17px; line-height: 24px; font-weight: regular (Windows) / light (OSX) }

Основной наборный текст на 1024px@fontBodyResponsiveMedia { font-size: 15px; line-height: 20px; font-weight: regular (Windows) / light (OSX) }
Шрифт для ссылок в списке@fontLinkSecondaryMedia { font-size: 15px; line-height: 20px; font-weight: regular (Windows) / light (OSX) }
Шрифт для ссылок возле картинок@fontLinkMedia { font-size: 17px; line-height: 24px; font-weight: regular (Windows) / light (OSX) }
Шрифт для сносок@fontFootnoteMedia { font-size: 13px; line-height: 20px; font-weight: regular (Windows) / light (OSX) }
Цитата полноэкранная (диафильмы, лонгриды) до 1280px@fontQuoteFullscreenMedia { font-size: 32px; line-height: 40px; font-family: slab }

Цитата полноэкранная (диафильмы, лонгриды) на 1024px@fontQuoteFullscreenResponsiveMedia { font-size: 30px; line-height: 40px; font-family: slab }
Шрифт для оформления цитат@fontQuoteMedia { font-size: 24px; line-height: 32px; font-family: slab }
Шрифт для оформления лида до 1280px@fontLeadMedia { font-size: 20px; line-height: 28px; font-family: slab }

Шрифт для оформления лида на 1024px@fontLeadResponsiveMedia { font-size: 17px; line-height: 24px; font-family: slab }
Шрифт для текста в карточках до 1280px@fontCardMedia { font-size: 17px; line-height: 24px; font-family: slab }

Шрифт для текста в карточках на 1024px@fontCardResponsiveMedia { font-size: 15px; line-height: 20px; font-family: slab }
Шрифт для текста в тегах@fontTagMedia { font-size: 10px; line-height: 12px; font-weight: bold; font-family: slab; text-transform: uppercase; letter-spacing: 0.5; }
Шрифт для пояснений к рейтингам@fontRatingMedia { font-size: 10px; line-height: 12px; font-weight: normal }
Шрифт в кнопках и инпутах@fontControlMedia { font-size: 15px; line-height: 20px; font-weight: regular (Windows) / light (OSX) }
Шрифт во вкладках@fontTabMedia { font-size: 17px; line-height: 24px; font-weight: regular (Windows) / light (OSX) }
Шрифт активной вкладки@fontTabActiveMedia { font-size: 17px; line-height: 24px; font-weight: bold }

Мобильный веб

Используются шрифты Arial / Helvetica.

Заголовок первого уровня@fontH1Touch { font-size: 24px; line-height: 32px; font-weight: bold; margin-bottom: 24px }
Заголовок второго уровня@fontH2Touch { font-size: 20px; line-height: 28px; font-weight: bold }
Заголовок третьего уровня@fontH3Touch { font-size: 17px; line-height: 20px; font-weight: bold; margin-bottom: 12px }
Шрифт для текста статьи@fontArticleTouch { font-size: 17px; line-height: 24px; font-weight: normal; margin-bottom: 24px }
Шрифт для основного текста@fontBodyTouch { font-size: 15px; line-height: 20px; font-weight: normal }
Шрифт для сносок@fontFootnoteTouch { font-size: 13px; line-height: 20px; font-weight: normal }
Шрифт для лидов@fontLeadTouch { font-size: 17px; line-height: 24px; font-weight: bold }
Шрифт для оформления цитат@fontQuoteTouch { font-size: 17px; line-height: 24px; font-weight: normal }
Шрифт для рейтинга@fontRatingTouch { font-size: 13px; line-height: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 20 }
 { font-size: 13px; line-height: 20px; font-weight: normal; }
Шрифт в кнопках@fontControlTouch { font-size: 15px; line-height: 20px; font-weight: bold; }
Шрифт для лейблов у полей ввода@fontControlLabelTouch { font-size: 13px; line-height: 20px; font-weight: bold; }
Шрифт для ссылок на разделы@fontLinkTouch { font-size: 13px; line-height: 20px; font-weight: bold; }
Шрифт активной вкладки@fontTabActiveTouch { font-size: 13px; line-height: 20px; font-weight: bold; }
Шрифт неактивной вкладки@fontTabTouch

Промо-письма

Используются шрифты Arial / Helvetica.

Заголовок первого уровня@fontH1Letter { font-size: 28px; line-height: 32px; font-weight: normal }
Заголовок второго уровня@fontH2Letter { font-size: 24px; line-height: 32px; font-weight: normal }
Заголовок третьего уровня@fontH3Letter { font-size: 20px; line-height: 28px; font-weight: normal }
Заголовок четвертого уровня@fontH4Letter { font-size: 17px; line-height: 24px; font-weight: normal }
Шрифт для лида и текста в промо-врезах@fontLeadLetter { font-size: 20px; line-height: 28px; font-weight: normal }
Шрифт для основного текста@fontBodyLetter { font-size: 17px; line-height: 24px; font-weight: normal }
Шрифт для сносок@fontFootnoteLetter { font-size: 15px; line-height: 20px; font-weight: normal }
Шрифт в простых кнопках и инпутах@fontControlLetter { font-size: 15px; line-height: 20px; font-weight: normal }
Шрифт в главных кнопках@fontControlPrimaryLetter { font-size: 20px; line-height: 28px; font-weight: normal }
Шрифт для ссылок@fontLinkLetter { font-size: 15px; line-height: 20px; font-weight: normal }
Шрифт для крупных ссылок@fontLinkPrimaryLetter { font-size: 20px; line-height: 28px; font-weight: normal }

Промо-сайты

В промо-сайтах используется шрифт Roboto.

Заголовок нулевого уровня (обложка)@fontH0Promo { font-size: 44px; line-height: 52px; font-weight: 300 }
Заголовок первого уровня@fontH1Promo { font-size: 32px; line-height: 40px; font-weight: 300 }
Заголовок второго уровня@fontH2Promo { font-size: 24px; line-height: 32px; font-weight: 300 }
Заголовок третьего уровня@fontH3Promo { font-size: 20px; line-height: 28px; font-weight: 300 }
Заголовок четвертого уровня@fontH4Promo { font-size: 17px; line-height: 24px; font-weight: 300 }
Шрифт для основного текста@fontBodyPromo { font-size: 17px; line-height: 24px; font-weight: 300 }
Шрифт для сносок@fontFootnotePromo { font-size: 13px; line-height: 20px; font-weight: 300 }
Шрифт в кнопках и инпутах@fontControlPromo { font-size: 15px; line-height: 20px; font-weight: 300 }
Шрифт для ссылок (в списке)@fontLinkSecondaryPromo { font-size: 15px; line-height: 20px; font-weight: 300 }
Шрифт для ссылок у картинок@fontLinkPromo { font-size: 17px; line-height: 24px; font-weight: 300 }
Шрифт для вкладок@fontTabPromo { font-size: 17px; line-height: 24px; font-weight: 300 }

Мy.com

Используется шрифт Proxima Nova.

Заголовок нулевого уровня@fontH0Mycom { font-size: 44px; line-height: 52px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }
Заголовок нулевого уровня (альтернативный)@fontH0SecondaryMycom { font-size: 44px; line-height: 52px; font-weight: bold; }
Заголовок первого уровня@fontH1Mycom { font-size: 32px; line-height: 40px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
Заголовок первого уровня (альтернативный)@fontH1SecondaryMycom { font-size: 32px; line-height: 40px; font-weight: bold; }
Заголовок второго уровня@fontH2Mycom { font-size: 24px; line-height: 32px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
Заголовок второго уровня (альтернативный)@fontH2SecondaryMycom { font-size: 24px; line-height: 32px; font-weight: bold; }
Заголовок третьего уровня@fontH3Mycom { font-size: 20px; line-height: 28px; font-weight: bold }
Заголовок четвертого уровня@fontH4Mycom { font-size: 17px; line-height: 24px; font-weight: bold }
Основной наборный текст@fontBodyMycom { font-size: 17px; line-height: 24px; font-weight: regular }
Дополнительный наборный текст@fontBodySecondaryMycom { font-size: 15px; line-height: 24px; font-weight: regular }
Шрифт для подзаголовков@fontLeadMycom { font-size: 20px; line-height: 28px; font-weight: regular }
Шрифт для сносок@fontFootnoteMycom { font-size: 13px; line-height: 20px; font-weight: regular }
Шрифт для текста в тегах@fontTagMycom { font-size: 10px; line-height: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
Шрифт в кнопках@fontControlMycom { font-size: 12px; line-height: 20px; font-weight: regular; text-transform: uppercase; letter-spacing: 1px; }
Шрифт в больших вкладках@fontTabMycom { font-size: 17px; line-height: 24px; font-weight: regular
Шрифт в обычных вкладках@fontTabSecondaryMycom { font-size: 15px; line-height: 24px; font-weight: regular }