10+ snygga Google Webbtypsnitt som matchar

Användandet av webbtypsnitt har ökat enormt den senaste tiden. Mest på grund av tjänster som Google Web Fonts, Fontsquirrel, Typekit och Fontdeck. Detta gör att man i princip har obegränsade möjligheter att välja typsnitt på både rubriker och brödtext.

Med detta i åtanke tänkte vi hjälpa till med att lista några typsnitts-par som passar utmärkt tillsammans.

Niconne & Crimson Text

<link href='http://fonts.googleapis.com/css?family=Niconne|Crimson+Text' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Niconne', cursive;
	font-size: 60px;
	line-height: 1.4;
}

p {
	font-family: 'Crimson Text', serif;
	font-size: 16px;
	line-height: 1.5;
}

Exo & Droid Sans

<link href='http://fonts.googleapis.com/css?family=Exo:700|Droid+Sans' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Exo', sans-serif;
	font-size: 60px;
	line-height: 1.4;
}

p {
	font-family: 'Droid Sans', sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

Arvo & PT Sans

<link href='http://fonts.googleapis.com/css?family=Arvo:700|PT+Sans' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Arvo', serif;
	font-size: 60px;
	line-height: 1.5;
}

p {
	font-family: 'PT Sans', sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

Bree Serif & Open Sans

<link href='http://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Bree Serif', serif;
	font-size: 60px;
	line-height: 1.3;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.7;
}

Ubuntu & Vollkorn

<link href='http://fonts.googleapis.com/css?family=Ubuntu:700|Vollkorn' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Ubuntu', sans-serif;
	font-size: 50px;
	line-height: 1.7;
}

p {
	font-family: 'Vollkorn', serif;
	font-size: 16px;
	line-height: 1.6;
}

Josefin Sans & Lora

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300|Lora' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	line-height: 1.4;
}

p {
	font-family: 'Lora', serif;
	font-size: 16px;
	line-height: 1.6;
}

Pacifico & Arimo

<link href='http://fonts.googleapis.com/css?family=Pacifico|Arimo' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Pacifico', cursive;
	font-size: 60px;
	line-height: 1.6;
}

p {
	font-family: 'Arimo', sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

Raleway & Georgia

<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Raleway', cursive;
	font-size: 55px;
	line-height: 1.5;
}

p {
	font-family: Georgia, serif;
	font-size: 16px;
	line-height: 1.6;
}

Dancing Script & Josefin Sans

<link href='http://fonts.googleapis.com/css?family=Dancing+Script:700|Josefin+Sans' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Dancing Script', cursive;
	font-size: 60px;
	line-height: 1.5;
}

p {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 21px;
	line-height: 1.3;
}

Nixie & Open Sans

<link href='http://fonts.googleapis.com/css?family=Nixie+One|Open+Sans' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Nixie One', cursive;
	font-size: 60px;
	line-height: 1.5;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

Abril Fatface & Goudy Bookletter 1911

<link href='http://fonts.googleapis.com/css?family=Abril+Fatface|Goudy+Bookletter+1911' rel='stylesheet' type='text/css'>

h1 {
	font-family: 'Abril Fatface', cursive;
	font-size: 60px;
	line-height: 1.5;
}

p {
	font-family: 'Goudy Bookletter 1911', serif;
	font-size: 21px;
	line-height: 1.6;
}

Vill du se hur typsnitten ser ut live i din webbläsare, kan du göra det på följande demosida.