Aula 3 Terminologia da Tipografia

Prévia do material em texto

TIPOGRAFIA 
AULA 3 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Profª Naotake Fukushima 
 
 
2 
CONVERSA INICIAL 
Nas aulas anteriores, conferimos um pouco da evolução da escrita até o 
surgimento da reprodução mecânica. Essa evolução proporcionou as bases para 
os nossos sistemas de impressão, que possibilitam a impressão de textos. 
Nesta aula, vamos conhecer os truques que as letras carregam para 
harmonizar a forma e os termos que envolvem a tipografia, que, em essência, 
são os itens com os quais precisamos ter atenção a fim de distinguir uma fonte 
da outra e, também, para ajudar nos critérios de escolha de uma fonte para uma 
determinada peça gráfica. No final, iremos colocar em prática a visualização dos 
truques da anatomia das fontes. 
CONTEXTUALIZANDO 
A tipografia é uma área cheia de detalhes que muitas vezes são sutis para 
os olhos não treinados. No entanto, à medida que vamos nos familiarizando, 
percebemos que são bem ricos em detalhes. Perceber esses detalhes é um 
aprendizado que ajuda na formação do design. Nesta aula, vamos nos 
aprofundar nesses detalhes que servirão para outras áreas do design como um 
todo. 
Por trás de uma fonte existe a pessoa que desenhou e se dedicou para 
torná-la realidade. Matthew Carter é um desses indivíduos que dedicou a sua 
vida à tipografia. Ele desenhou muitas das fontes com as quais o designer se 
depara no dia a dia, como a Verdana, a Georgia e Bell Centennial, entre outras. 
Saiba mais 
Em 2014, Matthew Carter participou da conferência TED (Technology; 
Entertainment; Design) que está disponível em: 
. Vale a pena conferir! 
TEMA 1 – COMPENSAÇÕES VISUAIS NA TIPOGRAFIA 
Em uma fonte existem várias compensações visuais que acontecem com 
o objetivo de se criar uma harmonia visual. Os diversos tipos de compensações 
são comuns em várias artes e no design. Estes recursos foram utilizados nas 
colunas da Grécia Antiga, por exemplo, as quais são construídas ligeiramente 
curvadas, com um ligeiro engrossamento no meio, para que, quando vistas de 
 
 
3 
longe, não parecessem tortas. Tal recurso também foi usado na escultura Davi, 
de Michelangelo, que foi projetado com a parte superior ligeiramente maior, para 
que, quando visto de baixo, não passasse a sensação de uma escultura 
desproporcional. Na realidade, o escultor distorceu a figura para que o 
espectador tivesse uma sensação mais harmoniosa. 
Figura 1 – Colunas abauladas que de longe parecerem retas 
 
Crédito: Konoplytska/Shutterstuck. 
Os princípios utilizados na tipografia podem ser entendidos como fruto de 
ilusão de ótica, pela qual estamos cercados. 
Figura 2 – Ilusão de óptica. As duas hastes amarelas são do mesmo tamanho, 
mas pelo contexto, parecem ser de medidas diferentes 
 
Crédito: Neslihan Gorucu/Shutterstock. 
 
 
4 
A seguir, vamos conferir algumas dessas compensações visuais comuns 
na tipografia. 
Figura 3 – Compensações visuais 
 
 
 
Fonte: Fukushima, 2021. 
1. Assimetrias verticais; 
2. As caixas altas devem ser mais escuras que as caixas baixas; 
3. Desencontros das diagonais; 
4. A abertura de ‘v’ é mais larga que a do ‘w’; 
5. Espessuras que variam mesmo em fontes bem geométricas; 
6. As alturas das barras do “B”, “R” e “P” são diferentes; 
7. Serifas têm tamanhos diferentes e assimétricas; 
8. Funilamento nas junções; 
9. Elementos retangulares e redondos têm medidas distintas. 
Os truques utilizados nas fontes podem ser transpostos para as 
composições também. Caso haja o desejo de posicionar um elemento no meio 
de uma página, deve-se posicioná-lo no centro óptico. 
 
 
 
5 
Figura 4 – Texto no centro geométrico e centro óptico 
 
Fonte: Fukushima, 2021. 
Como nos exemplos acima, na tipografia, para se buscar uma maior 
harmonia formal, lançamos mão desses recursos. 
TEMA 2 – TERMINOLOGIA DA TIPOGRAFIA 
2.1 Para que conhecer os termos? 
O estudo da anatomia e terminologia das letras serve como sensibilização 
do olhar para as letras. Um exercício interessante é fazer a comparação das 
letras focando em algum de seus elementos particulares. Assim, analisar e se 
familiarizar com a contra forma da letra pode servir de inspiração para a criação 
de uma peça gráfica com mais facilidade. 
Figura 5 – Similaridade do formato do acento com o pinhão, que é típico da 
região, para comunicar o sotaque de Curitiba 
 
Fonte: Fukushima, 2020. 
Os termos são, em essência, elementos que ajudam a direcionar os 
nossos olhares para entender onde estão as diferenças entre uma fonte e outra. 
Além disso, eles nos ajudam “a aprender a utilizar as fontes” (Scaglione, 2014). 
 
 
6 
O uso adequado dos termos são importantes para podermos entender 
onde estão as diferenças entre uma fonte e outra. 
2.2 Terminologia de A–D 
A lista serve como uma base para iniciar o aprendizado a fim de apreciar 
uma fonte, principalmente para reconhecer as características que a torna única 
e, com isso, auxiliar na escolha de uma fonte adequada para cada trabalho. 
Figura 6 – Resumo da terminologia 
 
Fonte: Fukushima, 2021. 
• Alfabeto: representa o conjunto de letras de uma língua. São os sinais 
estabelecidos para representar letras, fonemas ou palavras; 
• Altura das capitais: é o tamanho da letra “M” maiúscula; 
• Altura de x ou olho médio: representa a altura das letras minúsculas, 
sem considerar as descendentes nem as ascendentes das letras. A 
relação entre altura nominal e altura do x é particularmente importante 
para a sensação do tamanho da letra; 
• Altura nominal: é o tamanho da letra que compreende a distância entre 
o seu extremo superior e o seu extremo inferior; 
• Ascendentes: são partes das letras que estão acima da altura do x ou 
olho médio do tipo; 
• Barras ou troncos: são os elementos horizontais/traços das letras; 
• Barrigas ou panças: são os elementos (traços) curvos das letras; 
• Body type, book type ou simplesmente book: servem para composição 
de blocos de textos. Na escolha de fontes para esta finalidade, é sempre 
bom considerar que a família de tipos possua algumas variações 
essenciais: bold, bold itálico, itálico e versaletes. O oposto do Body type é 
o Display type. 
 
 
7 
Figura 7 – Na figura, as letras dos títulos são as Display type e os textos foram 
compostos em Body Type 
 
Crédito: Zdanil/Shutterstock. 
• Braços: são os elementos/traços oblíquos que aparecem na metade 
superior de letras como o “K” e o “X”; 
• Brancos, contra formas ou contra grafismos: são as áreas entre as 
letras, espaços internos ou externos das letras. Pode ser também as 
áreas entre as letras numa palavra, ou seja, qualquer espaço que não seja 
as letras. 
Figura 8 – Exemplo de uso da contra forma para criar uma peculiaridade em uma 
palavra. Nesse caso, pode ajudar na ênfase 
 
Fonte: Fukushima, 2021. 
• Caixa (caixa de tipos): era literalmente onde ficavam armazenados os 
tipos. As letras maiúsculas eram guardadas na parte superior e as 
maiúsculas na parte inferior. As denominações de “caixa alta” e “caixa 
baixa” vêm desta disposição das letras. 
 
 
8 
Figura 9 – Os tipos móveis acomodados em caixas 
 
Crédito: Iiipheygeniy/Shutterstock. 
• Capitais: são as maiúsculas de um alfabeto; 
• Capitulares: são as letras grandes que servem para início de capítulo e 
geralmente tem uma função ornamental. Denominam-se de versais ou 
letras iniciais (drop caps). 
Figura 10 – Exemplo de uma capitular com o S maior. Já vimos este recurso (de 
uma maneira muito mais decorativa) na Bíblia de Gutemberg 
 
Crédito: Gnizay/Shutterstock. 
• Contraste: representa a diferença entre as espessuras das partes 
grossas e finas de um tipo. Geralmente esses contrastes vêm da 
transposição do efeito de uma caneta chata. 
 
 
9 
Figura 11 – Uma letra desenhada com caneta chata. Muitas fontes trazem os 
traços resultantes do uso dessas canetas como base 
 
Fonte: Fukushima,2021. 
• Corpo: é o termo que utilizamos para especificar o tamanho de um tipo, 
o qul é especificado em pontos; 
• Descendentes: são as partes abaixo da linha base da fonte; 
• Display type: são tipos que servem para títulos ou para finalidades 
decorativas em textos curtos. 
Figura 12 – Exemplo de fonte que serve para título por chamar a atenção, mas 
que para leitura de um texto mais longo não é adequada 
 
Crédito: Munerf.std/Shutterstock. 
 
 
 
10 
TEMA 3 – TERMINOLOGIA DE E–H 
• Entrelinha ou leading: é o espaço entre as linhas em um bloco de texto. 
Considera-se a medida entre a linha de base até a seguinte linha de base; 
• Espaçamento: considera os espaços entre as palavras de uma linha; 
• Espacejamento: considera os espaços existentes entre as letras de uma 
palavra. Pode ser monoespaçado, caso em que os espaços são iguais 
entre os caracteres; 
• Estilo: para saber mais a respeito deste termo, ver capítulo sobre o 
assunto; 
• Família de tipos: são o conjunto dos estilos de um tipo, podendo ser thin, 
light, bold, medium, italic, condensed, extended, outline etc. Para que seja 
considerada uma família, as fontes devem apresentar semelhanças 
formais que as unificam, tais como a mesma altura de x, mesmo stress, 
mesmos arremates, entre outras. 
Para uma composição de um texto de livro simples, como um romance, 
geralmente se seleciona uma fonte com um peso regular e uma variação bold 
com bom contraste visual entre elas. Para completar, a fonte deve ter as itálicas 
de cada um desses estilos e a versão versalete da mesma. 
Fonte é um termo que vem do latim fundere (fundir) e deriva da técnica de 
confecção de tipos em metal. Uma fonte é o conjunto dos caracteres que incluem 
maiúsculas, minúsculas, números e sinais em um único tamanho de tipo. Em 
uma fonte digital, no entanto, possui mais de um corpo. As fontes tipográficas 
geralmente possuem de 90 a 150 caracteres dependendo da variedade de sinais 
de pontuação, numerais, frações etc. Mas podem ter outros caracteres, tais 
como ligaduras, sinais matemáticos, acentuação estrangeira e sinais 
monetários. 
 
 
11 
Figura 13 – Conjunto de fontes minimamente necessárias para compor um livro. 
No exemplo abaixo, a superfamília gratuita do Google “Noto” em versão sans 
(sem serifa) e Serif 
 
Fonte: Fukushima, 2021. 
• Hastes, fustes ou troncos: são os elementos verticais das letras que são 
os traços; 
• Hifenização: é a separação das palavras que ficam no final de uma linha 
de texto utilizando os hífens (-) para continuar a palavra na linha seguinte. 
Servem para que não fiquem espaços brancos entre as palavras; 
• Hitting: é o processo de pós-produção da criação de uma fonte, no qual 
se ajusta a aparência das letras para corpos pequenos. Este é um serviço 
realizado por empresas especializadas, que aprimoram o desempenho de 
uma fonte na tela do computador e celular. 
Figura 14 – Visualização dos pixels da tela, sem o Hitting, a visualização de 
fontes pequenas da tela fica prejudicada. 
 
Crédito: Nau Nau/Shutterstock. 
 
 
12 
TEMA 4 – TERMINOLOGIA DE K–Z 
• Kerning: é o ajuste que se faz entre o espaço entre um determinado par 
de letras. É um ajuste fino e, muitas vezes, sutil, mas proporciona melhor 
percepção dos caracteres e da legibilidade da linha de texto, 
principalmente quando se trata de títulos. 
Figura 15 – Exemplo de manipulação do Kerning 
 
Fonte: Fukushima, 2021. 
A maioria das fontes já vem com o kerning ajustado entre as várias 
combinações, mas, muitas vezes, as combinações precisam ser ajustadas 
individualmente. 
• Letra: deriva do latim littera. É a denominação para cada um dos sinais 
gráficos que compõem uma fonte; 
• Ligatura: é a fusão de duas ou mais letras, que se juntam formando um 
desenho único. O símbolo arroba, na sua origem, veio de uma ligatura da 
letra “a” com a letra “t”. Assim como o “&” chamado de “e comercial” 
("ampersand") vem da ligatura entre a letra “e” e a letra “t”. 
 
 
 
13 
Figura 16 – Variação da letra “e comercial”. Em algumas fica muito evidente a 
sua origem 
 
Crédito: Artoptimum/Shutterstock. 
Figura 17 – Exemplo de ligaturas na fonte Playfair Display 
 
Fonte: Fukushima, 2021. 
• Linha de base: seria uma linha hipotética na qual se apoiam as letras. 
Note que em várias letras ela não coincide com o limite inferior da letra. 
Figura 18 – Exemplo de linha de base 
 
 
 
14 
• Pernas: representam os traços (elementos) inclinados que ficam na parte 
inferior de uma letra, como nos casos das letras “k” e da letra “x”; 
• Rabos: representam as terminações de letras, como na letra “Q”; 
• Serifas: são os terminais de uma letra e podem ser chamados também 
de remates ou filetes. As letras sem serifas são chamadas de Sans Serif 
ou Grotescas; 
• Stress ou ênfase: considera a inclinação nos eixos verticais da letra e é 
uma das formas de caracterizar uma letra. 
Figura 18 – Tipo 
 
Fonte: Fukushima, 2021. 
 
Crédito: Graeme Dawes/Shutterstock. 
• Tipo (type): vem da palavra grega typos e significa cunho, molde, modelo. 
Em um processo de impressão tipográfico, o tipo é uma peça de metal ou 
 
 
15 
de madeira em relevo. São as letras do alfabeto para escrita ou podem 
ser chamadas de caracteres; 
• Tipo (typeface): é também utilizado para se referir ao design da letra. A 
sutileza muitas vezes está nos detalhes; 
• Typedesign e/ou Typedesigner: é a área específica da tipografia e do 
profissional que desenha tipos; 
• Tracking: é o nome do parâmetro de ajuste de espaço entre todas as 
letras de uma palavra ou de um texto como um todo; 
• Versaletes (small caps): são as letras maiúsculas, mas na altura das 
letras minúsculas (ver figura 13). 
TEMA 5 – AULA DE PRÁTICA – ANATOMIA DE UMA FONTE 
Vamos colocar em prática e conferir as compensações visuais existentes 
nas fontes. Utilize um programa de vetor, como o Adobe Illustrator, Corel Draw 
ou Inkscape. Vamos conferir alguns dos truques do tema 1. 
5.1 Etapa 1 – Prepare a base 
Para que no final você possa montar uma apresentação com as 
descobertas, segue uma sugestão de tamanho para o trabalho. Crie uma folha 
de trabalho com largura de 160 mm x 90 mm (proporcional à tela de 16:9) e crie 
uma guia base na altura de 20 mm da base. 
Figura 19 – Base para o exercício 
 
Fonte: Fukushima, 2021. 
 
 
 
16 
5.2 Etapa 2 – Encontrar as compensações 
A sugestão é seguir os itens apresentados no tema 1. 
Na aula, vamos ver o passo a passo, que é uma sugestão de como podem 
ser conferidas as compensações. Tente averiguar e demonstrar as outras 
compensações por contra própria. 
Segue como foi feita a evidenciação da assimetria vertical. Nesse caso, 
escolhemos a letra “E”, da Times New Roman, fonte desenhada em 1931, que 
faz parte das normas ABNT para trabalhos acadêmicos; e a letra “S” com a fonte 
Arial de 1982, também utilizada nas normas e nesta aula, para conferir as 
assimetrias. 
Figura 20 – Etapas do exercício 
 
 
Fonte: Fukushima, 2021. 
1) Coloque na linha base a fonte escolhida com corpo 150 e coloque o nome 
da fonte em cima das letras; 
2) Trace uma linha de referência nas extremidades e uma no meio da barra 
horizontal; 
3) Meça as distâncias entre as linhas; 
4) Nesse caso, identificamos o segmento superior de X e inferior de Y para 
anotar Xconsciência desses truques é essencial para quem quer criar uma 
fonte, mas não só, pois esta sensibilidade é comum para a criação de uma peça 
gráfica. No final, gere um PDF com as páginas. 
Saiba mais 
A área do conhecimento que estuda essas compensações é conhecida 
como Percepção visual ou Gestalt. O conhecimento ligado à composição é um 
estudo que ajuda a entender e aprofundar ainda mais. Busque livros dessa área, 
como o Sintaxe da Linguagem Visual (Dondis, 1997) ou o Novos Fundamentos 
do Design (Lupton; Philips, 2014), já utilizados na disciplina de composição, e 
identifique as intersecções dos ensinamentos contidos naquela disciplina com a 
tipografia. 
TROCANDO IDEIAS 
Disponibilize os achados dos truques de compensação visual encontrados 
nas fontes e compare com os colegas para entender quanto os designers de 
tipos se empenharam para alcançar a harmonia formal das letras. 
NA PRÁTICA 
Escolha diversas fontes do computador de mesmo corpo, mas com a 
proporção da altura nominal e altura do x e componha um texto qualquer. 
Imprima-os e compare. Veja qual tem maior presença em termos de tamanho, 
 
 
18 
qual é melhor para ler, qual confere maior casualidade ou seriedade etc. Este 
conhecimento é muito útil na hora de diagramar um livro e direcionar um projeto 
gráfico. Pode-se alcançar um projeto mais delicado ou mais robusto em termos 
de sensação visual utilizando-se do mesmo tamanho de letra. 
FINALIZANDO 
Os termos, na sua maioria, são fáceis de assimilar, tendo em vista que 
descrevem as características e já estão no vocabulário do cotidiano. Assim, o 
importante é prestarmos atenção nas letras e assimilarmos as peculiaridades em 
cada fonte para que tal conhecimento possa ser útil na hora de escolher a fonte 
para alguma peça gráfica. 
Nesta aula, passamos pelos termos mais importantes sobre a tipografia e 
exercitamos a identificação de fontes, evidenciando estas com auxílio de linhas 
guias etc. Na aula seguinte, vamos classificar e conhecer os estilos das letras 
para conhecermos ainda mais o universo da tipografia. Comece a fazer uma 
coleção das fontes que gosta para seus trabalhos. 
 
 
 
19 
REFERÊNCIAS 
DONDIS, D. A. Sintaxe da Linguagem Visual. São Paulo: Martins Fontes, 1997. 
FONTOURA, A.; FUKUSHIMA, N. Vade-mécum de tipografia. 2. ed. Curitiba: 
Insight, 2012. 
HENESTROSA, C.; MESEGUER, L.; SCAGLIONE, J. Como criar tipos: do 
esboço à tela. Brasília: Estereográfica, 2014. 
LUPTON, E.; PHILIPS, J. C. Novos Fundamentos do Design. São Paulo: 
Cosac Naify, 2014. 
ROCHA, C.; MARCO, T. de (Ed.). Tupigrafia 2. São Paulo: Oficina Tipográfica 
de São Paulo, 2006. 
	Conversa inicial
	Contextualizando
	Figura 1 – Colunas abauladas que de longe parecerem retas
	Figura 2 – Ilusão de óptica. As duas hastes amarelas são do mesmo tamanho, mas pelo contexto, parecem ser de medidas diferentes
	Figura 3 – Compensações visuais
	Fonte: Fukushima, 2020.
	Fonte: Fukushima, 2021.
	Figura 7 – Na figura, as letras dos títulos são as Display type e os textos foram compostos em Body Type
	Figura 8 – Exemplo de uso da contra forma para criar uma peculiaridade em uma palavra. Nesse caso, pode ajudar na ênfase
	Fonte: Fukushima, 2021.
	Figura 9 – Os tipos móveis acomodados em caixas
	Figura 10 – Exemplo de uma capitular com o S maior. Já vimos este recurso (de uma maneira muito mais decorativa) na Bíblia de Gutemberg
	Figura 11 – Uma letra desenhada com caneta chata. Muitas fontes trazem os traços resultantes do uso dessas canetas como base
	Fonte: Fukushima, 2021.
	Figura 12 – Exemplo de fonte que serve para título por chamar a atenção, mas que para leitura de um texto mais longo não é adequada
	Figura 13 – Conjunto de fontes minimamente necessárias para compor um livro. No exemplo abaixo, a superfamília gratuita do Google “Noto” em versão sans (sem serifa) e Serif
	Fonte: Fukushima, 2021.
	Figura 14 – Visualização dos pixels da tela, sem o Hitting, a visualização de fontes pequenas da tela fica prejudicada.
	Figura 15 – Exemplo de manipulação do Kerning
	Fonte: Fukushima, 2021.
	Fonte: Fukushima, 2021.
	Fonte: Fukushima, 2021.
	Fonte: Fukushima, 2021.
	Trocando ideias
	Na prática
	FINALIZANDO
	REFERÊNCIAS