Hierarchy One

Pairing Typefaces


Playfair Display & Red Hat Display

Major Third Scale: 1.250 type-scale.com
Base size: 1 rem / 16 px

H1

Heading One


Red Hat is a fresh take on the geometric sans genre, taking inspiration from a range of American sans serifs including Tempo and Highway Gothic. The Display styles are low contrast and spaced tightly, with a large x-height and open counters.

HEADER
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 3.052 rem;


BODY
font-family: 'Red Hat Display', sans-serif;
font-weight: 500;
font-size: 1 rem;

H2

Heading Two


Red Hat is a fresh take on the geometric sans genre, taking inspiration from a range of American sans serifs including Tempo and Highway Gothic. The Display styles are low contrast and spaced tightly, with a large x-height and open counters.

HEADER
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 2.441 rem;


BODY
font-family: 'Red Hat Display', sans-serif;
font-weight: 500;
font-size: 1 rem;

H3

Heading Three


Red Hat is a fresh take on the geometric sans genre, taking inspiration from a range of American sans serifs including Tempo and Highway Gothic. The Display styles are low contrast and spaced tightly, with a large x-height and open counters.

HEADER
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 1.953 rem;


BODY
font-family: 'Red Hat Display', sans-serif;
font-weight: 500;
font-size: 1 rem;

H4

Heading Four


Red Hat is a fresh take on the geometric sans genre, taking inspiration from a range of American sans serifs including Tempo and Highway Gothic. The Display styles are low contrast and spaced tightly, with a large x-height and open counters.

HEADER
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 1.563 rem;


BODY
font-family: 'Red Hat Display', sans-serif;
font-weight: 500;
font-size: 1 rem;

Body
Body Text

BODY
font-family: 'Red Hat Display', sans-serif;
font-weight: 500;
font-size: 1 rem;

Emphasised Text
Bold Text

BODY
font-family: 'Red Hat Display', sans-serif;
font-weight: 700;
font-size: 1 rem;

Hyperlinked Text
Text that goes places

BODY
font-family: 'Red Hat Display', sans-serif;
font-weight: 500;
font-color: steelblue;
font-size: 1 rem;



Body text provided by:

https://fonts.google.com/specimen/Red+Hat+Display?query=red+hat#about