Our body font is set to 16px (1rem). All type follows an 8px (0.5rem) baseline grid to acheive consistancy across all platforms. Each text block has it’s line-height adjusted to factors of eight.
Headings
Mega (Large) - Avenir Next Bold (64px / 4rem)
h1 (Large) - Avenir Next Bold (48px / 3rem)
Line height 64px (4rem / 1.15)
h2 (Large) - Avenir Next Bold (32px / 1.75rem)
Line height 40 px (2.5rem / 1.25)
h3 - Avenir Next Bold (20px / 1.25rem)
Line height 24px (1.5rem / 1.2)
h4 - Avenir Next Bold (18px / 1.125rem)
Line height 24px (1.5rem / 1.3)
h5 - Avenir Next Bold (16px / 1rem)
Line height 20px (1.25rem / 1.25)
h6 - Avenir Next Demi Bold (12px / 0.75rem)
Line height 16px (1rem / 1.35)
Body
Intro
Avenir Next Demi 20px (1.25rem) with a 32px (2rem/1.6) line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Body
Avenir Next Regular 16px (1rem) with a 24px (1.5rem/1.5) line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.
Small
Avenir Next Regular 14px (0.875rem) with a 24px (1.5rem / 1.7) line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Micro
Avenir Next Demi 12px (0.75rem) with a 16px (1rem/1.35) line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Bullets & Lists
Unordered
- List item
- List item but a bit longer
- List item but this time is really long and i will type a bit more to make sure
- List item
- List item
Ordered
- List item
- List item but a bit longer
- List item but this time is really long and i will type a bit more to make sure
- List item
- List item