Typography Pairings

v1.0 Powered by Idea Kraft

Baseline Type

Baseline Type is a resource for anyone looking to easily improve the typography on their website. We provide great pairings with quick to implement HTML & CSS. This is our beta; feel free to provide any feedback or constructive criticism you have to help us improve this resource via the contact form.

Serif / Sans-Serif

Cormorant Garamond & Proza Libre

Headings are set in Cormorant Garamond and the paragraphs are set in Proza Libre. Both fonts are Google Fonts.

Type set in: Cormorant Garamond | Proza Libre

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Proza+Libre" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 46px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Proza Libre', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Proza Libre', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}


Droid Serif & Droid Sans

Headings are set in Droid Serif and the paragraphs are set in Droid Sans. Both fonts are Google Fonts.

Type set in: Droid Serif | Droid Sans

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Droid+Sans" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Droid Serif', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: 2px;
}

h2 {
  color: #000;
  font-family: 'Droid Serif', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 2px;
}

h3 {
  color: #000;
  font-family: 'Droid Serif', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Droid Serif', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .5px;
}

p {
  color: #000;
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Droid Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .5px;
}


Josefin Slab & Josefin Sans

Headings are set in Josefin Slab and the paragraphs are set in Josefin Sans. Both fonts are Google Fonts.

Type set in: Josefin Slab | Josefin Sans

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Josefin+Sans" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Josefin Slab', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 0;
}


h2 {
  color: #000;
  font-family: 'Josefin Slab', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Josefin Slab', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Josefin Slab', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}


Ovo & Muli

Headings are set in Ovo and the paragraphs are set in Muli. Both fonts are Google Fonts.

Type set in: Ovo | Muli

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Muli|Ovo" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Ovo', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 2px;
}

h2 {
  color: #000;
  font-family: 'Ovo', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'Ovo', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Ovo', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .5px;
}

p {
  color: #000;
  font-family: 'Muli', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .5px;
}

.caption {
  color: #777777;
  font-family: 'Muli', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .5px;
}


PT Serif & PT Sans

Headings are set in PT Serif and the paragraphs are set in PT Sans. Both fonts are Google Fonts.

Type set in: PT Serif | PT Sans

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=PT+Serif|PT+Sans" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'PT Serif', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: 1px;
}

h2 {
  color: #000;
  font-family: 'PT Serif', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'PT Serif', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'PT Serif', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .5px;
}

p {
  color: #000;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}


Sanchez & Rambla

Headings are set in Sanchez and the paragraphs are set in Rambla. Both fonts are Google Fonts.

Type set in: Sanchez | Rambla

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Sanchez|Rambla" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Sanchez', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: 0;
}


h2 {
  color: #000;
  font-family: 'Sanchez', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Sanchez', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Sanchez', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Rambla', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .25px;
}

.caption {
  color: #777777;
  font-family: 'Rambla', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .25px;
}


Roboto Slab & Roboto Mono

Headings are set in Roboto Slab and the paragraphs are set in Roboto Mono. Both fonts are Google Fonts.

Type set in: Roboto Slab | Roboto Mono

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto+Mono" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Roboto Slab', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 1px;
}

h2 {
  color: #000;
  font-family: 'Roboto Slab', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'Roboto Slab', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Roboto Slab', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Roboto Mono', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Roboto Mono', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}


Rokkitt & Ubuntu

Headings are set in Rokkitt and the paragraphs are set in Ubuntu. Both fonts are Google Fonts.

Type set in: Rokkitt | Ubuntu

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Rokkitt|Ubuntu" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Rokkitt', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Rokkitt', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 42px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Rokkitt', serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Rokkitt', serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .25px;
}

.caption {
  color: #777777;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .25px;
}


Trirong & Rubik

Headings are set in Trirong and the paragraphs are set in Rubik. Both fonts are Google Fonts.

Type set in: Trirong | Rubik

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Trirong|Rubik" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Trirong', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Trirong', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Trirong', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Trirong', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: .5px;
}

.caption {
  color: #777777;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: .25px;
}


Serif / Serif

Eczar & Gentium Basic

Headings are set in Eczar and the paragraphs are set in Gentium Basic. Both fonts are Google Fonts.

Type set in: Eczar | Gentium Basic

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Eczar:600|Gentium+Basic" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Eczar', serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: 2px;
}

h2 {
  color: #000;
  font-family: 'Eczar', serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'Eczar', serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: .5px;
}

h4 {
  color: #000;
  font-family: 'Eczar', serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: .5px;
}

p {
  color: #000;
  font-family: 'Gentium Basic', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .25px;
}

.caption {
  color: #777777;
  font-family: 'Gentium Basic', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .25px;
}


Libre Baskerville & Playfair Display

Headings are set in Libre Baskerville and the paragraphs are set in Playfair Display. Both fonts are Google Fonts.

Type set in: Libre Baskerville | Playfair Display

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Playfair+Display" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Libre Baskerville', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: 1px;
}

h2 {
  color: #000;
  font-family: 'Libre Baskerville', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'Libre Baskerville', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Libre Baskerville', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: .5px;
}

p {
  color: #000;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .75px;
}

.caption {
  color: #777777;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1px;
}


Neuton Regular & Light

Headings are set in Neuton Regular and the paragraphs are set in Neuton Light. Neuton is a Google Font.

Type set in: Neuton

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Neuton:200,400" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Neuton', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 1px;
}

h2 {
  color: #000;
  font-family: 'Neuton', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: .5px;
}

h3 {
  color: #000;
  font-family: 'Neuton', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .5px;
}

h4 {
  color: #000;
  font-family: 'Neuton', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .75px;
}

p {
  color: #000;
  font-family: 'Neuton', serif;
  font-size: 18px;
  font-weight: 200;
  line-height: 24px;
  letter-spacing: .75px;
}

.caption {
  color: #777777;
  font-family: 'Neuton', serif;
  font-size: 16px;
  font-weight: 200;
  line-height: 20px;
  letter-spacing: .5px;
}


Playfair Display & Alice

Headings are set in Playfair Display and the paragraphs are set in Alice. Both fonts are Google Fonts.

Type set in: Playfair Display | Alice

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Alice|Playfair+Display" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 66px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Alice', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .5px;
}

.caption {
  color: #777777;
  font-family: 'Alice', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .5px;
}


Sans-Serif / Serif

Droid Sans & Droid Serif

Headings are set in Droid Sans and the paragraphs are set in Droid Serif. Both fonts are Google Fonts.

Type set in: Droid Sans | Droid Serif

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Droid Sans', sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: 1px;
}

h2 {
  color: #000;
  font-family: 'Droid Sans', sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 52px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'Droid Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: .5px;
}

h4 {
  color: #000;
  font-family: 'Droid Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: .25px;
}

p {
  color: #000;
  font-family: 'Droid Serif', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .5px;
}

.caption {
  color: #777777;
  font-family: 'Droid Serif', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .5px;
}


Fjalla One & Average

Headings are set in Fjalla One and the paragraphs are set in Average. Both fonts are Google Fonts.

Type set in: Fjalla One | Average

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Average|Fjalla+One" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Fjalla One', sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Fjalla One', sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 46px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Fjalla One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Fjalla One', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Average', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Average', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}


Lato & Merriweather

Headings are set in Lato and the paragraphs are set in Merriweather. Both fonts are Google Fonts.

Type set in: Lato | Merriweather

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Lato:700|Merriweather" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 3px;
}

h2 {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 2px;
}

h3 {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: .5px;
}

p {
  color: #000;
  font-family: 'Merriweather', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .5px;
}

.caption {
  color: #777777;
  font-family: 'Merriweather', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .25px;
}


Oswald & Quattrocento

Headings are set in Oswald and the paragraphs are set in Quattrocento. Both fonts are Google Fonts.

Type set in: Oswald | Quattrocento

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Oswald:700|Quattrocento" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: 3px;
}

h2 {
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 2px;
}

h3 {
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1px;
}

p {
  color: #000;
  font-family: 'Quattrocento', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Quattocento', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}


PT Sans & PT Serif

Headings are set in PT Sans and the paragraphs are set in PT Serif. Both fonts are Google Fonts.

Type set in: PT Sans | PT Serif

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=pt+sans|pt+serif" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'PT Sans', sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 1px;
}

h2 {
  color: #000;
  font-family: 'PT Sans', sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'PT Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: .5px;
}

h4 {
  color: #000;
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .5px;
}

p {
  color: #000;
  font-family: 'PT Serif', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .5px;
}

.caption {
  color: #777777;
  font-family: 'PT Serif', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .5px; }


Quicksand & EB Garamond

Headings are set in Quicksand and the paragraphs are set in EB Garamond. Both fonts are Google Fonts.

Type set in: Quicksand | EB Garamond

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=EB+Garamond|Quicksand" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Quicksand', sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Quicksand', sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Quicksand', sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .25px;
}

.caption {
  color: #777777;
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}


Sans-Serif / Sans-Serif

Cabin & Raleway

Headings are set in Cabin and the paragraphs are set in Raleway. Both fonts are Google Fonts.

Type set in: Cabin | Raleway

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Cabin:500|Raleway" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Cabin', sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 62px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Cabin', sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 50px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Cabin', sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}


Lato Bold & Regular

Headings are set in Lato Bold and the paragraphs are set in Lato Regular. Both fonts are Google Fonts.

Type set in: Lato

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Lato:300,700" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 1px;
}

h2 {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: .5px;
}

p {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: .25px;
}

.caption {
  color: #777777;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: .5px;
}


Montserrat & Lato

Headings are set in Montserrat and the paragraphs are set in Lato. Both fonts are Google Fonts.

Type set in: Montserrat | Lato

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Lato:300|Montserrat:700" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 1px;
}

h2 {
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Monserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .5px; }

p {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: .25px;
}

.caption {
  color: #777777;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: .5px;
}


Open Sans Semi-Bold & Light

Headings are set in Open Sans Semi-Bold and the paragraphs are set in Open Sans Light. Both fonts are Google Fonts.

Type set in: Open Sans

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h2 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

h3 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

h4 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
}

p {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: .75px;
}

.caption {
  color: #777777;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: .5px;
}


Oswald & Open Sans

Headings are set in Oswald and the paragraphs are set in Open Sans. Both fonts are Google Fonts.

Type set in: Oswald | Open Sans

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300|Oswald:700" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

h2 {
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h3 {
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

h4 {
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

p {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: .75px;
}

.caption {
  color: #777777;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: .5px;
}


Roboto Mono & Roboto

Headings are set in Roboto Mono and the paragraphs are set in Roboto. Both fonts are Google Fonts.

Type set in: Roboto Mono | Roboto

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Roboto Mono', monospace;
  font-size: 48px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: 1px;
}

h2 {
  color: #000;
  font-family: 'Roboto Mono', monospace;
  font-size: 36px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'Roboto Mono', monospace;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Roboto Mono', monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .75px;
}

p {
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}


Sintony & Poppins

Headings are set in Sintony and the paragraphs are set in Poppins. Both fonts are Google Fonts.

Type set in: Sintony | Poppins

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Poppins|Sintony" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Sintony', sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Sintony', sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Sintony', sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Sintony', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .5px;
}

.caption {
  color: #777777;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .25px;
}


Source Sans Pro & Cabin

Headings are set in Source Sans Pro and the paragraphs are set in Cabin. Both fonts are Google Fonts.

Type set in: Source Sans Pro | Cabin

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Cabin|Source+Sans+Pro" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: 2px;
}

h2 {
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: 1px;
}

h3 {
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .5px;
}

p {
  color: #000;
  font-family: 'Cabin', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .5px;
}

.caption {
  color: #777777;
  font-family: 'Cabin', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .5px;
}


Cursive

Chonburi & Fjord One

Headings are set in Chonburi and the paragraphs are set in Fjord. Both fonts are Google Fonts.

Type set in: Chonburi | Fjord One

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Chonburi|Fjord+One" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Chonburi', cursive;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Chonburi', cursive;
  font-size: 36px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Chonburi', cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Chonburi', cursive;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Fjord One', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .25px;
}

.caption {
  color: #777777;
  font-family: 'Fjord One', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .5px;
}


Lobster & Play

Headings are set in Lobster and the paragraphs are set in Play. Both fonts are Google Fonts.

Type set in: Lobster | Play

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Lobster|Play" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Lobster', cursive;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 0;
}

h2 {
  color: #000;
  font-family: 'Lobster', cursive;
  font-size: 36px;
  font-weight: 400;
  line-height: 46px;
  letter-spacing: 0;
}

h3 {
  color: #000;
  font-family: 'Lobster', cursive;
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}

h4 {
  color: #000;
  font-family: 'Lobster', cursive;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
}

p {
  color: #000;
  font-family: 'Play', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Play', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}


Pacifico & Arimo

Headings are set in Pacifico and the paragraphs are set in Arimo. Both fonts are Google Fonts.

Type set in: Pacifico | Arimo

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Arimo|Pacifico" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Pacifico', cursive;
  font-size: 48px;
  font-weight: 400;
  line-height: 72px;
  letter-spacing: 2px;
}

h2 {
  color: #000;
  font-family: 'Pacifico', cursive;
  font-size: 36px;
  font-weight: 400;
  line-height: 54px;
  letter-spacing: 2px;
}

h3 {
  color: #000;
  font-family: 'Pacifico', cursive;
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Pacifico', cursive;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 1px;
}

p {
  color: #000;
  font-family: 'Arimo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Arimo', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}


Pinyon Script & Montserrat

Headings are set in Pinyon Script and the paragraphs are set in Montserrat. Both fonts are Google Fonts.

Type set in: Pinyon Script | Montserrat

H1 heading

H2 heading

H3 heading

H4 heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<link href="https://fonts.googleapis.com/css?family=Montserrat:300|Pinyon+Script" rel="stylesheet">

h1 {
  color: #000;
  font-family: 'Pinyon Script', cursive;
  font-size: 48px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: 2px;
}

h2 {
  color: #000;
  font-family: 'Pinyon Script', cursive;
  font-size: 38px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 2px;
}

h3 {
  color: #000;
  font-family: 'Pinyon Script', cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 1px;
}

h4 {
  color: #000;
  font-family: 'Pinyon Script', cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 1px;
}

p {
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0;
}

.caption {
  color: #777777;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: 0;
}


How to Use

  • STEP 1: Copy and paste the HTML code from the pairing of your choice into the <head> section of your website.
  • STEP 2: Copy and paste the CSS code into the CSS stylesheet for your website.
  • STEP 3: Use one of the following HTML tags with your content between the open and closing selectors

    • <h1>content goes here</h1>
    • <h2>content goes here</h2>
    • <h3>content goes here</h3>
    • <h4>content goes here</h4>
    • <p>content goes here</p>
    • <p class="caption">content goes here</p>

Resources

The typeface examples above came from the following resource (we are hoping to add pairings from Typekit and Cloud Typography in the future):

Google Fonts


Contact Us

Is this resource helpful? Have comments or suggestions?

Full Name
Email

captcha
Your message