Add Me!Close Menu Navigation
Add Me!Categorías abiertas del menú

10 buenas combinaciones de tipografías de Google Fonts

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;
}

Posts Relacionados: 3 plugins SEO para WP que deberías conocer | 30 sitios donde descargar imágenes gratuitas | Formas de perder el tiempo posicionando webs | Qué hacer si Google te ha penalizado en su ‘last update’ | Menú de subnavegación (CSS+JQuery) | NounProject: Gran colección de iconos vectoriales | Reveal: Ventanas modales con jQuery | Contactable: Formularios accesibles con jQuery | jQuery: 10 snippets útiles que deberías conocer | Formulario en varios pasos usando jQuery |

1 comentario to “10 buenas combinaciones de tipografías de Google Fonts”

  1. [...] Combinaciones de fuentes con CSS y Google Fonts | Luis Cañada – BLOG [...]

Deja un comentario




Categorías