Excelentes pares de fontes CSS

Índice

Mostrar índice

Ótimas combinações de fontes são essenciais para um ótimo design.

Regras de emparelhamento de fontes

Aqui estão algumas regras básicas para criar ótimos pares de fontes:

1. Complemento

É sempre seguro encontrar pares de fontes que se complementem.

Uma ótima combinação de fontes deve harmonizar, sem ser muito parecida ou muito diferente.

2. Use superfamílias de fontes

Uma superfamília de fontes é um conjunto de fontes projetadas para funcionar bem juntas. Portanto, usar fontes diferentes dentro da mesma superfamília é seguro.

Por exemplo, a superfamília Lucida contém as seguintes fontes: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif e Lucida Math.

3. O contraste é rei

Duas fontes muito semelhantes geralmente entrarão em conflito. No entanto, os contrastes, feitos da maneira certa, traz à tona o que há de melhor em cada fonte.

Exemplo: Combinar serif com sans serif é uma combinação bem conhecida.

Uma superfamília forte inclui variações com e sem serifa da mesma fonte (por exemplo, Lucida e Lucida Sans).

4. Escolha apenas um chefe

Uma fonte deve ser a chefe. Isso estabelece uma hierarquia para as fontes em sua página. Isto pode ser conseguido variando o tamanho, peso e cor.

Exemplo

Sem dúvida, "Geórgia" é quem manda aqui:

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

Experimente você mesmo →

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

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}
</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>

Abaixo, mostramos alguns pares de fontes populares que se adequam a muitas marcas e contextos.

Fontes `Georgia` e `Verdana`

As fontes Georgia e Verdana são uma combinação clássica. Ele também segue os padrões de fontes seguras da web:

Exemplo

Use a fonte “Georgia” para títulos e “Verdana” para texto:

Beautiful Norway

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.

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.

Experimente você mesmo →

<!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>

Helvética e Garamond

Helvetica e Garamond é outra combinação clássica que usa fontes seguras para web:

Exemplo

Use a fonte “Helvetica” para títulos e “Garamond” para texto:

Beautiful Norway

Experimente você mesmo →

<!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>

Pares populares de fontes do Google

Se não quiser usar fontes padrão em HTML, você pode usar o Google Fonts.

O Google Fonts é de uso gratuito e tem mais de 1.000 fontes para você escolher.

Abaixo estão alguns pares populares de fontes da Web do Google.

Merriweather e Open Sans

Exemplo

Use a fonte “Merriweather” para títulos e “Open Sans” para texto:

Beautiful Norway

Experimente você mesmo →

<!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 e Lora

Exemplo

Use a fonte “Ubuntu” para títulos e “Lora” para texto:

Beautiful Norway

Experimente você mesmo →

<!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 e Poppins

Exemplo

Use a fonte “Abril Fatface” para títulos e “Poppins” para texto:

Beautiful Norway

Experimente você mesmo →

<!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 e Fauna Um

Exemplo

Use a fonte “Cinzel” para títulos e “Fauna One” para texto:

Beautiful Norway

Experimente você mesmo →

<!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>
<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>

Fjalla One e Libre Baskerville

Exemplo

Use a fonte “Fjalla One” para títulos e “Libre Baskerville” para texto:

Beautiful Norway

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<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>
</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>

Espaço Mono e Muli

Exemplo

Use a fonte “Space Mono” para títulos e “Muli” para texto:

Beautiful Norway

Experimente você mesmo →

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

h1 {
  font-family: "Space Mono", monospace;
  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>

Espectral e Rubik

Exemplo

Use a fonte “Spectral” para títulos e “Rubik” para texto:

Beautiful Norway

Experimente você mesmo →

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

h1 {
  font-family: Spectral, 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>

Oswald e Noto Sans

Exemplo

Use a fonte “Oswald” para títulos e “Noto Sans” para texto:

Beautiful Norway

Experimente você mesmo →

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

h1 {
  font-family: Oswald, 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>

Para obter uma lista de todas as fontes gratuitas do Google, visite nosso tutorial Como fazer - Google Fonts.

Excelentes pares de fontes CSS

Índice

Regras de emparelhamento de fontes

1. Complemento

2. Use superfamílias de fontes

3. O contraste é rei

4. Escolha apenas um chefe

Exemplo

Fontes Georgia e Verdana

Exemplo

Beautiful Norway

Helvética e Garamond

Exemplo

Beautiful Norway

Pares populares de fontes do Google

Merriweather e Open Sans

Exemplo

Beautiful Norway

Ubuntu e Lora

Exemplo

Beautiful Norway

Abril Fatface e Poppins

Exemplo

Beautiful Norway

Cinzel e Fauna Um

Exemplo

Beautiful Norway

Fjalla One e Libre Baskerville

Exemplo

Beautiful Norway

Espaço Mono e Muli

Exemplo

Beautiful Norway

Espectral e Rubik

Exemplo

Beautiful Norway

Oswald e Noto Sans

Exemplo

Beautiful Norway

Fontes `Georgia` e `Verdana`