Typography
Playfair Display & Georgia
The typographical hierarchy implemented within this design system combines two serif fonts, Playfair Display and Georgia. Playfair Display complements the retro look of the logo and branding, while Georgia pairs well with Playfair Display as a readable body typeface. This typographical hierarchy is arranged using a Major Second scale with a base font size of 29px.
H1 |
This is h1. |
font-family: 'Playfair Display', serif;
font-weight: 500;
font-size: 1.802rem;
color: #576CDE;
|
|---|---|---|
H2 |
This is h2. |
font-family: 'Playfair Display', serif;
font-weight: 500;
font-size: 1.602rem;
color: #EF3600;
|
H3 |
This is h3. |
font-family: 'Playfair Display', serif;
font-weight: 500;
font-size: 1.424rem;
color: #2D3D74;
|
H4 |
This is h4. |
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 1.266rem;
color: #2D3D74;
|
H5 |
This is h5. |
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 1.125rem;
color: #2D3D74;
|
|
Body Text |
This is body text. |
font-family: 'Georgia', serif;
font-weight: 400;
font-size: 1rem;
color: #2D3D74;
|
|
Emphasis Text |
This is emphasis text. |
font-family: 'Georgia', serif;
font-weight: 400;
font-size: 1rem;
color: #886B01;
|
|
Link Text |
font-family: 'Georgia', serif;
font-weight: 400;
font-size: 1rem;
text-decoration: underline;
color: #576CDE;
|
Alternatives for use on background color #2D3D74
H1 |
This is h1. |
font-family: 'Playfair Display', serif;
font-weight: 500;
font-size: 1.802rem;
color: #C5CBE3;
|
|---|---|---|
H2 |
This is h2. |
font-family: 'Playfair Display', serif;
font-weight: 500;
font-size: 1.602rem;
color: #FF997B;
|
|
Emphasis Text |
This is emphasis text. |
font-family: 'Georgia', serif;
font-weight: 400;
font-size: 1rem;
color: #F4DB7D;
|