TIPOGRAFIA E DIAGRAMAÇÃO

O que é Tipografia?

Tipografia é o estudo, criação e aplicação dos caracteres, estilos, formatos e arranjos visuais das palavras. Os tipos, conhecidos como fontes ou tipos de letra, indicam a composição visual de um texto.

Ela desempenha um papel fundamental na comunicação, sendo responsável por transmitir mensagens de forma clara e legível. É necessário ter cautela ao trabalhar com o texto, garantindo que ele esteja em harmonia com a mensagem a ser transmitida e com os demais elementos gráficos.

Classificação

Existem 4 classificações primárias, nos quais a maioria das fontes existentes se encaixam: Sans Serif (sem serifa), Serif (com serifa), Script (simula a escrita à mão) e Dingbat (símbolos diversos no lugar das letras do alfabeto).

** Imagem reprodução rockcontent.com

As fontes com serifa são mais adequadas para livros e grandes volumes de texto impresso, já que auxiliam a leitura com maior continuidade e sem tanto cansaço visual.

As fontes sem serifa são mais utilizadas em títulos, chamadas e nos textos digitais. Neste artigo, abrangeremos apenas os meios digitais e não impressos.

Cada família de fontes por sua vez, pode abrigar algumas ou todas as variações: Thin, Light, Regular, Medium ou Semi Bold, Bold e Black ou Extra Bold (com a variação em Itálico também).

** Imagem reprodução rockcontent.com

É necessário ajustar as variações de acordo com o que quer comunicar. Um texto totalmente em "extra bold" não é agradável para leitura de um texto longo, utilizado comumente para destaques de títulos em tamanhos de fontes maiores. O mesmo pode se dizer de um parágrafo todo em variação "thin", impossibilitaria totalmente sua leitura.

Erros comuns

Algo bem comum de acontecer é escrever um texto que transmite uma mensagem séria, importante, porém com um formato de fonte espalhafatosa ou brincalhona. A legibilidade e credibilidade são fatores importantes que sempre precisam ser observados. Parece algo simples e óbvio mas é fácil cometer erros nesse aspecto.

Importante frisar também tamanho de fonte utilizada e contraste. Se a fonte tiver contraste mas não for um tamanho legível, não será possível ler de forma correta a mensagem passada. O contrário também ocorre, onde a fonte escolhida é legível, transmite seriedade mas o contraste com o fundo do texto não fica agradável aos olhos.

Hoje mais do que nunca, é necessário atentar para isso, pois basicamente todo conteúdo na internet é acessado por dispositivos móveis. Tudo é acessado por celular e utilizamos este dispositivo em todos os tipos de ambientes, desde os mais escuros com nenhuma ou pouquíssima iluminação e diariamente em ambientes abertos muito iluminados, como acontece em dias de verão com sol muito forte onde é necessário colocar o brilho do dispositivo ao máximo possível.

Texto sem contraste para exemplo.

Texto com baixo contraste para exemplo.

Texto com baixo contraste para exemplo.

Texto com contraste para exemplo.

Texto com contraste para exemplo.

Tipografia em Marcas

A tipografia também precisa ser levada em conta ao criar sua marca. Um logo com linhas fáceis de ler e comunicar possui melhor tendência de aceitação no mercado. Também precisamos salientar o que abrangemos no artigo Psicologia das Cores, da mesma forma que é necessário atentar aos contrastes de cores nos textos, é também importante essa atenção com o logo de sua empresa ou marca.

Exemplo do logo em meu site, utilizo linhas simples, fontes simples, cores com contraste e que comunicam (ou pelo menos tento comunicar) o que eu gostaria. Meu intuito era algo simples, que tivesse contraste com fundo branco e que comunicasse: formalidade, segurança, lealdade e estabilidade.

O que é Diagramação?

Diagramação é a organização visual dos elementos gráficos e textos em uma página, espaço, layout; seja para impressão ou mídia digital. Ela desempenha papel crucial na eficácia da comunicação visual, é fundamental em livros, websites, blogs, revistas, jornais, banners e todo tipo de material gráfico.

Com certeza você já se deparou com alguma propaganda, site, banner onde era difícil de entender a mensagem que transmitida, por causa de uma distribuição ruim dos elementos gráficos e textos. O importante é sempre destacar os pontos mais importantes do que se pretende comunicar de forma clara e com visual atrativo para quem consumir este material.

Como funciona uma Diagramação?

Uma diagramação eficiente e atrativa aos olhos, necessita de alguns conceitos: tipografia adequada, hierarquia visual, consistência, espaçamentos, alinhamentos, imagens e grade de layout.

Tipografia Adequada

Escolher uma tipografia adequada é importante para transmitir a mensagem correta e criar uma identidade visual coesa. A tipografia interfere na construção das colunas do layout com os espaçamentos entre letras e influencia diretamente na sua legibilidade.

Hierarquia Visual

A hierarquia visual aulixia o leitor a entender a estrutura do conteúdo. Utilizar diferentes tamanhos, pesos e estilos de fonte onde for necessário destacar elementos importantes como títulos, subtítulos, parágrafos ou um banner. É importante não ter um material confuso e poluído visualmente.

Consistência

A consistência no uso da tipografia é importante para criar uma identidade visual coesa. Todo material gráfico, textos e imagens, fazem parte da identidade visual e ela precisa ser respeitada, mesmo que as fontes e cores não sejam idênticas, mas todo o material utilizado precisa conversar com o estilo adotado.

Espaçamentos

É importante ajustar o espaçamento entre letras, linhas, parágrafos e imagens. Esses ajustes melhoram a legibilidade, facilitam a leitura e proporcionam uma melhor experiência ao leitor. Sem espaçamento correto entre elementos, as informações se misturam gerando um visual confuso e sem atratividade.

Alinhamentos

Existem muitas dúvidas sobre alinhamento de texto justificado ou a esquerda. Alinhamento justificado gera blocos mais homogênios, porém para web, alinhamento a esquerda gera melhor escaneabilidade. O importante é manter a coerência em todo o material. O mesmo é válido também para imagens, elas precisam ficar alinhadas com o layout e textos.

Imagens

Não somente de textos vive um conteúdo. Imagens dão vida ao material gráfico e auxiliam a comunicar a informação desejada. Imagens nítidas, responsivas e adequadas ao restante do material, fazem parte de uma boa diagramação.

Grade de layout

Grade de layout é a definição do espaço onde serão distribuídos os conteúdos desejados, determinando os espaços que receberão textos, imagens e o espaçamento entre os blocos de informações. Determinando se primeiro serão exibidos textos ou imagens ou o contrário, a depender do tipo de dispositivo que o leitor utilizará. O mesmo conteúdo precisa ser ajustado de forma responsiva para vários dispositivos.

Conclusão

Tipografia e Diagramação não é apenas escolher estilos de fontes, cores, imagens quaisquer e junta-los, é necessário testes nos mais diversos dispositivos em que o leitor consuma o seu conteúdo. Muitas vezes é necessário ajustar, trocar imagens, refazer textos, trocar cores, a fim de chegar ao ponto desejado.

CRÉDITOS DE CONTEÚDOS E REFERÊNCIAS: