Tipografia em Projetos Gráficos

Prévia do material em texto

Aplicação dos princípios básicos de 
diagramação, uso de cores e tipografia em 
projetos gráficos 
 
Unidade 3: Tipografia 
 
 
 
Professor: Jorge Oliveira 
 
 
 
Realização: Secretaria Geral de Educação a Distância da Universidade Federal de São Carlos 
Tipografia 
fundamentais e básicos para os 
projetos gráficos. 
Quando pensamos em Tipos/fontes é importante lembrar que a estética obrigatoriamente tem 
como objetivo proporcionar e garantir a comunicação. Em outras palavras, não adianta de nada um 
projeto gráfico com um conjunto de tipos bonitos e atraentes, mas que não permitem a leitura e 
entendimento do conteúdo.
Ao se trabalhar com tipos/fontes, pode se estabelecer três relações dinâmicas caracterizadas em:
Concordância – “a relação mais fácil e comum”.
É quando em um material gráfico, aplica-se uma mesma família de tipos, ou seja, tipos com as 
mesmas características, variando apenas tamanho, cor e outros efeitos como negrito, itálico e 
sublinhado.
Esse equilíbrio visual também pode ser estabelecido, relacionando os tipos com os outros 
elementos gráficos da composição. Por exemplo, aplica-se um tipo com traços finos juntamente com 
molduras, linhas e outros elementos gráficos também finos.
Como resultado final, cria-se uma estética calma e formal. É importante salientar que este 
resultado não é indesejado, ele apenas não proporciona surpresas ao leitor/observador.
são as atividades e processos relacionados a criação e ou estudos dos tipos.
Os tipos, também chamados de fontes, são elementos 
Tipografia
Observe a ficha a seguir, apesar de simples, ela revela as sensações provocadas pela
concordância :
O visual da ficha é calmo e formal, para não dizer sem graça ou comum!
Foi aplicado apenas o tipo Arial. A comunicação e o entendimento do conteúdo 
estão garantidos, entretanto, a estética não é atraente e não estabelece hierarquias nas 
informações.
Contribuindo para acentuar este visual, calmo e formal, todas as linhas nas 
frentes dos itens e na moldura ao redor do conjunto de informações possuem traços 
finos, que acompanham o traço fino do tipo.
traços finos na moldura e linhas
Conflitante – “a relação que deve ser evitada”.
É quando aplica-se dois ou mais tipos com características visuais similares, porém, visualmente 
não são nem diferentes e nem iguais, confundindo o olhar. 
Como resultado final, cria-se uma estética conflitante, induzindo à uma sensação de erro (de 
digitação, de impressão...).
Observe mais dois exemplos:
A relação concordante é o caminho mais fácil e comum e o 
resultado final sempre será formal e calmo.
A relação concordante é o caminho mais fácil e comum e o 
resultado final sempre será formal e calmo.
A seguir, observe novamente a ficha da situação anterior.
Desta vez, foram aplicados dois tipos, Arial e Avant Garde BK BT.
Talvez, se os tipos não tivessem indicados, para muitos esta ação passaria despercebida 
ou então seria sentida como um erro (você provavelmente se perguntaria: - parece que é a 
mesma fonte, mas ao mesmo tempo parece que não é! será que está certo? ou é um erro?)
As linhas nas frentes dos itens e na moldura também estão com espessuras ligeiramente 
diferentes, contribuindo para essa confusão visual.
Nas frases acima, mais uma vez está configurada uma relação concordante. Mesmo 
aumentando o tamanho do tipo ou inserindo negrito em algumas palavras, o visual formal e 
calmo se mantêm.
Mesmo sem estabelecer um contraste marcante através dos tipos, a mensagem é 
legível e a comunicação acontece sem problemas!
A relação conflitante é sempre o caminho a ser evitado, pois o 
resultado final não será positivo .
Contrastante - “a relação mais apelativa e atraente, mas nem sempre a 
mais simples de se construir”.
É quando aplica-se uma combinação de tipos com características diferentes, obtendo 
como resultado final, um projeto gráfico apelativo e atraente. 
A combinação contrastante entre tipos contribui para a comunicação, organização e 
favorece a clareza de entendimento das informações.
A relação conflitante é sempre o caminho a ser evitado, pois o 
resultado final não será positivo .
A seguir, veja como o conflito se comporta em uma frase. 
Na primeira frase, aplica-se novamente dois tipos similares e o resultado continua o 
mesmo: sensação de erro devido a semelhanças visuais entre os tipos.
Na segunda frase, a diferença por tamanho também não é suficiente para criar um 
contraste marcante. É preciso que as diferenças de tamanho entre tipos sejam evidentes. 
Dica: Não economize nos tamanhos!
Observe o exemplo da ficha, agora em uma relação contrastante.
O contraste nesta ficha é bem marcado e definido, contribui para organizar as 
informações (cria-se hierarquias) e direcionar o olhar do observador/leitor.
Foram aplicadas dois tipos, Arial e Claredon BK BT. 
Para acentuar o contraste, as linhas nas frentes dos itens e na moldura ao 
redor do conjunto de informações receberam tratamentos diferenciados nas 
espessuras, acompanhando e se relacionando com os traços dos tipos.
Dicas para aplicação de tipos/fontes
- Evite o conflito, crie Contraste e só use Concordância se não houver outra opção/tempo.
- Os erros geralmente não se dão pelas diferenças, mas sim pelas semelhanças. Fique atento a 
este detalhe!
- Os recursos para se alcançar contraste na maioria dos casos se sobrepõem. Por exemplo, em 
uma mesma frase, você poderá construir contrastes através do tamanho, do peso e da cor dos 
tipos/fontes. Nas próximas páginas iremos falar um pouco sobre estes recursos.
- Assim como foi abordado na Diagramação e nas Cores, trabalhar com Tipos exige 
experimentação. A prática mais uma vez, sensibiliza os olhos! e as ações passam a ser cada vez 
mais naturalizadas.
A relação contrastante é sempre o caminho mais inesperado e o 
resultado final causará surpresa.
A relação contrastante é sempre o caminho inusitado 
e o resultado final causará surpresa.
Para finalizar, novamente as frases. Observe-as:
Em ambas as frases, aplicou-se os tipos Arial e Clarendon BK BT.
No primeiro exemplo, manteve-se o tamanho dos tipos e o contraste é estabelecido 
exclusivamente através do peso, forma e estrutura do tipo com traços grossos frente ao tipo 
com traços finos.
No segundo exemplo, o tamanho foi alterado, o tipo com traços grossos foi aplicado 
na maioria das palavras da frase e apenas duas palavras receberam o tipo com traços finos. 
Devido a relação de peso e forma, o tipo com traços finos foi aplicado em um 
tamanho maior, a fim de evidenciar as palavras, reforçar o contraste e evitar o conflito.
ascendentes
descendentes
altura das Maiúsculas
altura x
linha de base
haste ou fuste arco cauda
pernatravessãobraço
enlace volta
orelha
rebarbaterminal
bojo, barriga ou pança
olhoolho
eixo, ênfase
Anatomia dos tipos
Para dar continuidade aos estudos sobre tipografia, iremos conhecer a anatomia dos tipos, ou 
seja, vamos analisar como eles estão estruturados.
O entendimento desta estrutura e quais as nomenclaturas que recebem cada parte, facilitará a 
compreensão das classificações e aplicações dos tipos.
Não se preocupe em decorar o nome de cada parte, o que realmente importa neste momento, é 
que você conscientize-se de que um tipo não é uma estrutura simples, mas é uma estrutura formada por 
partes diferentes e que influenciam a estética de uma composição gráfica.
Categoria de tipos
Por conta da enorme oferta (gratuita e paga) de tipos, existe a necessidade de organizá-los em 
categorias. Ao longo da história da tipografia encontraremos diferentes classificações. Entretanto, por 
uma questão didática, iremos classificá-los em seis famílias distintas, conforme apontado pelo autor 
Robin Williams, no livro Design para quem não é designer.
1 - Estilo antigo
Os tipos desta família foram criados “inspirados” na escrita à mão dos escribas que usavam 
penas para escrever. Este conjunto de fontes é altamente indicado para projetos gráficos onde haverá 
textos extensose corridos.
serifa
transição moderada 
entre traços finos e grossos
serifas das letras em 
caixa-baixa (minúsculas)
são inclinadas
ênfase na diagonal
Características
2 - Moderno
Os avanços na produção de papel e nas técnicas de impressão permitiram o surgimento de uma 
nova família de tipos, que se distanciou do estilos à mão e se aproximou de uma estética mais mecânica.
Esta família possui aspecto visual frio e moderno. Não são indicados para textos extensos e 
corridos, pois criam efeito de ofuscamento por causa dos traços finos e grossos. Entretanto, podem ser 
aplicados a títulos, subtítulos, frases curtas e palavras de chamamento/anúncio. 
Características
transição acentuada entre traços finos e grossos
serifas das letras 
são horizontais e finas
ênfase na vertical
Exemplos de tipos/fontes:
Times, Palatino, Bookman, Garamond, Baskerville, etc.
Exemplos de tipos/fontes:
Bodoni,Madrone, Nofret, Fenice, Walbaum Roman, etc.
3 - Serifa Grossa
Com o surgimento da Propaganda durante a Revolução Industrial, surgiu também uma outra 
categoria de tipos, chamados Serifa Grossa.
Esta família tem como característica principal, letras grossas com pouca ou nenhuma transição 
entre os traços finos e grossos. Os traços grossos das letras, proporciona peso para a composição gráfica 
e quando usada em textos longos acaba deixando a página mais escura. Apesar disso, esta família é 
indicada para textos extensos e corridos, pois possuem uma alta legibilidade (é muito comum encontrar 
estes tipos em livros infantis).
Características
Pouca ou nenhuma transição de traços
serifas das letras em 
caixa-baixa (minúsculas)
são horizontais e grossas
ênfase na vertical
4 - Sem Serifa
Como o próprio nome diz, eles não possuem serifa no final dos traços. A eliminação das serifas se 
deu juntamente com o desenvolvimento da tipografia e começou ser aplicada no inicio do século 20.
Nenhuma transição de traços
Não há ênfase, pois não há transição de traços
(finos e grossos)
Não há serifas
Características
Exemplos de tipos/fontes:
Gill Sans MT, Helvetica, Avant Garde, Antique Olive, Franklin Gothic Book, etc.
Exemplos de tipos/fontes:
Claredon BT, Aachen Bold, American Typewriter, Memphis New Century Schoolbook, etc
5 – Manuscrito
A variedade de tipos Manuscritos é muito grande, porém todos eles possuem como característica 
comum, a aparência de terem sidos escritos a mão.
Esta família de tipos não deve ser empregada em textos extensos e corridos, deve ser utilizada em 
poucas quantidades de textos e em ações pontuais. Também deve se evitar usar vários tipos desta 
categoria em um mesmo projeto gráfico, pois eles podem dificultar a leitura, tornando-a cansativa.
Quando usados em dimensões maiores podem assumir papel de elemento gráfico desenhado 
para o projeto. 
Exemplos de tipos/fontes:
Freestyle Script, French Script MT, Giddyup STD, Kaufmann BT, Lewis Hand, etc 
6 – Decorativo
É a família mais fácil de ser reconhecida, geralmente os tipos são temáticos e usados para trazer 
uma atmosfera decorativa ao texto. Não são indicados para textos extensos e corridos, mas são 
amplamente indicados para situações pontuais, a fim de se estabelecer um “gracejo”, um charme ao 
projeto gráfico, obviamente quando o projeto permitir isso.
Exemplos de tipos/fontes:
Flores, JUstAnotherFont,Kings of Pacifica, Harlow Solid Italic, etc.
Agora que conhecemos a anatomia dos tipos e suas classificações em famílias, 
voltaremos a pensar um pouco sobre como aplicá-los.
Basicamente, existem seis recursos que podem ser usados isoladamente ou em conjunto 
pra criar contraste entre tipos. 
Estes recursos são: - Tamanho, Peso, Estrutura, Forma, Direção e Cor. A seguir, 
veremos alguns exemplos.
Duas peças de Lego de oito pinos podem ser combinadas de 24 maneiras.
Três peças de Lego de oito pinos podem ser combinadas de 1060 maneiras.
Seis peças de Lego de oito pinos podem ser combinadas de 102981500 maneiras.
Com oito peças, as possibilidades são virtualmente infinitas.
The Ultimate LEGO Book
Duas peças de Lego de oito pinos podem ser combinadas de 24 maneiras.
Três peças de Lego de oito pinos podem ser combinadas de 1060 maneiras.
Seis peças de Lego de oito pinos podem ser combinadas de 102981500 maneiras.
Com oito peças, as possibilidades são virtualmente infinitas.
The Ultimate LEGO Book
Tamanho
Dica: Evidencie os tamanhos! eles precisam ser visivelmente percebidos/sentidos. 
Peso
Contraponha pesos mais fortes e pesos suaves, evite pesos intermediários.Dica: 
Forma
Caixa alta (maiúsculas) x Caixa Baixa (minúsculas), Roman x 
Itálico/Manuscrito são maneiras de se criar contraste através da forma.
Dica: Contrapor 
Estrutura
Veja como estão construídas as transições fino/grosso nos traços das letras e 
utilize estruturas diferentes para criar contrastes.
Dica: 
Direção
LE
G
O
Dicas: O texto pode ser organizado em diferentes direções: horizontal, vertical e 
inclinadas.
A escolha destas direções levarão em conta a quantidade de texto, o formato do material 
(poster, slide, livro entre outros) e o espaço para esse acontecimento
Combinar direções diferentes pode tornar seu projeto gráfico mais dinâmico e atraente.
A direção vertical cria uma situação inusitada para o texto, mas deve ser usada com 
cuidado, pois a leitura neste sentido é mais difícil.
A direção inclinada também deve ser evitada, a menos que seu projeto lhe de suporte 
para justificá-la. Inclinações geralmente remetem à energias positivas (inclinação para cima) e 
negativas (inclinação para baixo), por exemplo, um anúncio de um produto/vagas poderia ser 
feito com uma inclinação para cima indicando, movimento, expansão, lançamento, 
chamamento, etc.
“ ”.
LE
G
O
energia positiva
energia negativa
LEGO
Duas peças de Lego de oito pinos podem ser combinadas de 24 maneiras.
Três peças de Lego de oito pinos podem ser combinadas de 1060 maneiras.
Seis peças de Lego de oito pinos podem ser combinadas de 102981500 maneiras.
Com oito peças, as possibilidades são virtualmente infinitas.
The Ultimate LEGO Book
LEGO
Duas peças de Lego de oito pinos podem ser combinadas de 24 maneiras.
Três peças de Lego de oito pinos podem ser combinadas de 1060 maneiras.
Seis peças de Lego de oito pinos podem ser combinadas de 102981500 maneiras.
Com oito peças, as possibilidades são virtualmente infinitas.
The Ultimate LEGO Book
Cores
Considerando como base a Unidade 2 sobre cores, para estabelecer contraste 
marcantes aplique as relações entre cores quentes/frias (cores complementares), fique 
atento as dimensões e proporções dos tipos ao distribuir as cores e não se esqueça de 
respeitar as características de fundos claro, escuro e colorido.
X
Jogo Rápido - Tipografia
- Relações: Evite sempre os Conflitos, estabeleça Contrastes e use a 
Concordância se não houver outra opção/tempo.
- Conhecer as categorias de tipos (e suas características gerais) facilita 
na hora de selecionar os tipos e criar os contrastes. Você não precisa 
saber os nomes, basta apenas saber onde procurá-los.
- Recursos para contrastes: Assim como acontece com os princípios da 
Diagramação, na vida real, os recursos se sobrepõe e co-existem.
As características dos tipos selecionados para um projeto gráfico 
irão revelar quais recursos você poderá aplicar. Em outros casos, faça 
experimentações no conjunto de fontes selecionadas, lembre-se que 
visualizar a ação é sempre mais certeiro do que apenas imaginá-la.
- Tire partido estético das famílias de tipos, Decorativa e Manuscrita,
dependendo do projeto gráfico a ser desenvolvido, elas podem ser 
inseridas não apenas como texto, mas como um elemento gráfico.
- Assim como acontece com a seleção de cores, ao iniciar um projeto 
tenha sempre em mente o que você quer criar com seus tipos.Não é 
necessário saber e definir nomes, apenas tenha em mente os efeitos e 
sensações que você quer estabelecer. 
Se no decorrer do trabalho, este grupo de tipos atrapalhar ao invés 
de ajudar, desapegue-se e troque-os!Página 1
	Página 2
	Página 3
	Página 4
	Página 5
	Página 6
	Página 7
	Página 8
	Página 9
	Página 10
	Página 11
	Página 12