Typography

The primary colour for all typography on your website is #EEEEEE.

As mentioned in the introduction, the sizing of your headings differ between desktop and mobile breakpoints. Both desktop and mobile breakpoints have a base font size of 18px (1.125em). All pixel values have been rounded.

Desktop - Perfect Fourth (1.33)
67px | 51px | 38px | 28px | 21px | 18px | 16px

Mobile - Perfect Fourth (1.33)
58px | 44px | 33px | 25px | 18px | 18px | 16px

H1

The quick brown fox jumps over the lazy dog.

Desktop: Metropolis | 67px / 4.209rem | 110% | Bold
Mobile: Metropolis | 58px / 3.625rem | 110% | Bold
H2

The quick brown fox jumps over the lazy dog.

Desktop: Metropolis | 67px / 4.209rem | 110% | Bold
Mobile: Metropolis | 58px / 3.625rem | 110% | Bold
H3

The quick brown fox jumps over the lazy dog.

Desktop: Metropolis | 38px / 2.36rem | 120% | Bold
Mobile: Metropolis | 33px / 2.06rem | 120% | Bold
H4

The quick brown fox jumps over the lazy dog.

Desktop: Metropolis | 28px / 1.77rem | 130% | Bold
Mobile: Metropolis | 25px / 1.56rem | 130% | Bold
H5
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Metropolis | 21px / 1.33rem | 140% | Bold
H6
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Metropolis | 18px / 1.125rem | 150% | Bold
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Desktop & Mobile: Metropolis | 18px / 1.125rem | 150% | normal