Site da fonte: coisas que você deve saber para usar hoje

Publicados: 2019-12-19

O site de fontes, também chamado de tipografia, trata de ajustar o texto dentro do design enquanto cria um conteúdo poderoso. Ele fornece uma aparência atraente e preserva o valor estético do seu conteúdo. Ele desempenha um papel vital na definição do tom geral do seu site e garante uma ótima experiência do usuário.

A maioria dos visitantes do site não se importa muito com os gráficos, eles apenas passam pelo conteúdo textual. Porque os textos são as principais fontes de informação. Portanto, ao criar um conteúdo para o seu site, você deve cuidar de equilibrar os gráficos e o texto. É aqui que o site de fontes entra em cena. Se você é um web designer, deve dar prioridade ao site de fontes.

Última atualização: Acabamos de lançar a versão 2.0 do Claue Multipurpose Magento 2 Theme com várias melhorias de desempenho e recursos exclusivos. Confira este tema agora: Claue Magento Theme 2. 0

claue2_edited (1)

Demonstração ao vivo

Claue – Clean, Minimal Magento 2&1 Theme é um excelente modelo para uma loja de comércio eletrônico moderna e limpa com mais de 40 layouts de página inicial e toneladas de opções para loja, blog, portfólio, layouts de localizador de lojas e outras páginas úteis. A versão 2.0 do Claue vem com vários recursos exclusivos, incluindo:

  • Sendo baseado no tema Luma.
  • Conheça todos os padrões do tema Magento
  • Melhoria significativa de desempenho
  • Compatível com a maioria das extensões de terceiros.
  • Totalmente compatível com Magento 2.4.x

Esta segunda versão avançada diferencia-se completamente da anterior. Assim, se você estiver usando o Claue versão 1 e quiser atualizar para o Claue versão 2, você só pode reconstruir um novo site em vez de atualizar da versão antiga. Agora, vamos voltar ao assunto principal.

Por que é tão importante?

Um meio de comunicação.

Um site pode estar relacionado a um negócio ou arte ou algum produto específico. Quando você visita um site, pode determinar facilmente que tipo de informação ele fornece. Isso se deve ao uso da tipografia.

A disposição dos conteúdos, as cores e fontes utilizadas e outros detalhes minuciosos proporcionam uma forma de comunicação entre o visitante e o proprietário do site.

Atrai os visitantes.

A abordagem básica de usar o site de fontes é selecionar a fonte correta. A fonte deve ser o mais limpa possível. Não deve ser muito pequeno e crummy. O uso de fontes fáceis de ler são fundamentais para a apresentação.

As fontes agregam valor ao seu texto. Ele ajuda os leitores a perceber as informações do texto. A escolha correta de cor, fonte e tamanho do texto pode ser vital para atrair seu público-alvo.

Ele transmite um certo humor ou sentimento.

Um conteúdo pode ser um anúncio de um jogo de computador. Pode conter alguns recursos interessantes do jogo. Nesse caso, você deve projetar o conteúdo que seja divertido, lúdico e glamoroso.

Se o seu conteúdo requer alguma seriedade, você deve escolher fontes simples, simples e profissionais. A escolha de tal tipo de letra determina como o conteúdo é entendido.

Ajuda a estabelecer uma hierarquia de informações.

Hierarquia de informação significa categorizar os textos dentro de um conteúdo de acordo com sua importância. Você pode usar diferentes tipos e tamanhos de fontes para diferenciar os textos mais importantes.

Você pode destacar os tópicos importantes usando tamanhos de fonte maiores. Isso ajudará o público a determinar facilmente as informações às quais eles devem prestar mais atenção.

Ajuda a criar harmonia

Se você projetar uma tipografia e repetir o mesmo padrão em toda a sua apresentação, isso cria uma harmonia. A harmonia é o principal recurso no design de tipografia.

O design harmônico fornece um efeito artístico ao seu site. Usar a mesma fonte para conteúdos semelhantes fornece continuidade. O alinhamento das fontes com a proporção correta organiza sua apresentação e a deixa organizada.

Refletindo profissionalismo.

A adição correta da fonte do site em um projeto de design reflete grande profissionalismo. O uso adequado da fonte e do tamanho do texto ganha a confiança dos clientes. Isso adicionará benefícios ao marketing do seu produto se seu site for baseado em negócios.

A abordagem profissional do design inclui a tipografia em seu núcleo. O site de fontes define a importância do conteúdo que você fornece e o cliente se sente seguro em relação às informações que obtém.

Ele cria e constrói reconhecimento.

Se você seguir um padrão de uso de fontes e apresentar seu site com algum ritmo, isso agregará um grande valor à marca da sua empresa. O público sempre se lembra das fontes que você usa na apresentação do visual.

A tipografia especializa sua empresa e funciona como uma identificação para os telespectadores. Com a ajuda da tipografia cada um dos seus conteúdos ganha a presença da sua empresa.

Aqui estão algumas coisas que você deve considerar ao escolher a fonte ideal para o seu site.

Comece do básico

Quando se trata de site de fontes, há tantas coisas para analisar, e isso pode se tornar realmente esmagador muito rápido. É por isso que é melhor começar do básico antes de ir mais longe.

Se você optar por Serif ou Sans: esta é uma das classificações de categorias de fontes elementares. Com base no alfabeto romano, as fontes serifadas são caracterizadas por um traço decorativo localizado no final dos traços verticais e horizontais das letras.

Algumas das fontes serif mais famosas incluem Times New Roman e Georgia . A fonte Times New Roman , em particular, se enquadra na categoria de fontes clássicas seguras para a Web . No geral, você não pode errar ao escolher tipos de fonte padrão como este, pois geralmente são fáceis de ler e existem há muito tempo, então muitos usuários da Internet estão acostumados a eles. Ainda assim, se você preferir tentar uma abordagem mais ousada, recomendamos verificar fontes como Noe Display, Freight Text ou a coleção Portrait . Claro, sempre há fontes com serifa do Google que você pode usar gratuitamente, como Playfair Display , Cormorant Garamond ou Crimson Text , para citar alguns.

fonte do site

Tema com site de fontes Playfair Display

fonte do site

Tema com site de fontes Cormorant Garamond

As fontes sans não têm serifas nas letras (a palavra “sans” significa “sem” em francês), e são conhecidas por terem um design mais moderno e limpo em comparação com suas contrapartes com serifa. Helvetica, Tahoma, Verdana, Futura e Arial são exemplos de fontes sans serif amplamente utilizadas. Quanto às fontes gratuitas, sugerimos experimentar o seguinte para a biblioteca de fontes gratuitas do Google Fonts: Roboto, Source Sans Pro, Poppins, Heebo ou Montserrat.

fonte do site

Tema com site de fontes Poppins

fonte do site

Tema Quart com o site da fonte Heebo

O tipo que você escolherá depende muito do seu público-alvo e do humor que você deseja evocar com o design da fonte. Geralmente, as fontes serifadas são usadas com a intenção de trazer um tom mais formal e elegante . Embora eles também possam ser usados ​​para dar uma aparência alternativa à sua página da web, e muitas vezes podem ser encontrados em revistas e na indústria da moda.

As fontes Sans , por outro lado, geralmente simbolizam minimalismo, simplicidade e franqueza . No entanto, uma das grandes características das fontes sem serifa é que elas são altamente flexíveis . Por exemplo, se combinado com um tipo de letra de estilo antigo, um sem serifa pode assumir suas qualidades, emitindo uma vibração mais tradicional.

  • Kerning, lead e tracking: esses três elementos de design podem ser vitais ao descobrir a aparência do seu tipo de letra. Esses métodos têm o objetivo de modificar o espaço entre as letras para obter uma fonte visualmente agradável e de fácil leitura. Kerning representa o espaço entre duas letras, entrelinhas representa o espaço entre as linhas de texto e rastreamento (ou espaçamento entre letras) é o espaçamento entre grupos de letras.
  • Contraste: no design de sites de fontes, o contraste é usado para enfatizar diferentes partes do texto de várias maneiras , todas com o objetivo de destacar mais as partes importantes. Diferentes tipos de contraste incluem tamanho, peso (fazendo com que certas partes do texto apareçam em negrito), cor, forma (por exemplo, letras maiúsculas ou minúsculas) e estrutura (diferentes formas misturadas com diferentes tipos de letra).
  • Alinhamento: descobrir como o texto será colocado na página também é um elemento que pode contribuir muito para o design da sua fonte. Você pode alinhar seu texto à esquerda, à direita ou ao centro . Além disso, você pode escolher se deseja que o texto fique irregular à direita ou justificado.

Ao alinhar seu texto, você também deve prestar atenção ao Comprimento da Linha (a distância entre o lado esquerdo e direito do bloco de texto). A maneira mais eficaz de medir o comprimento da linha é pela média de caracteres por linha. O comprimento ideal da linha é de 45 a 80 caracteres , incluindo espaços.

As escolhas do seu site de fontes devem refletir o propósito do seu design

Existem tantos tipos diferentes na web para escolher, e suas opções de fonte são praticamente ilimitadas. Embora isso seja bom por si só, pode facilmente complicar demais as coisas se você não tiver pelo menos alguma ideia do que deseja (ou não deseja). É por isso que é importante considerar cuidadosamente o objetivo do seu web design, bem como o tipo de público que você deseja atrair . Em seguida, veja se o estilo do tipo de letra que você está considerando corresponde à mensagem geral que você deseja transmitir aos visitantes.

fonte do site

Burst Theme com o site da fonte Lato

Depois de descobrir esses princípios básicos, aqui estão algumas perguntas adicionais a serem feitas ao escolher o design do seu site de fonte:

  • Qual é a natureza da sua marca? Por exemplo, é sério ou descontraído?
  • Se o seu site gira em torno de um projeto, que tipo de projeto é? É de curto ou longo prazo?
  • Você deseja buscar praticidade e funcionalidade e optar por uma das fontes seguras para a Web ou deseja se destacar do resto e experimentar uma opção de fonte mais exclusiva?
  • Seu site será mais orientado visualmente (gráficos como fotos, animações e vídeos) ou consistirá principalmente em grandes porções de texto que fornecem muitas informações sobre sua marca ou produtos?

Fazer essas perguntas a si mesmo deve pelo menos ajudá-lo a ter uma ideia geral do que você quer, então quando você se deparar com uma fonte, decidir se ela funciona para você ou não será pelo menos um pouco mais fácil.

Escolha o número de tipos de letra e classifique-os por importância

No site de fontes, muito de uma coisa boa pode facilmente se tornar ruim. Ao escolher o número de tipos de letra para o seu site, nossa sugestão é apontar para não mais do que três fontes diferentes . Permita-nos elaborar sobre isso com mais detalhes.

  • Fonte primária: como esta será a fonte mais visível em sua página, sua fonte primária deve ser mais sinônimo da identidade da sua marca . As fontes primárias são usadas principalmente para texto maior, como títulos.

fonte do site

Tema Capri com site da fonte Montserrat

Se possível, certifique-se de que o logotipo da sua marca também contenha dicas de sua fonte principal. Você pode optar por tipos de fonte mais ousados ​​ao escolher sua fonte principal, embora, no final das contas, tudo dependa da sua marca. Sugerimos pesquisar fontes como Voga, Ikaros ou Qontra.

  • Fonte secundária: você deve usar esta fonte para sua cópia do corpo . Isso significa que qualquer artigo ou descrição em sua página estará em sua fonte secundária. Acima de tudo, sua fonte secundária deve ser limpa e fácil de ler . Tipos de fonte como Futura, Roboto ou Verdana podem ser uma escolha de fonte sólida para o seu texto.
  • Fonte terciária (acento): se você nos perguntar, esta é totalmente opcional . As fontes de destaque podem ser usadas para elementos específicos do site, como uma frase de chamariz ou um menu de navegação. Eles devem ser proeminentes o suficiente para chamar a atenção de seus visitantes rapidamente.

Com tudo isso dito, cada marca tem seus próprios requisitos, então nada está realmente definido. Apenas lembre-se de que quanto mais fontes você tiver, mais difícil será harmonizá-las . Portanto, se possível, tente manter o número da fonte no mínimo, a menos que seja absolutamente necessário fazer o contrário.

Fique atento aos tempos de carregamento

Nos dias de hoje, ninguém tem tempo nem paciência para sites lentos. É por isso que, se uma fonte demorar muito para carregar, pode não ser a melhor solução para você. Aqui estão algumas coisas que você pode fazer para evitar que uma fonte diminua a velocidade do seu site.

  • Atenha-se a um número limitado de tipos de letra . Já mencionamos por que ter muitas fontes pode não ser a melhor ideia. A velocidade de carregamento é outra razão pela qual você não deve exagerar com o número da sua fonte.
  • Escolha apenas os estilos que você precisa. Dessa forma, o tamanho do seu site de fontes será mínimo e menos tamanho equivale a menos tempo de carregamento. Por exemplo, ao baixar uma fonte, escolha apenas o estilo normal e negrito.
  • Não baixe os idiomas que você não usará. Se você precisar apenas de um ou alguns idiomas diferentes para uma fonte específica, certifique-se de desmarcar aqueles que você tem certeza de que não precisará ao fazer o download.

Pense nas combinações de fontes

Há várias coisas a serem consideradas ao emparelhar fontes diferentes. Afinal, cada fonte tem seu próprio caráter distinto – algumas fontes parecem mais sérias, algumas parecem mais refinadas, enquanto outras têm uma sensação mais peculiar e espontânea.

Misturar dois sites de fontes com diferentes “humores” pode realmente funcionar – eles dizem que os opostos se atraem, e essa regra também se aplica aos tipos de letra. Tente combinar tipos de fonte sem corte com os mais neutros e suaves. O primeiro deve ser usado para títulos, enquanto o último funciona melhor para o corpo do texto.

Outra boa combinação com a qual você raramente pode errar é misturar serifas e sans serifs . O emparelhamento de fontes tem tudo a ver com criar contraste, e serifas e sans serifs são mais do que suficientes para criar uma diferença sutil, mas distinta, quando combinadas.

Caso você ainda não tenha certeza de quais fontes combinar, você sempre pode escolher uma rota segura e usar duas fontes que compartilhem a mesma família de fontes. Como eles são feitos para irem juntos em primeiro lugar. Além disso, emparelhar fontes da mesma família de fontes pode ajudá-lo a trazer uma sensação de consistência, facilitando muito o processo de criação de um site. Você pode criar contraste entre as mesmas famílias de fontes alterando itens como tamanho, maiúsculas e minúsculas ou peso, misturando regulares com itálico e assim por diante.

Se você precisar de ajuda com o emparelhamento de fontes, existem várias ótimas ferramentas on-line que podem ajudá-lo, como o fontpair.

Na verdade, o site de fontes representa cerca de 90% do conteúdo do site . Assim, a importância do site de fontes não deve ser menosprezada, pois pode influenciar diretamente na experiência do usuário e, como tal, pode fazer ou quebrar seu site. Para garantir que seu site seja legível o suficiente para o conforto total de leitura de seus usuários, sempre teste como suas fontes aparecem em diferentes dispositivos e tamanhos de tela .

Ao descobrir qual design de fonte funciona melhor para você, tente pensar primeiro no propósito do seu design. Depois de determinar a direção geral em que você deseja ir, escolha o número de tipos de letra que deseja ter e comece a navegar na Web para possíveis combinações de fontes. Há muitas opções disponíveis, então você certamente encontrará algo que funcione bem para você.