.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

Tipografia de web design. Conhecimento essencial para a criação de sites

elementos importantes da tipografia
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!

A tipografia é de grande importância hoje em dia na concepção de websites e aplicações web. Preparamos um pequeno guia para os elementos mais críticos da tipografia do web design. Descubra quais regras de tipografia são as mais importantes e quais erros tipográficos devem ser evitados!
No entanto, aprender tipografia não precisa ser entediante e levar anos! Se você se familiarizar com seus princípios mais essenciais, projetará a aparência dos textos em sites seguindo padrões gráficos. Quais segredos de um bom web design garantirão que o texto do seu site seja legível? No BOWWE, preparamos um pequeno guia para apresentá-lo aos fundamentos da tipografia. Você também aprenderá quais erros tipográficos evitam atrapalhar a legibilidade do texto na página. Aqui estão algumas dicas práticas de digitação para se inscrever em qualquer site.

O que é tipografia?

Antes de examinarmos a aplicação prática dos princípios de tipografia da Internet ao 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 Internet é crucial ao escrever artigos para um blog, criar conteúdo para sites e qualquer trabalho gráfico, por exemplo, design de logotipo.

Mini dicionário de termos tipográficos

Quais são as características das fontes? Como você pode reconhecer serifas? Você deve conhecer esses conceitos! Se você é um blogueiro, entusiasta de web design ou simplesmente deseja melhorar o conteúdo do seu site, vale a pena se familiarizar com os termos básicos antes de começar a explorar os meandros da tipografia da web.

O que é uma fonte?

Um tipo de letra é um conjunto de caracteres com recursos gráficos consistentes, por exemplo, forma, estilo e proporções. Muitas pessoas confundem um tipo de letra com uma fonte ou uma fonte. Quando nos referimos à alteração da fonte (Times New Roman, Arial, etc.), nos referimos à fonte. As fontes podem ser divididas em categorias, levando em consideração as diferentes características do script. Os tipos mais conhecidos de fonte são: é um conjunto de caracteres com recursos gráficos consistentes, por exemplo, forma, estilo e proporções. Muitas pessoas confundem um tipo de letra com uma fonte ou uma fonte. Quando queremos dizer mudar a fonte (Times New Roman, Arial, etc.), nos referimos à fonte. As fontes podem ser divididas em categorias, levando em consideração as diferentes características do script. Os tipos mais conhecidos de fonte são:
 diferenças entre as fontes serif e sans serif
  • tipo de letra com serifa (as chamadas serifas) - as letras têm terminações achatadas (por exemplo, Times New Roman)
  • tipo de letra sans-serif - letras simples sem terminações (por exemplo, Arial)

O que significam líder, rastreamento e kerning?

Leading, tracking e kerning são maneiras 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?

 

Leading se refere a regular a distância entre as linhas de escrita onde as letras estão.

explicação leading

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.

 

Por outro lado - o kerning é usado seletivamente no texto.

kerning e tracking explicação
Por exemplo, ele pode ser usado entre as letras V e A semelhantes 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.

O que são órfãos ?

Órfão é o termo coloquial para simplesmente conjunções que pendem, ou seja, deixadas no final de um verso. Se colocarmos 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. Às vezes, se houver poucas conjunções suspensas no texto, vale a pena movê-las manualmente. No entanto, a maioria dos programas gráficos oferece opções mais rápidas para resolver esse problema. É uma boa ideia lê-los se você estiver lidando com um texto que contenha muitos desses tipos de erros.

O Papel da Tipografia no Web Design

Já dissemos o que é tipografia - agora é hora de explicar seu significado no web design. O papel da tipografia não se limita à função decorativa. No mundo online, sua principal tarefa é facilitar aos usuários a percepção das mensagens de sites. A maioria dos usuários da Internet não lê os textos palavra por palavra, apenas examina 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 importantes que deseja transmitir. Não se pode negar que fontes bem escolhidas podem animar o seu site e dar-lhe o caráter certo e prejudicar a recepção de todo o site. 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.

A aparência do texto no site é importante?

Você pode ter o design mais bonito da página. Mas se você não escolher a fonte certa para ele, não haverá efeito WOW. Se você tiver dúvidas sobre a importância do tamanho das fontes em seu site, imagine uma situação em que um usuário entra em uma página desatualizada cheia de strings de texto ilegíveis. O que acontece se a estrutura do conteúdo do site não facilita ou mesmo dificulta para o usuário encontrar as informações mais críticas? Na verdade, ele sairá rapidamente de uma página tão feia e irá para a competição, mesmo que o texto em si tenha um valor substantivo.

Tipografia no site e branding

O texto do site afeta a forma como sua marca será vista visualmente na Internet. A marca consiste em nome, logotipo, cores da marca e tipografia . Portanto, uma fonte adequadamente construída pode se tornar a marca registrada de sua marca. Portanto, se você deseja criar uma marca forte e reconhecível, trate a tipografia como uma vitrine do seu site! Adendo? Na hora de criar um site, não se esqueça de discutir com o designer gráfico a consistência da tipografia com a identificação visual da sua marca.

Erros tipográficos comuns

A negligência tipográfica efetivamente desencoraja os usuários de retornar ao site.

Alguns fundamentos tipográficos não devem ser quebrados, e isso até mesmo os designers gráficos às vezes esquecem rapidamente. Ignorá-los pode atrapalhar ou mesmo impedir completamente a legibilidade da mensagem do conteúdo. Aqui estão as omissões tipográficas mais flagrantes que devem ser evitadas, pois podem arruinar a UX de qualquer design de página:

Fonte muito pequena

Mesmo se você achar que uma fonte pequena tem uma boa aparência 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 quanto à estrutura do texto fará com que seu site seja percebido como caótico. No entanto, muitos designers gráficos e web designers frequentemente cometem erros em relação à estrutura do texto. Se você estiver lidando com uma página com strings de texto muito longas, será difícil obter as informações mais importantes. Mesmo que você sinta que tem muitas informações de encaminhamento em seu site, lembre-se de que os usuários preferem textos curtos! E se o leitor lidar com um texto muito largo, ocupando a maior parte da tela do monitor? Para ler o texto completamente, o usuário deve mover a cabeça da esquerda para a direita e forçar o movimento dos olhos. Portanto, se você deseja que seus leitores sejam amigáveis, vale a pena prevenir isso! Tudo o que você precisa fazer é 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. Claro, não queremos esse efeito no site!

Sem títulos no artigo

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

Escolha errada de tipo de letra

De acordo com a regra, quanto menos é mais, máximo de duas fontes diferentes. Familiarize-se com os padrões comuns de combinação de fontes antes de fazer sua escolha. Você sempre pode escolher as combinações mais populares. As fontes mais simples são todas sem serifa (Arial, Calibri, Lato). Você pode combiná-los com moda da fontes da Páscoa , ou seja, fontes com ornamentos distintos.

Padrões de fundo

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

Texto justificado

A justificação do texto fará com que seu texto pareça artificial. Portanto, vale a pena evitar esse tratamento. Em vez de dar a impressão de organização e elegância, o texto simplesmente se tornará ilegível. A justificação só fica bem em colunas de jornal. Na Internet, isso resulta na formação de espaços em branco no texto, ou seja, lacunas. O que aconteceria então em vez de justificação? É melhor focar no alinhamento do texto à esquerda, o chamado arranjo da bandeira.
Se você não está convencido de que o texto do seu site está lendo bem, peça aos seus amigos para testarem. Se eles estreitarem os olhos e se aproximarem do monitor para ler o texto, é um sinal de que algo precisa ser mudado!

Onde encontrar conhecimentos de tipografia?

Aqui estão alguns itens indispensáveis ​​para todo designer de UX, entusiasta de web design e qualquer pessoa que queira explorar os segredos da tipografia da Internet.
  • First Aid in Typography (Friedrich Frossman, Hans Peter Willberg) - um kit de ferramentas tipográficas que ajudará muitos designers novatos em necessidade.
  • Shady Characters (Keith Houston) - algum conhecimento sobre a história da tipografia e descrições práticas de caracteres tipográficos.
  • The Elements of Typographic Style (Robert Bringhurst) - uma leitura obrigatória para tipógrafos e muito mais. Você encontrará alguma teoria e conhecimento sobre a construção de arranjos tipográficos inteiros.
Para atraentes inspirações na Internet, você encontrará tendências e curiosidades tipográficas que valem a pena dar uma olhada na fanpage Fontfabric Type Foundry . Você também pode seguir o trabalho de tipógrafos modernos como inspiração. Łukasz Dziedzic é um designer polonês que criou o corte de verão e em seu site publica regularmente notícias do mundo do design.

Crie o sistema de tipografia perfeito para o seu site

As regras tipográficas usadas ao projetar sites não são muito complicadas e o conhecimento delas pode ser insubstituível. Mesmo sem conhecimentos gráficos avançados ou habilidades de codificação, você pode tentar garantir o básico da tipografia em seu site. E se você quiser aprender como criar texto legível para um site, leia nosso artigo e aprenda sobre as oito regras de ouro de cada designer de UX!
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