Typography
Typographic system establishes scale, sizes and weight of text.
Klavika Basic
Primary font used, related assets can be found in the assets page.
Aa
400
Aa
600
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*
Aa
300
Aa
400
Aa
700
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*
Type Scale
Nullam tempor nunc ut tempus vehicula. Duis dignissim sem id nulla tempus, eget cursus sapien efficitur. Suspendisse convallis odio a dui congue vulputate.
Heading 1
Klavika Basic · 600
56px · 1.1
Copy link to clipboard
Heading 2
Klavika Basic · 400
40px · 1.1
Copy link to clipboard
Heading 3
Klavika Basic · 400
32px · 1.3
Copy link to clipboard
Heading 4
Klavika Basic · 400
28px · 1.3
Copy link to clipboard
Heading 5
Klavika Basic · 600
24px · 1.3
Copy link to clipboard
Heading 6
Klavika Basic · 600
20px · 1.3
Copy link to clipboard
Subheading
Klavika Basic · 600
16px · 1.4
Blockquote
Helvetica · 300
20px · 1.6
Copy link to clipboard
Button/Text Large
Klavika Basic · 600
20px · 1.0
Button/Text Medium
Klavika Basic · 600
18px · 1.0
Button/Text Small
Klavika Basic · 600
15px · 1.1
Form/Help
Helvetica · 400
12px · 1.6
Form/Label
Helvetica · 400
12px · 1.6
Form/Placeholder Large
Helvetica · 400
16px · 1.3
Form/Placeholder Medium
Klavika Basic · 400
16px · 1.3
Form/Placeholder Small
Klavika Basic · 400
12px · 1.7
LG/Base
Helvetica · 400
18px · 1.6
LG/Strong
Helvetica · 700
18px · 1.6
MD/Base
Helvetica · 400
16px · 1.6
MD/Strong
Helvetica · 700
16px · 1.6
SM/Base
Helvetica · 400
14px · 1.6
SM/Strong
Helvetica · 700
14px · 1.6
XL/Base
Helvetica · 400
20px · 1.6
XL/Strong
Helvetica · 700
20px · 1.6
XS/Base
Helvetica · 400
12px · 1.6
XS/Strong
Helvetica · 400
12px · 1.6
XXL/Base
Helvetica · 400
22px · 1.6
XXL/Strong
Helvetica · 700
22px · 1.6
XXS/Base
Helvetica · 400
10px · 1.6
XXS/Strong
Helvetica · 700
10px · 1.6