Grandes combinaciones de fuentes CSS

Las grandes combinaciones de fuentes son esenciales para un gran diseño.

Reglas de emparejamiento de fuentes

Aquí hay algunas reglas básicas para crear excelentes combinaciones de fuentes:

1. Complementarse

Siempre es seguro encontrar combinaciones de fuentes que se complementen entre sí. Una gran combinación de fuentes debe armonizar, sin ser demasiado similar o demasiado diferente.

2. Usar superfamilias de fuentes

Una superfamilia de fuentes es un conjunto de fuentes diseñadas para funcionar bien juntas. Por lo tanto, usar diferentes fuentes dentro de la misma superfamilia es seguro.

Por ejemplo, la superfamilia Lucida contiene las siguientes fuentes: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif y Lucida Math.

3. El contraste es el rey

Dos fuentes que son demasiado similares a menudo entran en conflicto. Sin embargo, los contrastes, hechos de la manera correcta, sacan lo mejor de cada fuente. Ejemplo: Combinar serif con sans serif es una combinación bien conocida. Una superfamilia fuerte incluye variaciones serif y sans serif de la misma fuente (por ejemplo, Lucida y Lucida Sans).

4. Elige un sólo jefe

Una fuente debe ser el jefe. Esto establece una jerarquía para las fuentes en su página. Esto se puede lograr variando el tamaño, el peso y el color.

Ejm

body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray; 
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}

A continuación, mostramos algunas combinaciones de fuentes populares que se adaptarán a muchas marcas y contextos.

Georgia y Verdana

Georgia y Verdana es una combinación clásica. También cumple con los estándares de fuentes seguras para la web:

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 16px;
}

h1 {
font-family: Georgia, serif;
font-size: 46px; 
}
</style>
</head>
<body>

<h1>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population
of 5,438,657 (December 2020). Norway is bordered by Sweden,
Finland and Russia to the north-east, and the Skagerrak to the south,
with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. 
Oslo, the capital, is a city of green spaces and museums. 
Bergen, with colorful wooden houses, is the starting point for cruises to
the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

Helvetica y Garamond

Helvetica y Garamond son otra combinación clásica que usa fuentes web seguras.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
font-size: 16px; 
}

h1 {
font-family: Helvetica, sans-serif;
font-size: 46px; 
}
</style>
</head>
<body>

<h1>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population
of 5,438,657 (December 2020). Norway is bordered by Sweden, 
Finland and Russia to the north-east, and the Skagerrak to the south,
with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords.
Oslo, the capital, is a city of green spaces and museums. 
Bergen, with colorful wooden houses, is the starting point 
for cruises to the dramatic Sognefjord. Norway is also known for 
fishing, hiking and skiing.</p>

</body>
</html>

Emparejamientos populares de fuentes de Google

Si no deseas utilizar fuentes estándar en HTML, puedes utilizar Google FontsGoogle Fonts es de uso gratuito y tiene más de 1000 fuentes para elegir. A continuación se muestran algunos emparejamientos populares de fuentes web de Google.

Merriweather y Open Sans

Use la fuente Merriweather para los encabezados y Open Sans para el texto:

Ejm

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans">
<style>
body {
font-family: "Open Sans", sans-serif;
font-size: 16px;
}

h1 {
font-family: Merriweather, serif;
font-size: 46px;
}
</style>
</head>
<body>

<h1>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population 
of 5,438,657 (December 2020). Norway is bordered by Sweden, 
Finland and Russia to the north-east, and the Skagerrak to the 
south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. 
Oslo, the capital, is a city of green spaces and museums. 
Bergen, with colorful wooden houses, is the starting point 
for cruises to the dramatic Sognefjord. Norway is also known 
for fishing, hiking and skiing.</p>

</body>
</html>

Ubuntu y Lora

Usa Ubuntu para los encabezados y Lora para el texto

Ejm

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
<style>
body {
font-family: Lora, serif;
font-size: 16px; 
}

h1 {
font-family: Ubuntu, sans-serif;
font-size: 46px; 
}
</style>
</head>
<body>

<h1>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a 
population of 5,438,657 (December 2020). Norway is bordered by Sweden, 
Finland and Russia to the north-east, and the Skagerrak to the south, 
with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. 
Oslo, the capital, is a city of green spaces and museums. 
Bergen, with colorful wooden houses, is the starting point for 
cruises to the dramatic Sognefjord. Norway is also known 
for fishing, hiking and skiing.</p>

</body>
</html>

Abril Fatface y Poppins

Utilice la fuente Abril Fatface para los encabezados y Poppins para el texto.

Ejm

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins">
<style>
body {
font-family: Poppins, sans-serif;
font-size: 16px; 
}

h1 {
font-family: 'Abril Fatface', serif;
font-size: 46px; 
}
</style>
</head>
<body>

<h1>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population
of 5,438,657 (December 2020). Norway is bordered by Sweden, 
Finland and Russia to the north-east, and the Skagerrak to the south, 
with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. 
Oslo, the capital, is a city of green spaces and museums. 
Bergen, with colorful wooden houses, is the starting point for 
cruises to the dramatic Sognefjord. Norway is also known for fishing, 
hiking and skiing.</p>

</body>
</html>

Cinzel y Fauna One

Usa la fuente Cinzel para encabezados y Fauna One para texto

Ejm

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel|Fauna+One">
<style>
body {
font-family: 'Fauna One', serif;
font-size: 16px; 
}

h1 {
font-family: Cinzel, serif;
font-size: 46px; 
}
</style>
</head>

Fjalla One y Libre Baskerville

Utiliza Fjalla One para encabezados y Libre Baskerville para texto.

Ejm

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville">
<style>
body {
font-family: 'Libre Baskerville', serif;
font-size: 16px; 
}

h1 {
font-family: 'Fjalla One', sans-serif;
font-size: 46px; 
}
</style>

Space Mono y Muli

Utiliza Space Mono para encabezados y Muli para el texto.

Spectral y Rubik

Utiliza Spectral para los encabezados y Rubik para el texto.

Oswald y Noto Sans

Utiliza Oswald para los encabezados y Noto Sans para el texto.