Typography
Typographic system establishes scale, sizes and weight of text.
Libre Franklin
Primary font used, related assets can be found in the assets page.
Aa
400
Aa
500
Aa
600
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*
Aa
400
Aa
600
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
Libre Franklin · 600
38px · 1.1
Copy link to clipboard
Heading 2
Libre Franklin · 600
24px · 1.1
Copy link to clipboard
Heading 3
Libre Franklin · 400
22px · 1.3
Copy link to clipboard
Heading 4
Libre Franklin · 500
20px · 1.3
Copy link to clipboard
Heading 5
Libre Franklin · 500
18px · 1.3
Copy link to clipboard
Heading 6
Libre Franklin · 600
20px · 1.3
Copy link to clipboard
Paragraph
Inter · 400
14px · 1.8
Copy link to clipboard
Subheading
Libre Franklin · 500
18px · 1.6
Blockquote
Libre Franklin · 400
24px · 1.3
Copy link to clipboard
Button / Text Large
Inter · 600
16px · 1.3
Button / Text Medium
Inter · 600
14px · 1.3
Button / Text Small
Inter · 600
12px · 1.3
Form / Help
Inter · 400
12px · 1.6
Form / Label
Inter · 400
12px · 1.6
Form / Placeholder Large
Inter · 400
16px · 1.3
Form / Placeholder Medium
Inter · 400
14px · 1.4
Form / Placeholder Small
Inter · 400
12px · 1.7
LG / Base
Inter · 400
18px · 1.6
LG / Strong
Inter · 700
18px · 1.6
MD / Base
Libre Franklin · 400
16px · 1.6
MD / Strong
Inter · 700
16px · 1.6
SM / Base
Inter · 400
14px · 1.6
SM / Strong
Inter · 700
14px · 1.6
XL / Base
Inter · 400
20px · 1.6
XL / Strong
Inter · 700
20px · 1.6
XS / Base
Inter · 400
12px · 1.6
XS / Strong
Inter · 600
12px · 1.6
XXL / Base
Inter · 400
22px · 1.6
XXL / Strong
Inter · 700
22px · 1.6
XXS / Base
Inter · 400
10px · 1.6
XXS / Strong
Inter · 700
10px · 1.6