11 fontes de design da Web que darão uma cara nova ao seu site

Publicados: 2023-02-02

As fontes de design da Web parecem ser um pequeno aspecto do site da sua empresa, mas, na verdade, elas têm muito impacto nas conversões.

O que separa o “super” do comum? Como exclama um personagem de filme azul e cabeçudo: “Apresentação!”

Ao projetar uma página da Web, a aparência desempenha um papel importante no grande esquema das coisas. Digamos que você tenha uma peça interessante que seu público possa apreciar. Se a sua apresentação for meh ou absolutamente atroz, você pode simplesmente afastar esse público. Longe.

Felizmente, web design e desenvolvimento não precisam ser difíceis. Você precisa tornar sua página da web atraente e realmente atrair seu público. É assim que você cria uma experiência maravilhosa para seus usuários. Em particular, sua escolha de fonte pode influenciar se um leitor permanece ou sai de sua página da web.

Sinta-se à vontade para usar essas fontes para o design de sua página da Web e alcançar seu potencial máximo. Espero que você possa ter uma ideia geral de quais fontes escolher e por que elas são tão poderosas para alcance online.

Como escolher fontes de web design

Sua página da web tem uma aparência definida e única. A maneira como os textos são exibidos nesse visual é a chave para o seu sucesso. Tenha em mente, no entanto, que você pode melhorar esse sucesso com base nesses seis fatores:

Legibilidade e legibilidade
Consistência da marca
Humor e tom
Diretrizes de acessibilidade na web
Compatibilidade entre navegadores
Escalabilidade

1. Legibilidade e legibilidade

Legibilidade é a facilidade com que seus usuários podem distinguir os caracteres. Se o seu leitor tiver problemas para determinar se um caractere é “S” ou “5”, talvez seja necessário escolher uma fonte diferente. Algumas fontes fornecem formas diferentes para caracteres semelhantes (como “1”, “I” maiúsculo e “l” minúsculo) para distingui-los uns dos outros.

A legibilidade pode ser influenciada por outros fatores, como opções de cor de primeiro plano e de fundo, tamanho e espessura da fonte. Por exemplo, algumas letras podem ficar mais legíveis quando você aumenta o tamanho da fonte, mas é legível?

Nesse sentido, legibilidade é diferente de legibilidade.

A legibilidade é o quão confortável um leitor se sente com a leitura de blocos de texto. Esse nível de conforto também é influenciado pela legibilidade do seu texto. Se uma palavra for muito pequena para distinguir as letras umas das outras, a palavra pode não ser legível. Este também é o caso de um denso bloco de “letras miúdas” legais onde se pode ler o texto inteiro, mas não tão confortavelmente quanto eles gostariam.

2. Consistência da marca

Você precisa manter sua apresentação consistente. Embora a voz da sua marca forneça uma base sólida para a sua página da web, manter a mesma identidade estabelece o quão sério você é ao transmitir seu ponto de vista. Sua apresentação é toda voltada para contar uma história específica e você está convidando os clientes a se identificarem e reconhecerem essa história.

Encontre fontes que mantenham a narrativa no lugar. Se você está procurando um tom profissional, use fontes de aparência profissional. Para um conteúdo envolvente e amigável, use fontes que sejam confortáveis de se olhar. Você pode encontrar um que se encaixe na conta se procurar com atenção.

3. Humor e tom

A psicologia das fontes é o estudo de como as fontes afetam a maneira como seu público percebe seu conteúdo. Algumas fontes foram tradicionalmente usadas para fins específicos e as pessoas se acostumaram com isso. Outras fontes simplesmente evocam certos pensamentos e emoções de seus leitores. Em qualquer caso, você pode querer usar uma fonte que ajude a levar seu leitor ao clima que você deseja estabelecer.

Você pode brincar com as fontes para estabelecer esse clima. Algumas fontes, por exemplo, são mais eficazes para cabeçalhos do que para o corpo do texto. Misturar e combinar fontes pode até criar uma sensação mais dramática para o seu conteúdo e trazer emoções mais poderosas.

4. Diretrizes de acessibilidade na Web

Seu site deve ser inclusivo para todos os visitantes. Ele garante que aqueles que experimentam dificuldades ou limitações ainda sejam bem-vindos ao seu site da mesma maneira que todos os outros. Não é apenas uma ferramenta para gerar mais tráfego para o seu negócio, mas incentiva uma comunidade entre todos os seus consumidores.

Para fazer isso, os designers costumam usar diretrizes para melhorar a acessibilidade da Web em seus sites. Essas regras e diretrizes tornam o conteúdo mais amigável e fácil de entender para todos os visitantes. Embora não seja necessário neste momento, melhorar a acessibilidade na Web é uma boa maneira de estabelecer relacionamento com sua base de consumidores e mostrar a eles que você se importa e deseja que eles façam parte do que você está construindo. Os quatro principais padrões são:

Perceptível. Simplificando, seus consumidores devem entender seu conteúdo. Também não se limita apenas a “ver” o conteúdo. Lembre-se de que os usuários cegos ou com baixa visão usam um software de leitura de tela alternativo para ajudá-los a navegar na Internet. Considere esses usuários ao definir sua página da web.
Operável. Isso significa que todos os usuários podem acessar e operar todas as partes de sua página da web (texto, links, áudio, vídeo, outras mídias). Geralmente, a maioria dos sites operáveis são simples e, portanto, fáceis de navegar.
Compreensível. Seus usuários devem ser capazes de digerir todas as informações que você está dizendo. Você pode usar um idioma comum ou oferecer idiomas alternativos. Da mesma forma, a navegação do seu site deve ser organizada de forma intuitiva e natural para ajudar os usuários a entender você e seu produto.
Robusto. O conteúdo do seu site deve ser facilmente dividido e analisado por programas de assistência, como leitores de tela. Dessa forma, as pessoas com dificuldades ainda farão parte da experiência que seu site proporciona.

LEITURA RECOMENDADA: Conceitos de web design que priorizam o foco no cliente

5. Compatibilidade entre navegadores

Você deve considerar que alguns usuários simplesmente não querem usar navegadores populares como Chrome ou Mozilla (por um motivo ou outro). Em alguns casos, esses navegadores alternativos usam fontes substitutas, como Arial ou Times New Roman, para exibir seu texto. Use uma face de fonte que possa ser exibida corretamente pela maioria dos navegadores, se não todos.

Os quatro formatos de fonte suportados pelos sites são:

Tipo Aberto Incorporado (EOT). Compatível apenas com navegadores da Microsoft (Internet Explorer e Microsoft Edge)
Fonte True Type/Fonte Open Type (TTF/OTF). Fundados pela Apple e pela Microsoft na década de 1980, esses formatos são suportados por todos os principais navegadores, como Chrome, Firefox, Opera, Microsoft Edge e Internet Explorer.
Web Open Font Format (WOFF). Fundado pela Mozilla em 2009, este formato é uma versão compactada do TTF/OTF feito para carregar mais rápido
Formato de fonte aberta da Web (WOFF2). Uma revisão do WOFF anterior, seus principais players incluem Chrome, Firefox e Opera; ele foi projetado para substituir o WOFF e o fará eventualmente

Esteja ciente de que os formatos mais usados neste momento são TTF/OTF e WOFF. As fontes que usam esses formatos podem ser exibidas corretamente em todos os navegadores compatíveis.

6. Escalabilidade

Você já notou que algumas fontes parecem melhores e mais suaves do que outras? Esses tipos de fontes são chamados de fontes escalonáveis. Eles são programados para ter a mesma aparência, independentemente do tamanho do texto. Algumas fontes não são programadas da mesma maneira, e o texto resultante parece mais barato e de qualidade inferior.

Por que a escalabilidade é importante? É simples. Algumas pessoas, principalmente usuários mais velhos, simplesmente não conseguem ler textos menores. Eles precisam aumentar muito o zoom para poder ler o que você deseja que eles leiam. A escolha de uma fonte escalável enriquece a experiência deles com sua página da Web e também faz com que eles se sintam incluídos como parte de seu público.

Fontes populares de design da web

Agora que você cobriu o básico para escolher as melhores fontes para sua página da Web, aqui estão algumas fontes populares recomendadas por designers.

1. Abra o Sans

Open Sans é um tipo de fonte “sem frescuras”. É direto e direto ao ponto e não atrapalha sua mensagem. Open Sans também é surpreendentemente muito versátil. Parece formal, mas também recebeu uma “aparência neutra, mas amigável” de seu designer.

É escalável, o que significa que você pode lê-lo em tamanhos de texto pequenos e grandes. Ele também é otimizado para impressão, web e interfaces móveis.

Você pode ver por que o Open Sans é comumente usado online. Na verdade, mais de 84 milhões de sites o utilizam de uma forma ou de outra. Alguns desses sites incluem:

Upwork
vana
Atol Digital
Revista Ssense

2. Roboto

Roboto é outra fonte popular recomendada por designers. É uma fonte rígida e geométrica, ao mesmo tempo em que apresenta “curvas amigáveis e abertas”. As letras aparecem mais próximas umas das outras, tornando a leitura um pouco mais rítmica.

A família de fontes Roboto inclui Roboto Condensed e Roboto Slab, tornando toda a família Roboto flexível. É uma fonte que pode ser usada para praticamente qualquer coisa, desde títulos, cabeçalhos e texto simples. Em qualquer caso, parece profissional e amigável o suficiente para colocar em sua página da web.

Não é de admirar que mais de 630 milhões de sites, incluindo Google e YouTube, usem o Roboto religiosamente.

3. Lato

Lato foi originalmente projetada como uma fonte profissional para um site corporativo. Como o cliente foi em uma direção diferente, a fonte foi liberada para uso público. As letras parecem elegantes e elegantes, como uma carta manuscrita com tema rústico.

Também é agradável aos olhos, tornando Lato um sério candidato ao corpo do texto. Também é muito bom em tamanhos maiores, mantendo suas características únicas à medida que o texto aumenta.

Familiaridade e cordialidade também são grandes temas na fonte. Lato (verão em polonês) também foi projetado com a sensação de verão em mente. É rígido, mas não muito, emitindo um tom sério, mas reconfortante.

Um bom exemplo do uso de Lato pode ser encontrado em Bundl, um site de empreendimentos corporativos.

4. Helvética

Este é um clássico. Você pode ter ouvido falar deste, e recebeu muita recepção mista, dependendo de onde você pergunta. Independentemente disso, Helvetica continua sendo uma fonte sólida para páginas da web. É uma família de fontes muito flexível, e você pode tê-la em negrito, condensada ou apenas ter uma fonte comum para sua página da web.

A Helvetica foi originalmente projetada em 1957 para ser uma fonte neutra, para ser usada em qualquer lugar. Ele desempenhou esse papel com perfeição, estabelecendo-se rapidamente como uma das fontes mais populares da Internet. A fonte torna as palavras mais fáceis de ler à distância e também é perfeita para manchetes. Ele também permanece legível e legível, independentemente do tamanho da fonte do seu texto.

A Helvetica também está em constante evolução com o tempo devido à sua flexibilidade. Marcas em diferentes setores usam a Helvetica de uma forma ou de outra, a saber: BMW, Motorola, Nestlé, Microsoft e Apple. Autoridades governamentais como a NASA e a União Europeia também apresentam a Helvetica.

5. Próxima Nova

O ex-chefe de Design do Facebook, Cameron Moll, publicou um artigo sobre a história da Proxima Nova. Ele descreve a fonte como “incrivelmente versátil para interfaces digitais, funciona como um burro de carga em muitos tamanhos diferentes e tem uma aparência notável em telas retina”.

Proxima Nova é uma face de fonte que foi criada para capturar a redondeza de fontes como Futura e a geometria de fontes como Helvetica. No entanto, não é único a esse respeito, pois outras fontes também tentaram fazer o mesmo. Gotham era muito mais popular que Proxima Nova no início dos anos 2000. Moll argumenta que a disponibilidade inicial de Proxima Nova na web catapultou seu status como um tipo de letra icônico.

Desde então, tornou-se a fonte comercial mais popular online.

6. Montserrat

A fonte Montserrat foi inspirada no bairro brasileiro de mesmo nome. Ele tenta capturar a vibração da antiga tipografia de Buenos Aires e trazê-la para a mídia moderna. Por causa disso, Montserrat desperta nostalgia e familiaridade de seus espectadores. Ele define um tom sério, mas amigável, para todos os tipos de materiais promocionais.

Sua popularidade se deve à sua escalabilidade e, por sua vez, legibilidade. Assim, seu uso não se limita apenas à mídia online, mas também à mídia impressa, como folhetos e livros. O manual gráfico do governo mexicano também definiu a fonte como padrão para a mídia oficial.

7. Via férrea

Raleway é uma fonte estilosa de código aberto. Isso significa que seu uso é gratuito e pode realmente se destacar em qualquer design da web, principalmente em seu “W” exclusivo.

Os designers gostam de usar o Raleway por causa de sua acessibilidade e também porque combina bem com outras fontes. A fonte em si é legível e oferece um apelo de boas-vindas aos leitores. Você pode usar o Raleway para praticamente qualquer projeto adequado para um público amplo.

8. Fonte Sans Pro

Source Sans Pro é a primeira família de fontes de código aberto da Adobe. Ele é projetado para funcionar particularmente bem com interfaces de usuário. Suas formas arredondadas tornam as letras agradáveis aos olhos, maximizando os espaços entre cada caractere.

A qualidade mais notável do Source Sans Pro é sua legibilidade, e você pode facilmente distinguir entre personagens semelhantes em virtude de alguma escolha estilística de design. Em sua essência, o Source Sans Pro tem tudo a ver com acessibilidade. É fácil de ler e tem um tom profissional. A Universidade de Stanford e a Adobe usam a fonte em seus sites.

9. Poppins

Se você está procurando um tom sólido e sério para sua página da web, Poppins pode ser apenas para você. As letras parecem fortes e lineares e são tão diretas quanto você pode obter com uma fonte.

Como resultado, você não terá que se preocupar com a escalabilidade do seu texto. Também é muito elegante e simples. É uma escolha sólida para qualquer página da web.

O estúdio de animação Wonderlust está entre os 8,1 milhões de sites que usam a fonte.

10. Geórgia

Projetada pela Microsoft, Georgia é uma fonte que se destina a ser legível em formato digital. Parece elegante e legível, mesmo em telas de baixa resolução.

A sua elegância deve-se em grande parte ao seu design de inspiração romana. No entanto, isso não impede que os caracteres sejam legíveis. Como resultado, a experiência de leitura parece equilibrada tanto no formato digital quanto no papel.

A Microsoft atualiza regularmente a fonte para dar a ela uma aparência mais moderna e flexível. A versão atualizada, Georgia Pro, está disponível para compra. No entanto, os usuários da Microsoft podem obter a fonte gratuitamente na Microsoft Store.

11. Exibição Playfair

Playfair Display parece papel de jornal do século 18, não que seja uma coisa ruim. Essa fonte parece muito sofisticada e estabelece um tom muito profissional para sua página da web. Também contribui para uma leitura sofisticada e é surpreendentemente flexível. Você pode emparelhá-lo com outras fontes para levar para casa aquela sensação elegante.

Como usar fontes de web design de forma eficaz

Você recebeu uma lista de fontes para usar e como identificar fontes para suas necessidades. Usá-los efetivamente é um processo totalmente diferente. Aqui estão algumas coisas a serem observadas ao usar fontes.

1. Emparelhamento e combinação de fontes.

Não é incomum ver designers misturando e combinando fontes para obter um efeito maior. Pense nisso como vasculhar seu guarda-roupa e fazer uma camiseta branca lisa se destacar em uma de suas roupas. Ou direcionar os olhos das pessoas para aqueles novos chutes em seus pés.

Da mesma forma, você pode direcionar os leitores para determinados pontos em sua página da web, mesmo que eles não sejam atraentes por si só. Você só precisa estruturar todo o resto para garantir que as pessoas realmente olhem para aquele local específico.

Isso inclui o uso de fontes diferentes para finalidades diferentes na mesma página da Web ou algo tão simples quanto definir um esquema de cores estético. Maximizar a psicologia das cores pode até melhorar as conversões em sua página da web.

2. Criação de fonte personalizada.

Se você for criativo o suficiente, pode até criar sua própria fonte para seus próprios propósitos! Alguns serviços, como o Calligraphr, permitem que você transforme sua própria caligrafia em um formato digital. Se você deseja criar uma fonte que outras pessoas possam usar, lembre-se de que geralmente é um longo processo de design.

3. Licenciamento e direitos de uso.

A maioria das fontes é gratuita e pode ser usada para diversos fins, sejam eles pessoais ou comerciais. No entanto, alguns designers de fontes impõem limites ao uso de suas criações. Por exemplo, você deve pagar o designer para usar uma fonte para fins comerciais.

4. Teste e otimização.

Um estágio importante de pré-lançamento para qualquer página da web é o teste e a otimização. Você deve verificar novamente se o texto é exibido corretamente e com a fonte correta, se o esquema de cores é agradável aos olhos, etc.

LEITURA RECOMENDADA: Como criar um fluxo de trabalho de design e desenvolvimento da Web perfeito

Configurando fontes para uso em sites

Agora que você tem uma ideia de quais fontes são comumente usadas online, você está pronto para começar a usá-las. Veja como você pode começar:

1. Baixe e instale as fontes.

Algumas suítes criativas já possuem fontes pré-instaladas prontas para uso. No entanto, se você achar que uma fonte de que gosta não faz parte do seu catálogo, basta procurá-la online. Você também pode escolher qual formato deseja baixar (por exemplo, se usará TTF/OTF, WOFF ou ambos).

Muitas fontes de código aberto são gratuitas para download, mas algumas fontes precisam ser compradas antes de serem usadas para determinados fins. Se você planeja usar uma fonte para fins comerciais, certifique-se de ler os termos de licença da fonte antes de fazê-lo.

Depois de encontrar uma fonte, basta baixá-la para o seu computador. A maioria das fontes vem em formato .ZIP, então você deve extraí-las. Basta clicar com o botão direito do mouse no arquivo e selecionar “Extrair aqui” para fazer isso. Você terá um arquivo de fonte pronto para ser instalado.

Basta clicar duas vezes no arquivo e pressionar “Instalar” na tela de visualização que aparece.

2. Incorpore as fontes em seu site.

Se você planeja fazer o trabalho sozinho, pode navegar por diferentes guias como este para ver como incorporar as fontes usando diferentes plataformas da web.

Lembre-se de que existe uma lista de verificação de design da web antes de liberar sua página da web ao público.

3. Garanta a compatibilidade entre navegadores.

As fontes mais populares e comumente usadas já estão nas versões TTF/OTF ou WOFF, o que significa que são exibidas corretamente em todos os principais navegadores. No entanto, você pode encontrar uma fonte personalizada que não tem a aparência pretendida porque tem um formato diferente.

Se você quiser manter uma fonte, experimente alguns guias on-line e torne seu texto compatível com vários navegadores. No entanto, é recomendável que você use fontes que tenham os formatos mencionados para que seu design da web não seja prejudicado.

Dicas de otimização de fontes da Web

Você pode encontrar problemas com os tempos de carregamento da sua página da web. Hoje em dia, longos tempos de carregamento são a ruína de qualquer pessoa que navegue na web. Seus usuários e clientes em potencial não são diferentes. Veja como você pode evitar longos tempos de carregamento:

1. Não use muitas fontes.

Este é bastante simples. Normalmente, quanto mais fontes personalizadas você usa em seu site, significa que você está deixando seu serviço de hospedagem na web mais lento.

A regra geral no uso de fontes é manter duas classes de fontes: uma para o cabeçalho e os títulos e outra para o corpo do texto. Dessa forma, você pode evitar sobrecarregar seu serviço de hospedagem e é menos desgastante para sua equipe de design. Seus visualizadores também podem ser desativados se você alterar as fontes com frequência.

2. Use fontes otimizadas para cada navegador.

Infelizmente, nenhum formato funciona em todos os navegadores. Você deve usar formatos diferentes ao criar uma página da web. Com o Google Analytics, você pode verificar quais navegadores e dispositivos são mais populares entre seus visitantes.

Se você se sentir confortável com navegadores mais antigos usando fontes alternativas, sempre poderá usar atalhos. Mas, novamente, isso não é recomendado.

Principais conclusões

Agora que a poeira baixou, é hora de colocar sua criatividade para funcionar. Você é livre para usar as fontes desta lista ou explorar a Internet para fontes personalizadas mais adequadas às suas necessidades. De qualquer forma, aqui estão três conclusões principais deste artigo:

Use uma fonte consistente com a voz da sua marca. Melhora o relacionamento com seu público e dá o tom para novos clientes.
Torne sua marca centrada no cliente. Um aspecto importante do web design é que você está criando algo para seus usuários desfrutarem; não apenas você.
Não tenha medo de experimentar. É para isso que serve o processo de design. Você deve explorar o que funciona e o que não funciona.

Entre em contato com a Propelrr hoje mesmo para saber mais sobre os conceitos de web design. Estamos mais do que felizes em ajudá-lo. Se precisar de mais ajuda ou mais informações, conecte-se conosco através do Facebook, Twitter ou LinkedIn.

Para obter mais dicas sobre como criar sites e aplicativos centrados no usuário, assine o boletim informativo da Propelrr para obter acesso instantâneo.