Guia Completo Para Tipografia Web Design Para Cada Site

Guia Completo Para Tipografia Web Design Para Cada Site

Karol Andruszków
07-06-2023
Reading time: 20 minutes
Photo representing the subject of the blog
Junte-se à nossa lista de emails!
Subscreva para atualizações semanais

SUBSCREVER

Guia Completo Para Tipografia Web Design Para Cada Site

Karol Andruszków

conhecimento de tipografia importante para criar sites

A tipografia tem um enorme impacto em como seu público processa seu conteúdo. Se você seguir as regras de ouro da tipografia , os usuários ficarão ansiosos para visitar seu site, ler as postagens do seu blog ou admirar o logotipo da sua empresa. Sem atenção à tipografia adequada, você não pode esperar que alguém gaste nem mesmo alguns segundos decifrando o que você está tentando transmitir a eles. Neste guia, você aprenderá como evitar essa situação e manter uma tipografia amigável em seu site.

O que é tipografia?

Antes de abordarmos a aplicação prática dos princípios de tipografia em seu site, vamos explicar brevemente o que é tipografia . Por definição, a tipografia é um conjunto de regras relativas aos aspectos visuais. É um termo usado tanto na impressão tradicional quanto na digital.

 

A tipografia da web é essencial quando se trata de criar sites de internet ou qualquer outro conteúdo que vá para a web. Depende se, por exemplo, um determinado artigo é fácil de assimilar ou o logotipo é claramente visível no site como uma diferença nos documentos impressos.

Tipografia de web design: termos obrigatórios

Para conhecer a tipografia correta, você deve primeiro se familiarizar com seus fundamentos. Aqui estão os termos mais essenciais que você precisa conhecer para aplicar com sucesso as regras básicas da tipografia.

O que é tipografia na tipografia?

Um tipo de letra é um conjunto de caracteres com características gráficas consistentes , por exemplo, forma, estilo e proporções. Muitas pessoas confundem um tipo de letra com uma fonte.

 

Quando alguém está falando em mudar a fonte (Times New Roman, Arial, etc.), eles se referem ao tipo de letra. letra podem ser divididos em categorias , levando em consideração as diferentes características do script.

 

Os tipos mais conhecidos do tipo de letra são:

fontes com serifa sem serifa

a) letra com serifa (as chamadas serifas) - as letras têm terminações achatadas (por exemplo, Times New Roman).

b) Tipo de letra sem serifa - letras simples sem terminações (por exemplo, Arial).

Condução, rastreamento e kerning

Leading, tracking e kerning são formas de regular a luz (ou distância) entre as letras. Essas são funções populares encontradas em muitos programas gráficos projetados para trabalhar com texto. Qual é a principal diferença entre esses três métodos?

O que é líder em tipografia?

Gráfico - explicação principal

Liderar em tipografia refere-se a regular a distância entre as linhas de escrita onde as letras estão.

O que é rastreamento na tipografia?

O rastreamento (também conhecido como alteração da densidade da composição ) pode ser aplicado a uma área de texto maior, por exemplo, o parágrafo inteiro.

O que é kerning na tipografia?

Kerning e rastreamento

Kerning é usado seletivamente no texto. Por exemplo, pode ser usado entre letras semelhantes V e A para facilitar a leitura. Além disso, o kerning determina o espaçamento não apenas entre letras individuais, mas também entre sinais de pontuação e números.

Viúva e órfãos

Viúva e órfãos - gráfico

O que são órfãos na tipografia?

Órfãos são palavras que aparecem no final de um parágrafo que são deixadas sozinhas na próxima linha. Se você colocar uma palavra de uma única letra no final de uma linha, é um erro de composição. Portanto, as conjunções deixadas no final da linha devem sempre ser movidas para a próxima linha.

O que são viúvas na tipografia?

Uma viúva é uma linha de texto que é deixada isolada no final de um parágrafo. Isso geralmente é considerado uma tipografia ruim, pois pode atrapalhar o fluxo de leitura.

O papel da tipografia no web design

O papel da tipografia não se limita às funções decorativas. No mundo online, sua principal tarefa é facilitar aos usuários a percepção das mensagens dos sites. A maioria dos internautas não lê os textos palavra por palavra, apenas escaneia o conteúdo , selecionando os fragmentos mais importantes. Portanto, toda a tipografia da página deve ser projetada cuidadosamente. Afinal, seu objetivo é chamar a atenção do leitor para as informações mais críticas que você deseja transmitir.

 

Não se pode negar que fontes bem escolhidas podem animar seu site e fazer com que os usuários permaneçam por mais tempo. Seguindo as regras de tipografia , você pode ter certeza de que o conteúdo do seu site será estético, legível e consistente com seu estilo.

Quão importante é a aparência do texto no site?

A aparência do texto em um site é importante por vários motivos. Primeiro, ajuda a criar um site visualmente atraente e agradável aos olhos. Em segundo lugar, pode ajudar a transmitir o tom geral e a sensação do site. Terceiro, pode ajudar a tornar o site mais fácil de navegar e de ler. Quarto, o texto bem formatado pode ajudar a melhorar a otimização do mecanismo de pesquisa (SEO). Por fim, uma boa tipografia pode ajudar a criar um site com aparência mais profissional.

Tipografia versus branding. Como eles impactam uns aos outros?

Gráfico - Tipografia vs. branding

O texto no site afeta como sua marca será percebida na Internet. O branding consiste em nome, logotipo, cores da marca e tipografia.

 

A tipografia pode ter um grande impacto na marca. Ele pode comunicar o tom e a personalidade de uma marca e influenciar a maneira como os consumidores percebem uma marca. Uma boa tipografia permitirá que a marca pareça mais credível e confiável , enquanto uma má tipografia pode fazer uma marca parecer barata ou pouco profissional.

 

A marca também pode impactar a tipografia. Por exemplo, uma marca pode optar por usar uma determinada fonte porque está associada a um determinado tipo de cliente ou porque se encaixa na imagem da marca. A marca também pode ditar a aparência geral de uma tipografia , como cores, espaçamento e tamanho do texto.

Erros tipográficos comuns a serem evitados

A negligência tipográfica efetivamente desencoraja os usuários a retornar ao site. Alguns princípios tipográficos não devem ser quebrados, e que até designers gráficos às vezes esquecem com pressa. Ignorá-los pode atrapalhar ou até mesmo impedir completamente a legibilidade da mensagem do conteúdo. Aqui estão os descuidos tipográficos mais flagrantes que devem ser evitados, pois podem arruinar o UX de qualquer design de página:

Legibilidade vs legibilidade

A tipografia é a arte e a técnica de organizar tipos para tornar a linguagem escrita legível, legível e atraente. O objetivo de uma boa tipografia é tornar o texto fácil de ler, organizando o tipo de forma legível e atraente. Legibilidade é a qualidade de ser fácil de ler, e legibilidade é a facilidade com que um texto pode ser lido.

 

É importante equilibrar os fatores concorrentes de legibilidade e legibilidade ao projetar um layout tipográfico. O objetivo é criar uma tipografia de site que seja legível e atraente, e que seja fácil de ler.

Fonte muito pequena

Mesmo se você achar que uma fonte pequena fica legal e combina com o estilo da página, lembre-se de não exagerar. Uma fonte muito pequena é sempre difícil de ler . E é a legibilidade do texto que você deve colocar em primeiro lugar se quiser criar um site amigável!

Blocos de texto muito amplos e muito longos

Qualquer negligência em relação à estrutura do texto fará com que seu site seja percebido como caótico. É difícil pegar as informações mais importantes ao lidar com uma página com strings de texto muito longas. Mesmo que você ache que tem muitas informações de encaminhamento em seu site, lembre-se de que os usuários preferem textos curtos! Basta encurtar os textos e seguir o número ideal de caracteres em uma linha, ou seja, entre 40 e 80.

Sem parágrafos

O conteúdo sem parágrafos parecerá uma linha de pensamento desorganizada ou ilógica, em vez de um texto profissional e substantivo. Portanto, lembre-se de dividir o texto em parágrafos ; você também pode separá-lo com gráficos atraentes.

Sem títulos no artigo

É mais um exemplo da falta de organização de um texto. Como um detalhe, pode borrar completamente a mensagem do conteúdo ou atestar a falta de engenhosidade.

Escolha errada do tipo de letra

De acordo com a regra, quanto menos é mais . Familiarize-se com os padrões comuns para combinar fontes antes de fazer sua escolha. Você sempre pode escolher as combinações mais populares.

Deixando conjunções (órfãos)

Você já sabe o que são órfãos e que não deve deixar conjunções solitárias no final de um texto. Vale a pena evitar, mesmo que não seja um erro gritante à primeira vista. Então o texto fica muito mais fácil de ler.

Padrões de fundo

Sem dúvida, você já viu um site mais de uma vez em que o texto é ilegível devido a fundos padronizados. Colocar texto em uma foto, ou mesmo uma cor distinta, é sempre um procedimento arriscado. Evite qualquer fundo com padrões se não quiser cansar os olhos do usuário.

Texto justificativo

A justificação fará com que seu texto não pareça natural. Portanto, vale a pena evitar este tratamento. Em vez de dar a impressão de organização e elegância, o conteúdo se torna ilegível. A justificação só fica bem nas colunas dos jornais. Na Internet, isso resulta na formação de espaços em branco no texto, ou seja, lacunas. É melhor usar o alinhamento do texto à esquerda.

Onde encontrar conhecimento de tipografia?

Gráfico - conhecimento de tipografia

Aqui estão alguns recursos obrigatórios para todo designer de UX, entusiasta de web design e qualquer pessoa que queira explorar os segredos da tipografia da web.

 

a) Primeiros Socorros em Tipografia (Friedrich Forssman, Hans Peter Willberg) - um kit de ferramentas tipográficas que ajudará muitos designers iniciantes em necessidade.

 

b) Personagens obscuros (Keith Houston) - conhecimento sobre a história da tipografia e descrições práticas de caracteres tipográficos.

 

c) Os Elementos do Estilo Tipográfico (Robert Bringhurst) - leitura obrigatória para tipógrafos e muito mais. Você encontrará alguma teoria e conhecimento sobre a construção de arranjos tipográficos completos.

 

d) Glossário do Google Fonts - banco de dados online de termos e suas definições relacionadas à tipografia.

Tipografia de web design - resumo

Gráfico com grandes palavras "Tipografia"

Você já sabe o que é tipografia boa e fácil de usar. Você percebe o impacto que isso tem na legibilidade e na comunicação clara do seu conteúdo. Agora é hora de cuidar da tipografia perfeita em seu próprio site!

Pronto para criar o site dos seus sonhos?
Diga adeus aos aborrecimentos da codificação e olá para um site impressionante e profissional com SEO de alto nível hoje!

COMECE AGORA

Leia também:

Karol Andruszków
CEO BOWWE

Karol é empreendedor serial, palestrante de e-commerce, entre outros para o Banco Mundial, e fundador de 3 startups, das quais já assessorou várias centenas de empresas. Foi também responsável por projetos das maiores instituições financeiras da Europa, no valor superior a 50 milhões de euros.

 

Obteve dois mestrados, um em Informática e outro em Gestão de Marketing, durante os seus estudos na Polónia e em Portugal. Ele ganhou experiência no Vale do Silício e enquanto dirigia empresas em muitos países, incluindo Polônia, Portugal, Estados Unidos e Grã-Bretanha. Há mais de dez anos, ele ajuda startups, instituições financeiras, pequenas e médias empresas a melhorar seu funcionamento por meio da digitalização.