Tipografia — Um guia completo sobre o que é e como utilizar em seus projetos.
Introdução
Tipografia é um estudo que cria e organiza tipos, ou seja, caracteres alfabéticos, numéricos e outros símbolos, para produzir um texto legível e esteticamente agradável. A tipografia envolve o design e a seleção de fontes, o espaçamento entre letras e linhas, a formatação do texto e a disposição geral dos elementos em uma página ou em qualquer outro meio de comunicação visual.
A tipografia desempenha um papel fundamental no design gráfico, na publicidade, na editoração eletrônica, na web e em muitas outras áreas relacionadas à comunicação visual. Ela pode influenciar a percepção e a compreensão de um texto, transmitindo emoções, estilos e intenções por meio da escolha de tipos, tamanhos, cores e layout.
Nesse artigo, vamos falar sobre a história da tipografia, termos utilizados, classificação tipográfica, construção textual e recomendações de uso.
História
A história da tipografia remonta aos primórdios da comunicação escrita. Mas antes da escrita ser criada, os povos pré-históricos desenvolviam outras técnicas de registro de suas atividades cotidianas, como a pintura rupestre, comumente feita na parede das cavernas em que habitavam.
Após esse período, várias culturas desenvolveram sistemas de escrita e métodos de reprodução de textos. Exemplos incluem os hieróglifos egípcios, a escrita cuneiforme na Mesopotâmia e os caracteres chineses.
Antes da invenção da imprensa, os manuscritos eram copiados à mão por escribas, servos geralmente de nobres de realezas. Durante a Idade Média, os monges copistas eram responsáveis pela produção de livros em mosteiros, usando caligrafia e iluminuras para decorar manuscritos.
Os chineses foram os primeiros a inventar um sistema tipográfico, sendo o seu inventor Pi Shêng, em meados de 1040 d.C. Os tipos eram feitos em argila, madeira e/ou bronze, e eram dispostos numa tábua chamada huóban (tábua viva). Mas em meados do século XV, Johannes Gutenberg se tornou um grande inventor ao desenvolver a prensa móvel e introduzir o tipo móvel de metal, permitindo a produção em massa de livros. A Bíblia de Gutenberg, impressa por volta de 1455, é um dos primeiros exemplos conhecidos de impressão em massa.
Durante o Renascimento, houve um ressurgimento do interesse pela cultura clássica e uma maior ênfase na clareza e legibilidade dos textos. Tipógrafos renomados, como Aldo Manúncio (1449–1515), desenvolveram fontes baseadas na caligrafia humanista, ou seja, que imita a forma como nossas mãos escrevem. Logo após, a Revolução Industrial trouxe avanços na fabricação de tipos móveis e na produção de impressão. Novas tecnologias, como a linotipo e a monotipo, foram introduzidas para aumentar a eficiência na composição de texto, tornando as impressões mais acessíveis economicamente.
O século XX testemunhou uma grande diversidade de estilos tipográficos. Desde o modernismo com a Bauhaus e o movimento suíço até a era digital, com o advento dos computadores e softwares de design gráfico, a tipografia passou por várias transformações e experimentações, popularizando as escritas geométricas e sem serifa. A Bauhaus produzia seus produtos sob o desejo de que, não só as impressões, como todos os produtos criados industrialmente, fossem funcionais e acessíveis a todas as pessoas.
No fim do século XX, com a popularização da internet e a digitalização de mídias, a tipografia assumiu um papel ainda mais importante no design de interfaces e comunicação online. Novas fontes digitais foram desenvolvidas, e os designers passaram a ter mais opções e flexibilidade em suas criações. Atualmente, a tipografia continua a evoluir, com designers explorando novas formas de expressão e adaptação às demandas de um mundo cada vez mais digital e visualmente orientado.
Termos utilizados na tipografia
Na tipografia, existem vários termos específicos que os designers e profissionais da área usam regularmente para descrever diferentes aspectos do design e da composição tipográfica. Essa lista foi feita para auxiliar quem é iniciante ou tem certa experiência, mas ainda não memorizou todas as nomenclaturas.
Da tipografia:
- Glifo: são os signos alfabéticos que compõem o alfabeto, como letras e caracteres.
- Família tipográfica: É o conjunto de glifos que possuem as mesmas propriedades de desenho, independentemente das suas variações (peso, inclinação, corpo).
3. Fonte: Um conjunto completo de caracteres alfabéticos, numéricos e simbólicos de uma família tipográfica.
4. Caixa Alta (Maiúsculo): Letras maiúsculas ou caracteres em caixa alta.
5. Caixa Baixa (Minúsculo): Letras minúsculas ou caracteres em caixa baixa.
6. Ascendente e Descendente: As partes de uma letra que se estendem acima (ascendente) ou abaixo (descendente) da altura x.
7. Grau de Inclinação (Oblíquo): Uma versão inclinada de uma fonte, usada para fins de ênfase ou diferenciação. O termo “itálico” é usado de forma incorreta, pois diz respeito aos tipos cursivos.
Das medidas:
- Altura da Linha: O espaço vertical entre linhas de texto. É medido da linha de base de uma linha de texto à linha de base da próxima.
- Altura do Caractere: Refere-se à altura das letras maiúsculas em uma fonte, medida a partir da linha de base até o topo das letras.
- Largura do Caractere: A largura geral de um caractere.
- Kerning: O ajuste do espaço (kern) entre pares específicos de caracteres para melhorar a legibilidade e a estética.
- Tracking: O ajuste uniforme do espaçamento entre todos os caracteres em uma linha ou bloco de texto.
- Ponto (pt): Uma unidade de medida usada para especificar o tamanho da fonte e outros elementos tipográficos. Um ponto equivale a 0,35 milímetros.
Dos detalhes tipográficos:
- Anatomia: Os tipos são compostos por uma série de elementos: bojo, haste, barra, perna, serifa, oco, cauda, terminal, ombro, vértice, ligação, orelha, gancho, junção, espora, incisão, abertura, espinha e braço. A imagem a seguir contém cada parte da anatomia dos caracteres citada no texto.
2. Ligaduras: As conexões de dois ou mais caracteres são conhecidas como ligaduras. Em português, a mais comum é a FI, porém diversas outras são utilizadas (como st, ae, oe, ff, ij, etc). Essas ligaduras ajudam a aprimorar a legibilidade e a estética das palavras.
Essas são apenas algumas das nomenclaturas e configurações existentes na tipografia, e há muitos outros que os designers conhecem para descrever e ajustar a aparência e o layout do texto em um projeto.
Classificação das tipografias
As tipografias, ou fontes tipográficas, podem ser classificadas de várias maneiras, levando em consideração diferentes critérios. Uma das classificações mais comuns é baseada em características como o estilo, a forma e a estrutura das letras. Aqui estão algumas das principais classificações tipográficas:
- Serifada: As serifas são pequenas linhas ou traços adicionados às extremidades das letras. As fontes serifadas são frequentemente utilizadas para dar uma aparência mais tradicional, clássica e formal. Estão classificadas entre humanistas, transicionais, modernas e mecânicas ou egípcias. Exemplos incluem Times New Roman, Georgia e Arvo.
2. Não serifada: São fontes que não possuem serifas, o que lhes entrega uma aparência mais moderna, limpa e informal. São muito utilizadas em projetos de design contemporâneo e/ou digital. Estão classificadas entre grotescas, gothic, humanistas, geométricos e transicionais. Exemplos incluem Arial, Helvetica e Calibri.
3. Monoespaçadas: Nestas fontes, cada caractere ocupa o mesmo espaço horizontal. Elas são frequentemente usadas em programação, design de código-fonte e emulam a aparência de máquinas de escrever. Exemplos incluem Courier New, Noto Sans Mono e Monaco.
4. Manuscrito: Essas fontes imitam a escrita à mão, variando em estilo de casual a formal. Elas são usadas para criar um ar de autenticidade e informalidade. Exemplos incluem Comic Sans, Noteworthy e Segoe Script.
5. Decorativas (Display): As fontes decorativas são projetadas para chamar a atenção e são frequentemente usadas em títulos, logotipos e materiais publicitários. Elas vêm em uma variedade de estilos e podem ser altamente estilizadas. Exemplos incluem Impact, Cooper Black e Lobster.
Essas são apenas algumas das principais classificações tipográficas. Dentro de cada categoria, existem diversas variações e subcategorias, refletindo a diversidade e a versatilidade das fontes tipográficas disponíveis para designers e criadores.
Construção textual
Alinhamento
O alinhamento textual refere-se à maneira como o texto é posicionado horizontalmente em relação a uma margem. O alinhamento desempenha um papel importante no design de documentos, materiais impressos e páginas da web, afetando a legibilidade, a estética e a clareza visual do conteúdo.
Segue os principais tipos de alinhamento textual:
Alinhamento à Esquerda: Nesse tipo de alinhamento, o texto é posicionado junto à margem esquerda, com as bordas direitas do texto formando uma linha irregular. Este é o tipo de alinhamento mais comum em idiomas ocidentais, onde a leitura tradicionalmente começa da esquerda para a direita.
Alinhamento à Direita: O texto é posicionado junto à margem direita, com as bordas esquerdas formando uma linha irregular. O alinhamento à direita é menos comum em textos corridos, pois nas línguas em que a leitura é da esquerda para a direita, esse tipo de alinhamento força o olhar a encontrar uma posição inicial de leitura. Esse alinhamento é frequentemente usado em títulos, cabeçalhos, notas, citações ou em idiomas que são lidos da direita para a esquerda.
Alinhamento Centralizado: O texto é centralizado horizontalmente em relação à largura da área de texto. Isso cria uma aparência simétrica, onde as linhas de texto têm espaços iguais à esquerda e à direita. O alinhamento centralizado é comumente usado em títulos, cabeçalhos, cartões e convites, quando se quer transmitir formalidade e decoro.
Alinhamento Justificado: Nesse tipo de alinhamento, o texto é esticado para preencher toda a largura da área de texto, resultando em margens retas tanto à esquerda quanto à direita. Isso é feito adicionando espaços entre as palavras e, às vezes, ajustando ligeiramente o espaçamento entre as letras para criar uma aparência uniforme. O alinhamento justificado é comumente usado em revistas, jornais e documentos formais. Deve-se tomar cuidado ao utilizá-lo, pois esse tipo de alinhamento cria “caminhos-de-rato”, que pode atrapalhar a leitura do usuário — pode-se usar hifenização, para quebrar palavras longas, ou tracking, para ajustar as linhas — , assim como o tamanho das linhas, que não devem ser muito longos, para não tornar a leitura cansativa.
Cada tipo de alinhamento tem suas próprias vantagens e desvantagens, e a escolha do alinhamento apropriado depende do contexto, do tipo de conteúdo e dos objetivos de design.
Parágrafo
Há também detalhes de construção textual importantes que podem ser usados no design, como nos exemplos a seguir:
- Capitular: É a ênfase que se cria para a letra inicial do começo de um capítulo ou texto, aumentando-se o tamanho da letra inicial do parágrafo.
- Indentação ou entrada: É um avanço de texto no início do parágrafo. Comumente se dá à esquerda e na primeira linha do parágrafo.
- Recuo: É o oposto da indentação. A primeira linha fica recuada em relação ao restante do parágrafo.
Recomendações de uso
Entendendo a identidade do seu projeto
É importante entender a identidade e os objetivos do seu projeto antes de começar a trabalhar com tipos, considerando-se o público-alvo, o propósito do projeto e a mensagem que deseja transmitir. Além disso, é essencial ter em mente os princípios básicos de design e estética — a tipografia deve complementar e reforçar a mensagem visual do seu projeto.
Imagine que você está criando um post ou capa de revista voltada ao público automobilístico, e lhe é apresentado esses dois tipos na imagem a seguir. Qual você escolheria?
Acredito que você escolheu a primeira opção, pois o seu público é voltado ao automobilístico, assim você não gostaria — ou necessita — de transmitir uma mensagem delicada ou decorativa, mas sim robusta, firme e moderna. Logo a primeira opção é a melhor. Entende agora quando falamos em identidade? Então reflita, o que você quer transmitir?
Escolhendo as fontes adequadas
A escolha das fontes é um dos aspectos mais importantes do design tipográfico. É fundamental selecionar fontes que sejam adequadas ao contexto do seu projeto. Considere o estilo e o tom que você deseja passar.
Além disso, leve em consideração a legibilidade e leiturabilidade das fontes. Legibilidade é a capacidade de reconhecer e distinguir as letras e os caracteres facilmente, enquanto a leiturabilidade se refere à facilidade de leitura e compreensão de textos, como frases e parágrafos. Ambas as denominações podem ser semelhantes, mas não são a mesma coisa. Um tipo pode ser legível, mas não ter uma leiturabilidade boa, por exemplo:
Certifique-se de que o texto seja facilmente legível em diferentes tamanhos e formatos. Evite fontes excessivamente decorativas ou com kerning inadequado, pois isso pode comprometer a leitura do conteúdo.
Verifique também para qual propósito você quer construir esse projeto. É para “ver”, ou seja, voltado a uma peça publicitária que exija apelo visual para transmitir sua ideia de forma impactante? Ou é para “ler”, ou seja, voltado para textos longos e que exija precisão na leitura, como jornais, blogs etc?
Caso seja a primeira opção, você não precisa se atentar se possui leiturabilidade, mas sim legibilidade. A liberdade de criação é maior e é provável que você utilize fontes do tipo fantasia, cursiva ou manuscrita.
Caso seja a segunda opção, você precisará de um tipo com alto nível de legibilidade e leiturabilidade. Utilize tipos tradicionais que funcionam bem em corpos pequenos e em blocos de texto, como as fontes serif, como Roboto Serif, ou sans serif, como a Helvetica.
Criação de hierarquia visual
A hierarquia visual é fundamental para guiar o leitor na leitura do seu texto. Atentando-se aos diferentes tamanhos, pesos e estilos de fonte, você pode destacar elementos importantes e criar uma hierarquia clara. E é sobre isso que vamos falar mais adiante.
O espaçamento entre linhas e parágrafos desempenha um papel importante na legibilidade e na organização visual do texto. Observe se o espaçamento é adequado e proporcional, evitando que as linhas fiquem muito próximas ou muito distantes umas das outras. Veja o exemplo abaixo que segue essa diretriz.
Importante enfatizar a criação e a repetição de estilo de tipo, tanto para estabelecer hierarquia, como para criar identidade visual. Utilize variações em determinados estilos de texto, como títulos, subtítulos, citações e corpo de texto. E repita o mesmo estilo, como no exemplo abaixo.
É importante ter cuidado no contraste das cores entre o tipo e o suporte/fundo e tamanho da fonte. Caso a fonte esteja “fundindo” com o fundo, ou seja, com tons parecidos, ou num tamanho muito pequeno, pode prejudicar a legibilidade.
Observe na imagem a seguir como o excesso pode tornar seu texto confuso. Evite excesso de tipos em sua composição, pois isso pode causar confusão visual e comprometer a coesão do design. Lembre-se de que a tipografia desempenha um papel fundamental na comunicação visual e na expressão da identidade do seu projeto.
Também evite linhas muito longas ou muito curtas. Linhas longas tornam cansativa a leitura e faz com que o usuário se desfoque ao sair de uma linha para a outra, enquanto as curtas obrigam os olhos a se moverem rápida e bruscamente, causando desconforto. Como alternativa, varie entre 40 a 72 caracteres por linha, ou entre sete a 14 palavras por linha, considerando as características do tipo que você usará na diagramação do texto.
Ponderando o contexto de uso
Ao escolher e utilizar a tipografia, é importante levar em consideração o contexto de uso do seu projeto, observando-se o meio de comunicação em que o texto será apresentado, seja impresso ou digital. Por exemplo, em materiais impressos, é importante considerar o tipo de papel e a qualidade de impressão para garantir uma reprodução adequada das fontes.
Além disso, pondere as restrições técnicas e as limitações de legibilidade e leiturabilidade de diferentes dispositivos e telas. Certifique-se de que as fontes escolhidas sejam legíveis em diferentes tamanhos de tela e em diferentes condições de iluminação.
Experimentação e revisão
Lembre-se de que a tipografia é uma forma de expressão visual e que a experimentação é fundamental, então não tenha medo de testar diferentes combinações de fontes, tamanhos e estilos. Faça revisões regulares e solicite feedback para garantir que a tipografia esteja cumprindo os objetivos do seu projeto.
Isso tudo são boas práticas, então quebre as regras caso seja necessário
Uma premissa fundamental que você deve ter em mente é que não há certo ou errado. O que funciona bem para um projeto pode não funcionar para outro, pois cada projeto é único, possui seu próprio público, objetivo e suporte. É importante conhecer as regras e elas certamente serão úteis, mas você não deve se prender a elas. Não devemos limitar nossa criatividade. Portanto, quebre as regras sempre que julgar necessário para alcançar seu objetivo de comunicação.
Conclusão
A tipografia é um estudo que une técnica e criatividade, essencial para transmitir mensagens e emoções. Cada detalhe contribui para a história contada ou a ideia criada. Dominar a tipografia requer estudo, prática e atenção aos detalhes. Como a linguagem, a tipografia está sempre evoluindo, com novas tendências e tecnologias, tornando-a um campo fascinante. Ao dominá-la, você ganha uma ferramenta valiosa para expressar suas ideias e criar projetos que se comunicam efetivamente com o público. Continue estudando, praticando e criando — o mundo da tipografia te aguarda!
Referências
- ARTY, David. Tipografia: Guia Sobre Tipos — Escolhendo a fonte certa. Disponível nos seguintes links: <https://chiefofdesign.com.br/tipografia-01/> ; <https://chiefofdesign.com.br/tipografia-02/> ; <https://chiefofdesign.com.br/guia-tipografia-parte-03/>.
- FARIAS, Priscila Lena. Estudos sobre tipografia: letras, memória gráfica e paisagens tipográficas. Universidade de São Paulo — Faculdade de Arquitetura e Urbanismo. Junho de 2016. Disponível em: <https://www.teses.usp.br/teses/disponiveis/livredocencia/16/tde-10032017-161946/publico/farias16estudostipografia.pdf>
- RALLO, Rafael. Tipografia: como usar um dos pilares do Design Gráfico a seu favor. 18 de abril de 2018. Disponível em: <https://rockcontent.com/br/blog/tipografia/>
- Diferentes tipos de tipografia: GUIA completo para não designers. Disponível em: <https://www.bambui.ifmg.edu.br/portal/uncategorised/diferentes-tipos-de-tipografia-guia-completo-para-nao-designers/>
- MEGGS, Philip P. História do Design Gráfico. São Paulo: Cosac e Naif, 2009. Disponível em: <https://archive.org/details/livros-philip-meggs/Hist%C3%B3ria%20do%20Design%20Gr%C3%A1fico%20-%20Philip%20B.%20Meggs%20e%20Alston%20W.%20Purvis/page/n201/mode/2up>
