TIPOGRAFIA

AULA 3

Profª Naotake Fukushima

 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:
<youtube.com/watch?v=xjxyEwjG2Es>. 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

2
 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.

3
 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.

4
 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).
5
 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.

6
 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.

7
 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.

8
 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.

9
 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.

10
 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.

11
 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”.

12
 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

13
 • 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

14
 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.

15
 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 X< Y.

16
 No caso do S:

1. Duplique a letra;
2. Pinte de uma cor diferente;
3. Rotacione 180º (Nesse caso, fica evidente que a letra não é simétrica
verticalmente);
4. Para evidenciar, traçamos uma linha para dar ênfase onde o meio do
traço passa.

Fizemos esses passos cada um em uma página para facilitar a

demonstração, mas pode ser para cada tipo de compensação uma página do
arquivo. Encontre nas fontes as nove compensações e monte uma
apresentação. Pense em uma maneira de evidenciar os truques. Se desafie e
encontre outros ajustes que existem nas letras.
Ter consciê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,

17
 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.

18
 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.

19