10+ snygga Google Webbtypsnitt som matchar

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

Det är fantastiskt för oss webbdesigners men med så många typsnitt att välja på är det inte alltid helt enkelt att hitta de som passar bäst. Vi tänkte hjälpa till med det och 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;
}

Med denna lista hoppas vi du hitta inspiration och göra webben lite snyggare.
Vill du se hur typsnitten ser ut live i di webbläsare så kan du göra det på följande demosida