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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Proza+Libre" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Droid+Sans" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Josefin+Sans" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Ovo & Muli
Headings are set in Ovo and the paragraphs are set in Muli. Both fonts are Google Fonts.
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Muli|Ovo" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=PT+Serif|PT+Sans" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Sanchez & Rambla
Headings are set in Sanchez and the paragraphs are set in Rambla. Both fonts are Google Fonts.
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Sanchez|Rambla" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto+Mono" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Rokkitt & Ubuntu
Headings are set in Rokkitt and the paragraphs are set in Ubuntu. Both fonts are Google Fonts.
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Rokkitt|Ubuntu" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Trirong & Rubik
Headings are set in Trirong and the paragraphs are set in Rubik. Both fonts are Google Fonts.
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Trirong|Rubik" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Eczar:600|Gentium+Basic" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Playfair+Display" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Neuton:200,400" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Alice|Playfair+Display" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Average|Fjalla+One" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Lato & Merriweather
Headings are set in Lato and the paragraphs are set in Merriweather. Both fonts are Google Fonts.
Type set in: Lato | Merriweather
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Lato:700|Merriweather" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Oswald & Quattrocento
Headings are set in Oswald and the paragraphs are set in Quattrocento. Both fonts are Google Fonts.
Type set in: Oswald | Quattrocento
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Oswald:700|Quattrocento" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=pt+sans|pt+serif" rel="stylesheet">
- CLOSE
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; }
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=EB+Garamond|Quicksand" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Sans-Serif / Sans-Serif
Cabin & Raleway
Headings are set in Cabin and the paragraphs are set in Raleway. Both fonts are Google Fonts.
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Cabin:500|Raleway" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Lato:300,700" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Montserrat & Lato
Headings are set in Montserrat and the paragraphs are set in Lato. Both fonts are Google Fonts.
Type set in: Montserrat | Lato
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Lato:300|Montserrat:700" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300|Oswald:700" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Sintony & Poppins
Headings are set in Sintony and the paragraphs are set in Poppins. Both fonts are Google Fonts.
Type set in: Sintony | Poppins
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Poppins|Sintony" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Cabin|Source+Sans+Pro" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Chonburi|Fjord+One" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Lobster & Play
Headings are set in Lobster and the paragraphs are set in Play. Both fonts are Google Fonts.
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Lobster|Play" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
Pacifico & Arimo
Headings are set in Pacifico and the paragraphs are set in Arimo. Both fonts are Google Fonts.
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Arimo|Pacifico" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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
- SCALE
- HTML
- CSS
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.
- CLOSE
<link href="https://fonts.googleapis.com/css?family=Montserrat:300|Pinyon+Script" rel="stylesheet">
- CLOSE
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;
}
- CLOSE
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):
Contact Us
Is this resource helpful? Have comments or suggestions?