Typography
Typographic system establishes scale, sizes and weight of text.
Aa
400
Aa
600
Aa
700
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
Open Sans · 700
56px · 1.1
Copy link to clipboard
Heading 2
Open Sans · 700
40px · 1.1
Copy link to clipboard
Heading 3
Open Sans · 600
32px · 1.3
Copy link to clipboard
Heading 4
Open Sans · 600
28px · 1.3
Copy link to clipboard
Heading 5
Open Sans · 600
24px · 1.3
Copy link to clipboard
Heading 6
Open Sans · 600
20px · 1.3
Copy link to clipboard
Subheading
Open Sans · 600
16px · 1.6
Blockquote
Open Sans · 600
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 · 600
12px · 1.6
Form/Label Large
Inter · 600
16px · 1.2
Form/Label Medium
Inter · 600
14px · 1.4
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
Open Sans · 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