Typography
Font, Size and Scale for Digital
SPARCK uses only Catamaran as its font family for digital and print. The scale size used across the digital assets is the 1.3333 (Perfect Fourth). The font size for a paragraph or body copy that is used as a base to scale up or down by 1.333 the font is 20px (1em).
Heading 1
Catamaran, Extra-Bold 800,
font-size: 84px,
line height 1.5, letter spacing -1.5
Heading 2
Catamaran, Medium 500,
font-size: 63px,
line height 1.5, letter spacing -0.5
Heading 3
Catamaran, Medium 500,
font-size: 47px,
line height 1.5, letter spacing 0
Heading 4
Catamaran, Extra-Bold 800,
font-size: 36px,
line height 1.5, letter spacing 0.25
Heading 5
Catamaran, Medium 500,
font-size: 27px,
line height 1.5, letter spacing 0.25
Heading 6
Catamaran, Extra-Bold 800,
font-size: 20px,
line height 1.5, letter spacing 0.25
Body Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Catamaran, Light 200,
font-size: 20px,
line height 1.6, letter spacing 0.4
Headline 1
Headline 2
Headline 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Headline 4
Headline5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Menu Header
Menu Header (Hover/Selected)
Sticky Menu Header
Sticky Menu Header (Hover/Selected)
Mobile Menu Header
Mobile Menu Header (Hover/Selected)
Catamaran, Medium 500,
Desktop font-size: 20px, | header stick header: 16px | Mobile Menu: 24px;
line height 1.5, letter spacing 0
colour: #5000ff | hover: #f57788