03 - Aula Fundamentos elementares do Design - Tipografia

Prévia do material em texto

www.designculture.com.br
Iran Pontes
25 anos, Recife/PE
CEO Design Culture,
Cristão, Blogueiro,
Professor 
Designer //
Especialista em 
Comunicação e MKT
para Mídias Digitais
COR | TIPOGRAFIA | GESTALT
Fundamentos 
elementares do Design 
03 | Qual é o seu tipo? 
Tipografia.
Coluna
De trajano
Capitalis Monumentalis (escrita oficial do império 
Romano), primeira representação de fontes 
serifadas.
#Paraprapensar
O que seria o estudo da 
tipografia sem...
Prensa tipográfica 
criada por 
Gutenberg em 1445
O que seria o estudo da 
tipografia sem...
#Paraprapensar
Anatomia do tipo 
Conhecendo cada 
membro do corpo.
Autor base: 
Niemeyer
Autora base: 
Ellen Lupton
altura-x: Segundo Lupton (2006, p. 35), esta “é a altura do corpo principal da letra minúscula (ou a 
altura de um x caixa baixa), excluindo seus ascendentes e descendentes”. A altura-x não é igual para 
todas as fontes, e, por esta razão, duas fontes que possuam tamanho de corpo iguais, como 48 por 
exemplo, podem aparentar ter tamanhos diferentes (ROCHA, 2005);
Altura de versal: Distância entre a linha de base e o topo da maiúscula (LUPTON, 2006); 
Linha de base: É o eixo mais estável ao longo de uma linha de texto, onde todas as letras repousam 
(LUPTON, 2006); ascendentes: parte que se prolonga acima da altura-x (ROCHA, 2005); 
Variações estruturais do tipo
Descendentes: Parte que se prolonga abaixo da altura-x (ROCHA, 2005); corpo: consiste no tamanho 
do tipo, medido pela sua altura (PEREIRA, 2007). A medição é feita “da versal á parte inferior da 
descendente mais baixa, com mais um espacinho extra” (LUPTON, 2006, p. 36), conforme apresenta a 
figura 8; 
Serifa: “Pequeno filete de acabamento que se estende nas terminações das hastes dos caracteres” 
(PEREIRA, 2007, p. 12);
Tamanho: Relativo ao corpo do tipo (NIEMAYER, 2003);
Variações estruturais do tipo
Forma: Diferenças entre os desenhos das letras maiúsculas (NIEMAYER, 2003);
Peso: Refere-se a espessura dos traços do corpo do tipo de uma mesma família, como bold ou negrito, 
normal, regular, light etc (LUPTON, 2006);
Contraste: O contraste pode ser de angulação, onde se refere ao ângulo de inclinação do eixo – “o 
eixo definido pela inclinação resultante da escrita manual é chamado de eixo humanista (da época do 
Renascimento) e o eixo vertical é conhecido como eixo racionalista (ROCHA, 2005, p. 39)” – de um 
caractere; ou de espessura de traços (LUPTON, 2006). 
Variações estruturais do tipo
Inclinação: Relacionado ao ângulo de inclinação da haste e dos extensores da letra Como exemplo, 
os tipos itálicos (BRINGHURST, 2005). 
Estrutura: Refere-se às famílias nos quais os tipos estão classificados (LUPTON, 2006). 
Largura: Relacionada às medidas horizontais da letra. Intrínseco a sua proporção, ela equivale ao 
corpo do tipo mais um pequeno espaço que o distancia dos outros. Dependendo da fonte, a largura 
pode ser tanto generosa como estreita (LUPTON, 2006).
Variações estruturais do tipo
Tipos de serifas.
Enquadramento Tradicional
1.Sem Serifa
2.Com Serifa ou Serifada
3.Cursivas ou Manuscritas
4.Decorativa
Classificação tipográfica
Enquadramento Histórico
1.Humanistas
2.Transicionais
3.Modernas
4.Egípcias
5.Sem Serifas Humanistas
6.Sem Serifas Transicionais
7.Sem Serifas Geométricas
Cursivas ou Manuscritas
Enquadramento tradicional
Decorativa
Com Serifa
Enquadramento tradicional
Sem Serifa
Proporção áurea na 
tipografia.
Nota: Na aula Fundamentos Elementares do Design 2 iremos nos aprofundar no assunto de proporção 
áurea e regra dos terços.
São três formas principais: 
a sequência básica, a sequência 
dobrada e o entrelaçamento entre 
essas duas sequências. O mais 
simples é a sequência básica, onde 
seguindo sempre Fibonacci você pode 
começar a usar uma fonte de 
tamanho 5 e seguir sempre somando 
os dois tamanhos anteriores, 
seguindo esta ordem podemos usar 
tamanhos de fontes equilibradas em 
um projeto. Exemplos (em pontos): 5, 
8, 13, 21... Obs: Sempre deve ser 
usada a mesma fonte.
Nota: Conheça mais sobre proporção áurea na tipografia clicando aqui e assistindo a vídeo do Pedro Panetto.
Conhecendo as 7 
famílias tipográficas 
segundo John Kane.
PROFESSOR MAURO GASPAR
GÓTICAS: Primeiro tipo de 
impressão em livros da 
Europa e possui um estilo 
caligráfico.
ROMANAS: Fontes com 
serifas arredondadas 
baseada nas inscrições das 
ruínas romanas.
ROMANAS DE TRANSIÇÃO: 
São serifadas e a junção com a 
haste forma um ângulo 
arredondado. Sempre existe 
hastes tanto na versão de 
caixa-alta como em 
caixa-baixa. 
CURSIVA: Origem na 
escrita caligráfica 
Italiana se baseiam na 
escrita manual.
LATINAS: Descendem das 
Romanas, há um maior 
contraste entre as hastes, 
e a sua principal 
característica é a sua 
terminação da haste 
bruscamente em angulo 
reto na junção da serifa.
EGÍPCIAS: Fontes com 
serifas retangulares 
bem evidentes 
baseadas no estilo das 
inscrições egípcias 
(hieróglifos).
GROTESCAS: São fontes 
aserifadas isto é, não 
apresentam serifas. 
Conhecidas como letras 
de bastão, encontramos 
com mais facilidade 
variação de pesos a 
começar por bold, italic, 
light e regular.
FANTASIA: São fontes 
que não se conseguem 
enquadras em algumas 
famílias e tem 
características 
confundidas, misturadas, 
ornamentadas e até 
icônicas.
Conhecendo as regras 
tipográficas segundo Rob 
Carter para preservação da 
legibilidade da tipografia.
PROFESSOR MAURO GASPAR
Regra1 – Para uma 
legibilidade máxima, 
escolha tipos clássicos 
e testados tais como os 
recomendados na imagem 
ao lado.
Regra2 – Não use 
vários tipos em um 
único projeto (ao 
mesmo tempo) neste 
caso prefira usar 
variação de pesos do 
mesmo tipo.
Regra 3 – Evite 
combinar fontes que 
tenham um aspecto 
semelhante, 
prefira neste caso 
usar um único tipo.
Regra 4 – O texto em 
CAIXA ALTA atrasa muito a 
leitura. Utilize caixa alta e 
baixa para obter a melhor 
legibilidade possível. 
Textos em caixa alta 
também representam em 
linguagem digital o “grito”.
Regra5 – Para tipos de 
texto, utilize 
tamanhos que, de 
acordo com estudos 
de legibilidade, sejam 
mais legíveis.
Regra 6 – Evite utilizar 
demasiados tamanhos e 
pesos diferentes de tipos 
ao mesmo tempo, seja 
equilibrado e use quando 
for necessário dar 
destaque a alguma área 
específica.
Regra7 – Utilize tipos 
de texto equilibrados e 
com contraste legível. 
Evite tipos com um 
aspecto demasiado 
pesado ou demasiado 
leve.
Regra8 – Utilize tipos de 
largura média. 
Evite tipos que pareçam 
extremamente largos 
(expandidos) 
ou estreitos 
(condensados).
Regra 9 – Utilize um 
espaçamento consistente 
de letras e palavras de 
modo a conseguir uma 
textura sem interrupções.
Regra 10 – Utilize 
comprimentos de linha 
adequados. As linhas 
demasiadas curtas ou 
compridas prejudicam o
processo de leitura.
Regra 11 – Para colunas de 
texto, utilize um espaçamento 
entre linhas que transporte 
facilmente os olhos de uma 
linha para outra.
Regra 12 – Para uma 
legibilidade máxima, 
utilize alinhamento à 
esquerda e 
desalinhamento à 
direita.
Regra 13 – Procure 
terminações consistentes 
e rítmicas. Não permita 
que o texto crie formas 
estranhas.
Regra 14 – Indique 
claramente os parágrafos, 
não prejudicando a 
integridade e a consistência 
visual do texto.
Regra 15 – Evite 
viúvas, órfãos, 
dentes de cavalo e 
rios.
“Viúvas” (uma palavra ou linha muito curta no 
início ou no final de um parágrafo) 
ou “Órfãos” (uma única sílaba solta no final de 
umparágrafo).
“Dentes de cavalo” (texto 
excessivamente espaçado, ou 
“Rios” (conjunto de linhas com 
dentes de cavalos).
Regra 16 – Realce os 
elementos no texto com 
descrição e sem 
perturbar o fluxo da 
leitura.
Regra 17 – Mantenha 
sempre a integridade 
do tipo. Não condense ou 
expanda.
Regra 18 – Alinhe sempre 
as letras e as palavras 
pela linha de base.
Regra 19 – Ao trabalhar com 
tipo e cor, certifique-se de que 
há contraste suficiente entre o 
tipo e o seu fundo.
Lembre-se, o bom 
tipo tem que ter...
FLEXIBILIDADE- Pesos e estilos diferentes em uma mesma família: (bold, extrabold, semibold, 
light, thin, condensado...); 
LEGIBILIDADE- O tipo é legível a 15cm de distância e a metros?;
UNIFORMIDADE- Todos os caracteres são reconhecidos como da mesma família 
(A-Z minúsculo e maiúsculo?);
EQUILÍBRIO- O tipo é equilibrado ou em sua anatomia há hastes por exemplo muito finas ou 
espessas?;
PERSONALIDADE- Se distingue em suas letras, exemplo: i e L em caixa baixa e alta?
Fonte que estamos usando: L I ; l i.
Dúvidas? 
Obrigado!
Ferramenta ADOBE COLOR (KULER)
8 ferramentas para acertar na escolha das cores do seu site
Professor Mauro Gaspar
Ronald kapaz – Design e êxodo rural
Livro Psicodinâmica das cores em comunicação
Livro Gramática visual 
Livro Pensar com tipos de Ellen Lupton
Livro Tipografia: uma apresentação de Lucy Niemayer
Proporção áurea na tipografia de Pedro Panetto
http://www.designculture.com.br/gestalt-introducao-as-suas-leis/
http://rodrigoamaral.net/2013/07/22/8-ferramentas-para-acertar-na-escolha-das-cores-do-seu-site/
https://www.emaze.com/@AOCOWZFW/RG-trabalho
http://douglasdim.blogspot.com.br/2011/09/cor.html
http://knabbenn.com/classificacao-tipografica/
http://photoatelier.org/2013/09/09/logotipos-criativos-e-as-teorias-da-gestalt/
http://euedesign.blogspot.com.br/2012_02_01_archive.html
http://chocoladesign.com/o-que-e-gestalt
Durval Pacheco – Aula Comunicação Visual
Livro: Elementos Básicos da comunicação visual de Donis A. Dondis
Livro: Psicodinâmica Das Cores Em Comunicação - Ana Karina Miranda de FREITAS
Artigo Uma palavrinha sobre Cores - Mauri Ribeiro - Design Culture
http://viverdeblog.com/psicologia-das-cores/
http://linguagem2008.blogspot.com.br
http://www.sarahchofakian.com.br
http://chiefofdesign.com.br/teoria-das-cores/#subtitulo05
http://linydesigngrafico.blogspot.com.br/