Typography


The design system uses two type scales to aid with responsiveness: one for Bootstrap's XS, SM, MD, and LG breakpoints, and one for its XL and XXL breakpoints.

Typefaces: IvyPresto Headline and Karla
Scale: Minor Third type-scale.com
Base Size: 16px

H1 - Heading 1

font-family: ivypresto-headline, serif;
font-size: 2.986rem;
font-style: normal;
font-weight: 300;


H2 - Heading 2

font-family: ivypresto-headline, serif;
font-size: 2.488rem;
font-style: normal;
font-weight: 300;


H3 - Heading 3

font-family: ivypresto-headline, serif;
font-size: 2.074rem;
font-style: normal;
font-weight: 300;


H4 - Heading 4

font-family: ivypresto-headline, serif;
font-size: 1.728rem;;
font-weight: 300;
font-style: normal;


H5 - Heading 5

font-family: ivypresto-headline, serif;
font-size: 1.44rem;
font-weight: 300;
font-style: italic;


H6 - Heading 6

font-family: ivypresto-headline, serif;
font-size: 1.2rem;
font-weight: 300;
font-style: normal;


Body Text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

font-family: 'Karla', sans-serif;
font-size: 1rem;
font-weight: 300;
font-style: normal;


Emphasised Text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

font-family: 'Karla', sans-serif;
font-size: 1rem;
font-weight: 500;
font-style: normal;


Link

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

font-family: 'Karla', sans-serif;
font-size: 1rem;
font-weight: 200;
color: #9E5D40;
font-style: normal;


Typefaces: IvyPresto Headline and Karla
Scale: Major Third type-scale.com
Base Size: 16px

H1 - Heading 1

font-family: ivypresto-headline, serif;
font-size: 3.815rem;
font-style: normal;
font-weight: 300;


H2 - Heading 2

font-family: ivypresto-headline, serif;
font-size: 3.052rem;
font-style: normal;
font-weight: 300;


H3 - Heading 3

font-family: ivypresto-headline, serif;
font-size: 2.441rem;
font-style: normal;
font-weight: 300;


H4 - Heading 4

font-family: ivypresto-headline, serif;
font-size: 1.44rem;
font-weight: 300;
font-style: normal;


H5 - Heading 5

font-family: ivypresto-headline, serif;
font-size: 1.563rem;
font-weight: 300;
font-style: italic;


H6 - Heading 6

font-family: ivypresto-headline, serif;
font-size: 1.25rem;
font-weight: 300;
font-style: normal;


Body Text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

font-family: 'Karla', sans-serif;
font-size: 1rem;
font-weight: 300;
font-style: normal;


Emphasised Text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

font-family: 'Karla', sans-serif;
font-size: 1rem;
font-weight: 500;
font-style: normal;


Link

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

font-family: 'Karla', sans-serif;
font-size: 1rem;
font-weight: 200;
color: #9E5D40;
font-style: normal;