A continuación vamos a ver algunas combinaciones de tipografías de la API de Google que combinan realmente bien y podrás utilizar en tus proyectos. Únicamente deberás limitarte a hacer un copy&paste del código que verás. Totalmente gratuito y sin necesidad de descargas adicionales. Mola eh? 
Recomendaciones para la combinación de fuentes
Antes de comenzar me gustaría dejarte una serie de recomendaciones:
Usa familias de fuentes
Siempre que sea posible, utiliza fuentes de la misma familia. Estas fuentes han sido diseñadas para trabajar conjuntamente, siendo así la manera más segura de no crear discordancias visuales.
Fíjate en el contraste
Cuando estés combinando 2 fuentes, fíjate en el contraste. Intenta combinar una fuente bold (o negrita) con otra más suave (light). Mezclar 2 tipografías similares no creará un buen efecto visual. Deja claro que estás mostrando 2 estilos diferentes en tu site.
Sé simple
Limítate a utilizar pocas fuentes distinatas. Si puedes hacerlo con 2, mejor que con 3. El hacer uso de demasiadas tipografías hacen que el diseño sea poco coherente.
Combinaciones de fuentes
Lobster & Cabin
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Lobster', Georgia, Times, serif;
font-size: 70px;
line-height: 100px;
}
p {
font-family: 'Cabin', Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 25px;
} |
Raleway & Goudy Bookletter 1911
<link href='http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 50px;
line-height: 70px;
}
p {
font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
font-size: 15px;
line-height: 25px;
} |
Allerta & Crimson Text
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Allerta', Helvetica, Arial, sans-serif;
font-size: 50px;
line-height: 55px;
}
p {
font-family: 'Crimson Text', Georgia, Times, serif;
font-size: 16px;
line-height: 25px;
} |
Arvo & PT Sans
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Arvo', Georgia, Times, serif;
font-size: 59px;
line-height: 70px;
}
p {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 25px;
} |
Dancing Script & Josefin Sans
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Dancing Script', Georgia, Times, serif;
font-size: 59px;
line-height: 60px;
}
p {
font-family: 'Josefin Sans', Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 25px;
margin-top: 15px;
} |
Allan & Cardo
<link href='http://fonts.googleapis.com/css?family=Allan:bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Allan', Helvetica, Arial, sans-serif;
font-size: 70px;
line-height: 75px;
}
p {
font-family: 'Cardo', Georgia, Times, serif;
font-size: 18px;
line-height: 25px;
} |
Molengo & Lekton
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Molengo', Georgia, Times, serif;
font-size: 56px;
line-height: 80px;
}
p {
font-family: 'Lekton', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 25px;
} |
Droid Serif & Droid Sans
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Droid Serif', Georgia, Times, serif;
font-size: 49px;
line-height: 65px;
}
p {
font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 25px;
} |
Corbin & Nobile
<link href='http://fonts.googleapis.com/css?family=Corben:bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Nobile' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Corben', Georgia, Times, serif;
font-size: 40px;
line-height: 55px;
}
p {
font-family: 'Nobile', Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 25px;
} |
Ubuntu & Vollkorn
<link href='http://fonts.googleapis.com/css?family=Ubuntu:bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'> |
h1 {
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
font-size: 50px;
line-height: 65px;
}
p {
font-family: 'Vollkorn', Georgia, Times, serif;
font-size: 16px;
line-height: 25px;
} |
Close Menu Navigation
Categorías abiertas del menú
[...] Combinaciones de fuentes con CSS y Google Fonts | Luis Cañada – BLOG [...]