TUI Type Light

Download

Line Heights

1.1 for Header 1 and 1 for character spacing.
1.2 for Header 2 to 5, Quote, Preamble & Buttons
1.3 for Body

All values are converted to rounded pixelvalues in Sketch.
The typographic hierarchy is set from mobile first which means that ‘medium’ and ‘large’ will act as overrides when applicable. Fallbacks are shown below as greyed out.

Font families

Heading 1

Size: 30px (small screen), 42px (medium screen), 54px (large Screen)   line-height 1.1   letter-spacing: 1px;

Heading 2

Size: 24px (small screen), 34px (medium & large screen)   line-height 1.2

Heading 3

Size: 20px (small screen), 24px (medium & large screen)   line-height 1.2

Heading 4

Size: 14px (small screen), 18px (medium & large screen)   line-height 1.2

Heading 5

Size: 12px (small screen), 14px (medium & large screen)   line-height 1.2

Text 1 (default)

Size: 18px   line-height: 1.3

Text 2

Size: 16px   line-height: 1.3

Text 3

Size: 14px   line-height: 1.3

Text 4

Size: 12px   line-height: 1.3

Preamble

Size: 20px (small screen), 24px (medium & large screen)   line-height: 1.2   font-style: italic   font-weight: bold (small screen)

Blockquote

Size: 20px (small screen), 24px (medium & large screen)   line-height: 1.2   font-weight: bold (small screen)