Typography
Typographic system establishes scale, sizes and weight of text.
Aa
400
Aa
500
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
Inter · 500
56px · 1.1
Copy link to clipboard
Heading 2
Inter · 500
40px · 1.1
Copy link to clipboard
Heading 3
Inter · 500
32px · 1.3
Copy link to clipboard
Heading 4
Inter · 500
28px · 1.3
Copy link to clipboard
Heading 5
Inter · 500
24px · 1.3
Copy link to clipboard
Heading 6
Inter · 600
20px · 1.3
Copy link to clipboard
Subheading
Inter · 700
18px · 1.6
Blockquote
Inter · 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
Form/Text Large
Inter · 600
16px · 1.3
Form/Text Medium
Inter · 600
14px · 1.4
Form/Text Small
Inter · 600
12px · 1.7
LG/Base
Inter · 400
18px · 1.6
LG/Medium
Inter · 600
18px · 1.6
LG/Strong
Inter · 700
18px · 1.6
MD/Base
Inter · 400
16px · 1.6
MD/Medium
Inter · 600
16px · 1.6
MD/Strong
Inter · 700
16px · 1.6
SM/Base
Inter · 400
14px · 1.6
SM/Medium
Inter · 600
14px · 1.6
SM/Strong
Inter · 700
14px · 1.6
XL/Base
Inter · 400
20px · 1.6
XL/Medium
Inter · 600
20px · 1.6
XL/Strong
Inter · 700
20px · 1.6
XS/Base
Inter · 400
12px · 1.6
XS/Medium
Inter · 600
12px · 1.6
XS/Strong
Inter · 700
12px · 1.6
XXL/Base
Inter · 400
22px · 1.6
XXL/Medium
Inter · 600
22px · 1.6
XXL/Strong
Inter · 700
22px · 1.6
XXS/Base
Inter · 400
10px · 1.6
XXS/Medium
Inter · 600
10px · 1.6
XXS/Strong
Inter · 700
10px · 1.6