Como emparelhar fontes | Explicado

Tornando o design do site requintadamente agradável, mantendo -o absolutamente profissional, é muito importante no desenvolvimento do site. Usar as fontes corretas e os pares de fontes certos ajudam a manter a consistência de um design de site e aprimorar a experiência do usuário. Deixa um bom impacto no usuário, o que é bom para o seu negócio. CSS permite que você use vários pares de fontes. Este artigo discute o seguinte:

1. Diretrizes sobre emparelhar fontes
2. Alguns ótimos combinações de fontes

Vamos começar.

Diretrizes sobre emparelhar fontes

Ao combinar fontes, existem algumas diretrizes que devem ser cuidadas. Aqui estamos anotados algumas dicas sobre emparelhar fontes.

1. Evite conflito visual
   O conflito visual ocorre quando você usa pares de fontes que não se complementam. Para evitar esse conflito visual, escolha um emparelhamento de fonte que seja diverso, mas combina bem.
2. Par de superfamílias de fontes
   Usar pares de fontes de dentro de uma superfamília de fonte pode ser uma escolha muito boa. Considere apenas os pares de fontes que se complementam, mas não parecem muito semelhantes. Você pode comparar pares de fontes de dentro de uma superfamília de fonte com base em serif vs. sem serif, grosso vs. fino ou condensado vs. estendido.
3. Manter contraste
   Manter o contraste é absolutamente necessário ao combinar fontes. O contraste ajuda a manter um equilíbrio em seu emparelhamento de fonte de uma maneira que duas fontes da mesma superfamília se harmonizam, mas parecem muito diferentes. Usar um sem.
4. Use menos de três fontes
   Para tornar visualmente agradável o design do seu site, o uso de apenas duas fontes seria mais do que suficiente (um para o cabeçalho e o outro para o texto do corpo). Vá para o terceiro somente quando necessário.

Agora que entendemos algumas regras básicas de emparelhamento de fontes, vamos passar por algumas boas opções de emparelhamento de fontes.

Alguns ótimos combinações de fontes

Existem vários repositórios de onde você pode obter inúmeras fontes incríveis, como fontes do Google, fontes Adobe, fontes.com, e muito mais. Mantendo as regras acima em mente, você pode criar um bom emparelhamento de fonte de sua escolha.

Aqui listamos algumas boas opções de emparelhamento de fontes para você!

Verdana e Geórgia

Verdana apresenta caracteres ousados ​​e largos, tornando -o apropriado para o texto do cabeçalho enquanto isso, os golpes finos e serifs espessados ​​da Geórgia o tornam uma escolha perfeita para o texto do corpo.

Exemplo
Neste exemplo, Verdana está sendo usado para o título e a Geórgia está sendo usada para o parágrafo.

H1
Fonte-família: Verdana, sem serrif;
Size de fonte: 28px;

P
Font-Family: Georgia, Serif;
Size da fonte: 16px;

Saída

Uma combinação de Verdana e Geórgia está sendo usada.

Lagosta e cabine

A combinação de lagosta e cabine funciona perfeitamente bem. Essas duas fontes se complementam de uma maneira que a lagosta é ousada e atraente enquanto a cabine é clara e simples.

Exemplo
No exemplo abaixo mencionado, a lagosta está sendo usada para o cabeçalho e a cabine está sendo para o parágrafo.

H1
Fonte-família: lagosta, serif;
Size de fonte: 28px;

P
Fonte-família: Cabin, sem serrif;
Size da fonte: 16px;

Saída

Uma combinação de fontes de lagosta e cabine está sendo usada.

Helvetica e Geórgia

Helvetica é uma escolha muito popular quando se trata de nomes de marcas por causa de sua aparência arrumada, ousada e moderna, e a Geórgia é uma excelente opção para o texto do corpo devido aos movimentos finos de seus personagens.

Exemplo
Este exemplo usa a fonte Helvetica para o cabeçalho e a fonte da Geórgia para o parágrafo.

H1
Fonte-família: Helvetica, sem serrif;
Size de fonte: 28px;

P
Font-Family: Georgia, Serif;
Size da fonte: 16px;

Saída

Uma combinação de Helvetica e Geórgia está sendo usada.

Cinzel e Fauna

Cinzel e Fauna One são fontes do Google. Cinzel se inspira nas inscrições romanas e tem um estilo contemporâneo. Por outro lado, a fauna tem um toque moderno com uma estrutura macia e condensada.

Exemplo
Neste exemplo, Cinzel é usado para o título, e a fauna é usada para o parágrafo.

Saída

Uma combinação de fontes de Cinzel e Fauna One está sendo usada.

Josefin Slab e Josefin Sans

Josefin Slab tem um estilo de máquina de escrever que combina perfeitamente com o estilo vintage Josefin Sans. Para títulos, a laje Josefin é usada para os parágrafos Josefin Sans é usada.

Exemplo
Este exemplo usa a laje Josefin para títulos e Josefin Sans para parágrafos.

Saída

Uma combinação de Josefin Slab e Josefin Sans está sendo usada.

Estas são algumas amostras de pares de fontes. Usando as diretrizes mencionadas acima, você pode criar um emparelhamento de fonte e fazer um site fantástico!

Conclusão

Bons pares de fontes podem criar sites requintadamente agradáveis ​​que aprimoram a experiência do usuário e, portanto, são cruciais para a estrutura de um bom design da web. Existem algumas diretrizes que precisam ser seguidas ao combinar fontes como; evitando conflitos visuais, emparelhamento dentro de superfamílias de fontes, mantendo contraste e usando não mais de três fontes. Este artigo discute essas diretrizes e mostra alguns pares de fontes populares.