.certificate-info:before { content: "\E086"; font-family: Glyphicons Halflings; }

Blog do BOWWE

Conselhos práticos sobre criação de sites, marketing on-line e desenvolvimento de negócios

Como criar os melhores textos para um site - 8 regras de ouro do designer UX

Texto traduzido automaticamente

Para fornecer a você o acesso mais rápido aos nossos artigos, traduzimos este texto automaticamente. Como resultado, pode conter erros em alguns lugares. Vamos melhorar em breve!

Você gostaria de melhorar a experiência do usuário em seu site, mas não tem tempo para aprender regras complicadas de design de texto? Com o BOWWE, você não precisa se tornar um especialista neste campo. Basta seguir alguns truques simples em seu site! Explicamos os princípios mais importantes da tipografia da Internet, cujo conhecimento mudará para sempre a estética do conteúdo do seu site.

Embora a Tipografia seja de grande importância no design de sites e aplicações web hoje, é um dos elementos mais negligenciados na hora de projetar sites ou manter um blog. Muitas vezes esquecemos que a legibilidade do texto é tão importante para o usuário quanto o conteúdo em si. Elementos de tipografia como tamanho, largura e cor da fonte têm um grande impacto na experiência do usuário, ou seja, a experiência do usuário na web.

Então, como tornar o texto do site legível e consistente com a identidade visual da sua marca? As regras tipográficas utilizadas na concepção de sites não são muito complicadas e o seu conhecimento pode revelar-se insubstituível. Reunimos as 8 regras mais importantes, graças às quais irá criar o sistema de tipografia perfeito para o seu site e melhorar significativamente a sua experiência de utilizador.

1. Selecione a fonte apropriada

O mais importante é que a tipografia reflita a verdadeira natureza do seu setor. Portanto, escolher a fonte certa para o design do seu site não pode ser uma questão de acaso. Só porque uma fonte é popular e você gosta dela, não significa que será apropriada para o seu setor. Preste atenção ao que o tipo de letra comunica (ou seja, seus recursos gráficos, ou seja, estilo, proporção, forma).

Ao projetar, escolha uma fonte que agrade ao seu público. Com o que você associa uma caligrafia elegante e uma fonte expressiva e massiva? Você os usaria para transmitir o mesmo conteúdo? Se você tiver uma loja infantil, não usará fontes comerciais simples e elegantes e vice-versa. Se você quiser saber o que procurar ao escolher a melhor fonte para o seu site, consulte nosso artigo sobre fontes.

Onde encontrar fontes grátis?

Se você não tem tempo para desenvolver uma fonte exclusiva, pode optar por fontes comprovadas e mais populares. Você pode usar fontes pagas, por exemplo da Adobe, ou sites de ações com fontes gratuitas, por exemplo, do extenso banco de dados de Fontes do Google .

Como instalar fontes?

Depois de baixar o arquivo de fonte, você precisa instalá-lo. Você pode fazer isso de duas maneiras:
  • instalação em um computador - esta é uma opção mais simples. Tudo que você precisa fazer é descompactar o arquivo de fonte. Em seguida, copie todos os arquivos descompactados para o diretório "fonts", que você encontrará na pasta "Windows" do seu computador. Posteriormente, você já pode abrir a fonte em qualquer programa gráfico simples como o GIMP.
  • instalação diretamente no site - esta é uma maneira mais complicada. Se você não tiver habilidades de codificação, precisará pedir ajuda a um desenvolvedor ou web designer.

2. Selecione o tamanho da fonte

O tamanho da fonte na página é importante! Se você escolher uma fonte que não seja muito pequena ou muito grande, tornará a leitura muito mais fácil para os usuários. Uma unidade especial usada por tipógrafos para descrever fontes é pt ou ponto, ou seja, pontos. O intervalo preferido de tamanhos de fonte para uso em sites é entre 14-25pt. Fontes maiores podem ser reservadas para cabeçalhos (20pt e acima), e para texto simples, o melhor intervalo é 14-18pt. Seja qual for o tamanho da fonte que você escolher, certifique-se de que o tamanho da fonte seja:
  • Torna o texto legível - um tamanho de fonte de 12pt e abaixo pode prejudicar significativamente a legibilidade;
  • Corresponde ao tipo de fonte - por exemplo, para sua fonte de sistema, Roboto, o Google recomenda um mínimo de 16 pt. Por outro lado, San Francisco - a fonte utilizada, entre outras, em aparelhos Apple, deve ter no mínimo 18 pt. Tamanho;
  • Reflete o propósito da página - se a página não for dominada por texto, mas por design, uma fonte menor pode ser usada. Também no caso de páginas interativas que incentivam o usuário a clicar em todas as etapas, esse procedimento pode ser realizado. Se, por outro lado, se trata de uma página em que predomina o texto e a principal tarefa do usuário é a leitura (por exemplo, área do blog, portal de informações), é melhor escolher uma fonte um pouco maior.

Como escolher o tamanho do cabeçalho?

Você já decidiu o tamanho da fonte do corpo do texto, mas não sabe como manter o tamanho dos títulos em proporção ao resto do conteúdo? Existem vários métodos comprovados para isso:
  • O cabeçalho H1 deve ser 300% do tamanho da fonte usada no corpo do texto.

Por exemplo, se o seu site usa uma fonte de 18pt para o corpo do texto, o tamanho ideal para os títulos será 54pt.

  • O cabeçalho H2 deve ser 200% do tamanho da fonte do corpo do texto.

Nesse caso, com um tamanho de fonte base de 18pt, o cabeçalho H2 ideal seria 36pt.

Nossa dica : para títulos sucessivos, você pode diminuir gradualmente a porcentagem, por exemplo, para o cabeçalho H4, você pode multiplicar o tamanho da fonte básica por 130-150%.

Fontes na versão móvel

Ao escolher o tamanho da fonte, você deve primeiro responder à pergunta em quais dispositivos o texto será exibido. O mesmo tamanho de fonte parecerá diferente em monitores de laptop e em dispositivos móveis. Se você preferir se concentrar na aparência do site na esfera móvel, lembre-se destas duas regras importantes:

  • fontes grandes não ficarão bem em telas de smartphones
  • os cabeçalhos não devem ter mais do que duas linhas

Portanto, ao projetar um site para celular, vale a pena conferir a aparência do texto e certificar-se de que a fonte não seja muito grande.

3. Siga a regra: menos é mais

Ao projetar sites, é melhor seguir o princípio do minimalismo. Usar mais de dois tipos de fontes em um projeto pode atrapalhar a estética do projeto. A solução mais segura é escolher dois tipos de fontes: para cabeçalhos e para texto simples. Além disso, lembre-se de que nem todas as fontes podem funcionar juntas. Existem pares de fontes que gostam mais umas das outras e algumas que são absolutamente incompatíveis entre si. Vale a pena lê-los antes de fazer sua escolha final! Recomendamos que você use o Best Font Combination Canva's Finder .

4. Desenvolva a estrutura de conteúdo

Um aspecto igualmente importante da tipografia quanto a escolha da fonte é o layout da estrutura de todo o conteúdo da página. Não importa se é uma breve descrição do seu negócio ou um artigo extenso na seção do blog - a estrutura de cada tipo de conteúdo tem um grande impacto na percepção do seu site pelos usuários. Os elementos mais importantes que devem ser observados para manter a consistência da estrutura do texto são:

Distância entre as linhas

É importante manter a altura de linha apropriada, ou seja, o espaço entre as linhas. Uma distância muito curta fará com que as linhas de texto praticamente se sobreponham. Por outro lado, muito alto fará com que o texto seja "explodido". Portanto, é melhor encontrar um meio-termo dourado.

Comprimento de linhas e parágrafos

Há muito tempo que se sabe que fragmentos curtos do texto são muito melhores de ler. Linhas ou parágrafos muito longos podem ser cansativos para os olhos e perturbar o ritmo da leitura. Para não cansar o usuário, o comprimento da linha deve ser em torno de 50-75 caracteres. O mesmo se aplica aos parágrafos que não devem ser esquecidos. Os parágrafos tornam os textos mais longos mais acessíveis.

Alinhamentos

Com a propriedade text-allign, você pode definir como o texto é alinhado e encaixar o texto à direita ou esquerda. Você também pode justificá-lo para ambas as bordas ou centralizá-lo
Nossa dica : embora pareça conveniente alinhar todas as bordas do texto, não recomendamos que você justifique completamente o conteúdo da página. Textos justificados na Internet simplesmente não têm boa aparência e, ao contrário do que parece, interferem na legibilidade. Quando alinhado à margem esquerda (a chamada composição da bandeira), você tem a opção de mover as palavras que não cabem na próxima linha, mantendo o mesmo espaçamento. Desta forma é mais natural aos olhos e dá o ritmo de leitura correto.

5. Combine as cores

A cor da fonte é um elemento da tipografia intimamente relacionado à identidade visual de sua marca na Internet. No entanto, como acontece com a combinação de fontes, você também deve ter cuidado ao escolher suas cores. Aqui estão os padrões mais importantes para a cor da fonte:

Escolha até 3 cores

Você já sabe que é melhor seguir o minimalismo na tipografia. O mesmo vale para as cores. Usar mais de três cores no texto já pode criar caos no site e torná-lo infantil.

Cuide do contraste

O texto deve ter contraste adequado com o fundo. Obviamente, a combinação mais segura é a cor da fonte preta em um fundo branco ou cinza claro. É a combinação de cores mais natural e não cansa os olhos durante a leitura.

Combine apenas as cores correspondentes

Lembre-se de que existem cores que simplesmente não combinam, como vermelho e verde. Quebrar esquemas de cores no caso de fontes geralmente não funciona.

6. Destaque-se

Ao priorizar seu texto, você pode enfatizar que uma palavra é simplesmente mais importante do que outra. Portanto, as palavras mais importantes do seu site devem ser destacadas. Eles podem ser MAIORES, em negrito, itálico, codificados por cores ou separados por um espaço vazio.

Elementos de texto que devem ser destacados no site:

  • Você pode distinguir botões CTA (Call To Action), ou seja, chamadas para a ação. Ao dar-lhes um fundo diferente, eles se destacarão do resto do texto.
  • Se você deseja viver de acordo com o SEO, é uma boa ideia colocar em negrito as palavras-chave que definem seu setor. Palavras-chave em negrito chamarão imediatamente a atenção do visitante. Graças a isso, seu site será lembrado não só pelos buscadores, mas também pelos usuários.
  • Você também pode destacar a fonte! Se você decidiu usar um tipo de letra popular e ainda quer se destacar, você pode dar a ele recursos exclusivos. Decore usando negrito ou adicionando serifas.

7. Crie sua própria escala de fonte

Experimente com tamanho de fonte, escala e diferentes webphones! Você pode usar os sites gratuitos. Graças a isso, você pode desenvolver facilmente seu próprio sistema de fontes para o site, mesmo que não seja um web designer. Experimente Type Scale - um site que oferece uma prévia e seleção da escala de fonte apropriada para seu projeto ou material.io - onde você também tem a oportunidade de desenvolver interativamente um sistema de fonte para seu site. Aqui você pode construir uma visualização tipográfica do design do seu site sem qualquer habilidade de codificação.
Encontre os melhores designs de sites com exemplos de tipografia interessante. Você em sites como o Dribbble pode encontrar toneladas de inspiração gráfica . Graças a isso, você vai descobrir o que está em alta no mundo do design: fontes geométricas ou talvez uma fonte simples. O design plano definitivamente vale a pena mencionar entre as tendências atuais. Traduzido literalmente, isso é "design plano". É uma tendência de design baseada em um design simples no qual a tipografia desempenha um papel importante. A seleção de uma apropriada fonte minimalista é a chave aqui.

Não ignore a tipografia em seu site

Neste artigo introduzimos os aspectos mais importantes aos quais devemos prestar atenção para melhorar a tipografia do nosso site. Agora você sabe que a escolha errada de fontes, largura errada do texto ou espaçamento muito pequeno podem atrapalhar a recepção do texto na página e, assim, desencorajar os usuários de visitá-la! Lembre-se de que a tipografia é a chave para o sucesso de qualquer design de site. Seguindo suas regras elementares, você pode ter certeza que o texto não só será legível, mas acima de tudo criará o clima certo e refletirá fielmente o estilo do seu site.
Share:

Pronto para construir seu próprio site?

Não se preocupe, nós ajudaremos você! Nós também podemos fazer isso por você!

iniciar
banner image

Pronto para construir seu próprio site?

iniciar
1