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

niconne-crimson
<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

Exo Droid Sans Webfont
<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

Arvo & PT Sans Webfont
<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

Bree Serif & Open Sans Webfont
<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

Ubuntu & Vollkorn Webfont
<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

Josefin Sans & Lora Webfont
<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

Pacifico & Arimo Webfont
<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

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

Dancing Script & Josefin Sans Webfont
<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

Nixie & Open Sans Webfont
<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

Abril Fatface & Goudy Bookletter 1911 Webfont
<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.

There are no comments yet