Typography

Updated on 09 June 2018

Docs are work in progress, check open issues and see how you can help!

Typography is a set of properties defining the look of text used across Vinted applications. Currently, Typography has several different types:

  • Heading
  • Title
  • Body
  • User-input
  • Subtitle
  • Caption

There are also a few responsive types, mainly designed for WEB:

  • Responsive Large Heading
  • Responsive Large Title
  • Responsive Large Body

  • Responsive Small Heading
  • Responsive Small Title
  • Responsive Small Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.

Inverse

Inverse style is mainly used on dark and colorful backgrounds.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.

Bold

Bold style add additional weight to typeface, if it’s not inherited from type. Bold style varies based on platform, but it should be medium size font-weight.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.

Strikethrough

Strikethrough style adds a line through the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.

Theme

Theme can override default Typography color with specific style. Theme variations are identical to the ones in Button component. By default, no theme is set.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.

Width

Content (Default)

By default, text can be placed inline with components or even other text and uses it’s own content as default width.

Lorem ipsum dolor sit amet
Parent

Parent property fills entire parent container horizontally. It means, that component after text with this property jumps to new line.

Lorem ipsum dolor sit amet

Alignment

Center

Center alignment property aligns all text to the center of container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.

Right layout property aligns all text to the right side of container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie neque a eleifend placerat. In mollis, ipsum sit amet ultrices tincidunt, est nunc sollicitudin est, aliquet lobortis mi elit vel sem.

Responsive

Responsive typography is supposed to be used mainly for landing pages, blog articles and similar content. Note that there are essentially two groups of responsive types: large and small. When applying responsive types, do not mix different type groups together (for example, responsive large heading with responsive small body).

Large
Heading
Take a Stand for Secondhand
Take a Stand for Secondhand
Title
Take a Stand for Secondhand
Take a Stand for Secondhand
Body
It just does! It's social, and generally speaking, amazing. Really! You only need a profile to experience our community marketplace firsthand! Or should we say, secondhand?
It just does! It's social, and generally speaking, amazing. Really! You only need a profile to experience our community marketplace firsthand! Or should we say, secondhand?
Small
Heading
Take a Stand for Secondhand
Take a Stand for Secondhand
Title
Take a Stand for Secondhand
Take a Stand for Secondhand
Body
It just does! It's social, and generally speaking, amazing. Really! You only need a profile to experience our community marketplace firsthand! Or should we say, secondhand?
It just does! It's social, and generally speaking, amazing. Really! You only need a profile to experience our community marketplace firsthand! Or should we say, secondhand?
Clickable

This will display text as clickable text. Provided Theme will be ignored, and set to use Primary instead.

Clickable subtitle
Clickable default

Specifications

body: (
  font-size:     unit(4),          // 16
  line-height:   unit(5.5),        // 1.375
  color:         palette(cg3),
  font-weight:   400,
),
user-input: (
  font-size:     unit(4),            // 16
  line-height:   unit(5.5),          // 1.375
  color:         palette(cg1),
  font-weight:   400,
),
heading: (
  font-size:     unit(6),          // 24
  line-height:   unit(8),          // 1.33333333
  color:         palette(cg1),
  font-weight:   500,
),
title: (
  font-size:     unit(4),          // 16
  line-height:   unit(5.5),        // 1.375
  color:         palette(cg1),
  font-weight:   500,
),
subtitle: (
  font-size:     unit(3.5),        // 14
  line-height:   unit(4.5),        // 1.28571428
  color:         palette(cg4),
  font-weight:   400,
),
caption: (
  font-size:     unit(3),          // 12
  line-height:   unit(4),          // 1.33333333
  color:         palette(cg4),
  font-weight:   400,
),

// Themes

primary: (
  color: palette(cp1) !important,
),
amplified: (
  color: palette(cg1) !important,
),
muted: (
  color: palette(cg4) !important,
),
success: (
  color: palette(cs1) !important,
),
warning: (
  color: palette(cs3) !important,
),
inverse: (
  color: palette(cg9) !important,
),

// Responsive

responsive: (
  large: (
    heading: (
      mobile: (
        font-size: unit(8),
        line-height: unit(10.5),
        color: palette(cg1),
        font-weight: 500
      ),

      desktop: (
        font-size: unit(12),
        line-height: unit(16),
        color: palette(cg1),
        font-weight: 500
      )
    ),

    title: (
      mobile: (
        font-size: unit(4.5),
        line-height: unit(7),
        color: palette(cg1),
        font-weight: 500
      ),

      desktop: (
        font-size: unit(6),
        line-height: unit(9),
        color: palette(cg1),
        font-weight: 500
      )
    ),

    body: (
      mobile: (
        font-size: unit(4.5),
        line-height: unit(7),
        color: palette(cg3),
        font-weight: 400
      ),

      desktop: (
        font-size: unit(6),
        line-height: unit(9),
        color: palette(cg3),
        font-weight: 400
      )
    ),
  ),

  small: (
    heading: (
      mobile: (
        font-size: unit(6),
        line-height: unit(8),
        color: palette(cg1),
        font-weight: 500
      ),

      desktop: (
        font-size: unit(8),
        line-height: unit(10.5),
        color: palette(cg1),
        font-weight: 500
      )
    ),

    title: (
      mobile: (
        font-size: unit(4),
        line-height: unit(6.5),
        color: palette(cg1),
        font-weight: 500
      ),

      desktop: (
        font-size: unit(4.5),
        line-height: unit(7),
        color: palette(cg1),
        font-weight: 500
      )
    ),

    body: (
      mobile: (
        font-size: unit(4),
        line-height: unit(6.5),
        color: palette(cg3),
        font-weight: 400
      ),

      desktop: (
        font-size: unit(4.5),
        line-height: unit(7),
        color: palette(cg3),
        font-weight: 400
      )
    ),
  )
)

API

name type default
type heading-1 / heading-2 / heading-3 / title / body / user-input / subtitle / caption body
inverse false / true false
bold false / true false
strikethrough false / true false
theme none / primary / amplified / muted / success / warning (none)
width content / parent content
alignment left / center / right left
clickable boolean false

Responsive Types

group type breakpoints
large heading / title / body mobile / desktop
small heading / title / body mobile / desktop