cgd-aula06-tipografia-190419012743

Prévia do material em texto

Comunicação Gráfica
e Design
Profa. Aline Antunes de Souza
aline.antunes@uni9.pro.br
Tipografia
. conceitos
. utilização
. cases
Tipografia | O que é?
Tipografia: do grego typos = forma e graphein = escrita.
. estudo da forma escrita
O termo “tipo” é o desenho de uma determinada família de letras. 
Verdana, Arial, Georgia e Impact são exemplos de tipos. 
O termo “fonte” é o conjunto completo de variações dessas letras: 
regular, light, itálico, negrito, CAIXA ALTA (“maiúsculas”) e caixa baixa 
(“minúsculas”), números, símbolos e pontuação.
Tipografia | O que é?
Tipografia x Tipologia
Originalmente, tipografia veio da impressão dos tipos. Hoje, é compreendida de 
maneira mais abrangente e envolve toda forma de escrita.
Tipologia é o estudo da formação dos tipos. Isso é algo que cresce a cada dia, 
com a popularização de software para criação de tipos.
. criar sua própria fonte: http://www.des1gnon.com/2013/08/como-criar-sua-propria-fonte-parte-1/
http://www.des1gnon.com/2013/08/como-criar-sua-propria-fonte-parte-1/
Tipografia | Importância
Os tipos constituem a principal 
ferramenta de comunicação. 
As faces alternativas de tipos 
permitem que você dê expressão 
ao documento, para transmitir 
instantaneamente, e 
não-verbalmente, atmosfera e 
imagem.
Por isso, diz-se que a 
tipografia é a “voz” de um 
trabalho. Assim, deve ser 
coerente com seu objetivo de 
comunicação.
Tipografia | Importância
Tipografia | Importância
Conceitos
Tipo
Fonte
Família
Corpo
Peso
Largura
Inclinação
Tamanho
Espaço
Anatomia
Classificação
Alinhamento
Conceitos | Tipo
Tipos ou Glifos = letras, caracteres
São signos alfabéticos projetados para reprodução mecânica.
família
fonte
tipo
Conceitos | Fonte
É conjunto de caracteres que compõem 
uma família tipográfica. O termo 
também é utilizado para designar os 
arquivos de fonte digitais, ou seja, 
uma coleção de caracteres digitais em 
forma de arquivos para serem 
utilizados em computadores.
Conceitos | Família
É o conjunto de caracteres 
que possuem as mesmas 
características formais de 
desenho, independentemente 
das suas variações (peso, 
inclinação e corpo).
Conceitos | Corpo
O corpo é o tamanho do tipo que começa do ponto mais alto (versal ou ascendente) até o 
ponto mais baixo (descendente).
Conceitos | Peso
Diz respeito a espessura dos tipos: light, thin, medium, roman, bold, black.
Conceitos | Largura
Refere-se à relação entre a base 
e altura da letra. Existem 
inúmeras famílias que já vem com 
essas variações. Evite 
“condensar” ou “expandir” um tipo 
por conta própria. Isso irá 
deformá-lo e prejudicará a sua 
estrutura.
Conceitos | Inclinação
Variações quanto à inclinação 
dos tipos: Regular ou Itálico 
(oblíquo).
Conceitos | Tamanho
As letras possuem três tipos de 
tamanhos: caixa baixa, caixa alta e 
versalete.
CAIXA ALTA (capitais ou versais)
É o conjunto de caracteres em letras 
maiúsculas.
caixa baixa
É o conjunto de caracteres em letras 
minúsculas.
Caixa alta e baixa derivam da organização dos tipos em caixas de madeira sobre um cavalete, nas oficinas 
tipográficas, onde as letras maiúsculas ficavam na parte superior (caixa alta) e as as minúsculas na inferior 
(caixa baixa), já que eram mais utilizadas e assim era mais fácil de pegá-las.
Conceitos | Tamanho
Versalete (small caps)
É o conjunto de caracteres em letras maiúsculas com a altura de minúsculas (altura de x).
Conceitos | Espaço
As letras possuem três tipos de espaços: kerning, 
tracking e leading.
Kern / Kerning
Trata-se do espaçamento entre os caracteres, feito 
para melhorar a leitura. 
. funciona somente em alguns pares, ou seja, só em 
algumas letras.
. alguns softwares oferecem a opção de Kerning 
óptico
Conceitos | Espaço
Espaçamento (Tracking)
É o espaçamento entre letras e entre as palavras de todo um bloco de texto. 
. altera-se o espaço entre todo o conjunto de caracteres (palavra, frase, parágrafo)
. deve ser consistente, para evitar grandes espaços em branco ou encavalamentos no texto, 
prejudicando a leitura.
Conceitos | Espaço
Entrelinha (Leading)
. o espaço entre as linhas do texto
. medida é a distância da linha de base de uma linha tipográfica para outra
. automático: 20% a mais que o tamanho do tipo utilizado
Quanto mais aumentamos a 
entrelinha, mais aberto e 
leve se torna o bloco de 
texto e quanto mais 
diminuímos a entrelinha 
(entrelinha negativa) 
mais apertado se 
torna o texto.
Conceitos | Anatomia e Serifa
Os tipos são compostos por um conjunto de elementos. Ao menos que você seja um tipógrafo, 
não precisa decorar cada parte que compõe a letra, mas é interessante saber principalmente 
se for lidar com lettering.
Conceitos | Anatomia e Serifa
Serifa
. pequenos traços ou prolongamentos que existem no final das hastes dos caracteres
. tem a função de auxiliar a leitura, proporcionando continuidade para o texto e tornando-o 
menos cansativo para os olhos.
. tipos sem serifa são mais indicados para títulos, chamadas e textos digitais (sites)
Conceitos | Classificação
Conceitos | Alinhamento
Conceitos | Alinhamento
Capitular
É a ênfase que se dá à letra inicial no 
começo de um capítulo, aumentando seu 
tamanho.
Indentação ou Entrada
Refere-se ao espaço em branco, um “avanço 
do texto”, no início do parágrafo. 
Recuo
É praticamente o inverso da indentação. 
A primeira linha fica posicionada à 
esquerda e as demais são alinhadas um 
pouco à direita.
Utilização
Como escolher a voz certa 
Legibilidade e Leiturabilidade
Hierarquização
Contrastes
Dicas finais
Utilização | Como escolher?
Em um projeto devemos considerar todos os 
aspectos: técnicos, psicológicos e 
socioculturais.
Para a escolha da família tipográfica, 
a primeira coisa que devemos pensar é 
“qual a voz que queremos transmitir?”.
A tipografia é feita para comunicar, logo, 
é a voz da sua comunicação. 
. ex. pôster feminino
Sempre partir da questão: esse projeto é para ler ou para ver?
Utilização | Ver ou Ler?
Dentre os vários fatores que analisamos pra escolher 
um tipo, temos a Legibilidade e Leiturabilidade:
. Legibilidade: diz respeito ao reconhecimento das 
letras individualmente. A facilidade de distinção 
dos glifos.
. Leiturabilidade: diz respeito ao reconhecimento e 
a fluência dos tipos em sentenças, como frases e 
parágrafos.
Um tipo pode ser legível, mas não ter uma boa 
leiturabilidade.
Utilização | Ver ou Ler?
Projetos para “ver”
. o projeto pede por uma tipografia impactante, 
chamativa, efêmera
. peça publicitária - precisa de grande apelo 
visual
. tem que ser legível, não necessariamente 
confortável
. peças como: cartazes, pôsteres, capas, 
logotipos*, embalagens, anúncios, sinalização, 
títulos.
logotipo ou logomarca?
Logo = "logus"/grego = conceito ou significado
Marca = "marka"/germânico = significado
Tipo = “typos”/grego = símbolo ou figura
Logomarca é redundante = significado do significado
Logotipo = “símbolo visível de um conceito”
Utilização | Ver ou Ler?
Projetos para “ler”
. o projeto possui textos longos, precisa ser 
agradável de ler
. o visual impactante não é o mais importante, e 
sim a leitura
. optar por tipos tradicionais, que funcionem bem 
em corpos pequenos e em blocos de textos
. peças como: jornais, livros, manuais, revistas, 
blogs, e-books.
. no digital: sem serifa (acabam se tornando 
“borrões”, prejudicando assim a leitura e o 
entendimento)
. no gráfico (impresso) os serifados são os mais 
adequados - auxiliam a leitura, proporcionando 
continuidade e menos cansaço para os olhos.
Utilização | Hierarquias
. separar visualmente título, subtítulo e corpo 
de texto
. a distinção pode ser feita por separações, 
variação de cor, de tamanho do corpo, de peso 
do tipo, de contraste
. repetição: cria identidade visual e ajuda a 
estabelecer uma hierarquia.
Utilização | Contrastes
Algumas dicas:
1. Use cores contrastantes
2. Evite tamanhos muito pequenos
3. Dê espaço para o texto "respirar"
4. Evite usar todo o texto em letrasmaiúsculas
5. Não use muitas fontes em uma única página.
6. Evite parágrafos com linhas muito grandes ou 
muito curtas
. O texto deve ter um tamanho 
coerente com o suporte (meio 
onde é utilizado).
. Sempre que possível, 
principalmente em projetos para 
“ler”, indente os parágrafos. 
Em geral, o primeiro parágrafo 
não precisa ser indentado.
. Evite linhas órfãs (primeira 
linha de um parágrafo sozinha 
no fim da página) e viúvas 
(última linha de um parágrafo 
no início da página).
Utilização | Dicas finais
linha 
órfã
linha 
viúva
Cases
Brighton Language School
Cancer Patients Aid Association
Amazon - Rock
Fedex
ESPN
Homenagem ao Dia do Basquete
Alfabarba
Type:Rider (Cosmografik)
https://www.youtube.com/watch?v=uKNWXL62oU4
https://www.youtube.com/watch?v=uKNWXL62oU4
Referências
Aula: 
http://ricardoartur.com.br/1001/files/tipografia-web3.pdf
https://www.chiefofdesign.com.br/tipografia/
Para escolher tipos - http://designculture.com.br/tipografia-como-escolher
Blogs Tipografia: 
. http://ilovetypography.com/
. http://typeculture.com/
. http://www.zupi.com.br/?s=tipografia
. http://blog.typoretum.co.uk/
Lettering: a arte de desenhar letras - https://www.ideafixa.com/oldbutgold/dicas-para-se-arriscar-hand-lettering
Butterick’s Practical Typography - fontes e diagramação - https://practicaltypography.com/
Font Men: uma entrevista com os designers de tipo - https://vimeo.com/88318922
Anatomia das Letras - http://ricardoartur.com.br/1001/tag/tipografia/
Vídeos resumo: 
. Tipografia Aula 1 - https://www.youtube.com/watch?v=4DVqU0MsCsI
. Tipografia Aula 2 - https://www.youtube.com/watch?v=E2ZIxzXFL7s
Banco de Fontes para Baixar - https://www.dafont.com/pt/
Identificar visualmente uma fonte - Fonts.com (http://www.identifont.com/identify.html)
Preenchimento de texto fictício - http://fucklorem.com
http://ricardoartur.com.br/1001/files/tipografia-web3.pdf
https://www.chiefofdesign.com.br/tipografia/
http://designculture.com.br/tipografia-como-escolher
http://ilovetypography.com/
http://typeculture.com/
http://www.zupi.com.br/?s=tipografia
http://blog.typoretum.co.uk/
https://www.ideafixa.com/oldbutgold/dicas-para-se-arriscar-hand-lettering
https://practicaltypography.com/
https://vimeo.com/88318922
http://ricardoartur.com.br/1001/tag/tipografia/
https://www.youtube.com/watch?v=4DVqU0MsCsI
https://www.youtube.com/watch?v=E2ZIxzXFL7s
https://www.dafont.com/pt/
http://www.identifont.com/identify.html
http://fucklorem.com
https://www.dafont.com/pt/
https://www.dafont.com/pt/