Excelentes Pareamentos de Fontes CSS
Ótimos pares de fontes são essenciais para um ótimo design.
Regras de pareamento 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 complementam.
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 que são muito semelhantes geralmente entram em conflito. No entanto, os contrastes, feitos da maneira certa, trazem o melhor de cada fonte.
Exemplo: Combinar serifa com sans serif é uma combinação bem conhecida.
Uma superfamília forte inclui variações com serifa e sem serifa da mesma fonte (por exemplo, Lucida e Lucida Sans).
4. Escolha apenas um chefe
Uma fonte deve ser o 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, "Georgia" é o chefe 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;
}
Abaixo, mostramos alguns pares de fontes populares que se adequam a muitas marcas e contextos.
Geórgia e Verdana
Georgia e Verdana é 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.
Helvética e Garamond
Helvetica e Garamond é outra combinação clássica que usa fontes seguras para a web:
Exemplo
Use a fonte "Helvetica" para títulos e "Garamond" 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.
Emparelhamentos de fontes populares do Google
Se você não quiser usar fontes padrão em HTML, poderá usar o Google Fonts.
As fontes do Google são gratuitas e têm mais de 1.000 fontes para 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
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.
Ubuntu e Lora
Exemplo
Use a fonte "Ubuntu" para títulos e "Lora" 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.
Abril Fatface e Poppins
Exemplo
Use a fonte "Abril Fatface" para títulos e "Poppins" 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.
Cinzel e Fauna Um
Exemplo
Use a fonte "Cinzel" para títulos e "Fauna One" 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.
Mountain One e Libre Baskerville
Exemplo
Use a fonte "Fjalla One" para títulos e "Libre Baskerville" 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.
Espaço Mono e Muli
Exemplo
Use a fonte "Space Mono" para títulos e "Muli" 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.
Espectral e Rubik
Exemplo
Use a fonte "Spectral" para títulos e "Rubik" 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.
Oswald e Noto Sans
Exemplo
Use a fonte "Oswald" para títulos e "Noto Sans" 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.
Para obter uma lista de todas as fontes gratuitas do Google, visite nosso tutorial How To - Google Fonts .