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 Fonts. Google 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>
</html>
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.