Aula EE - tipografia

1. Editoração Eletrônica
1º Período – UNIRON
Profª. Viviane Cristina Camelo Lopes

2. Tipografia

3. Conquiste o mundo com
26 soldados de chumbo

4. O que é tipografia ?
• É a arte, o processo de criação e a classificação do
desenho de letras do alfabeto e de caracteres
usados para formar as palavras;
• Não confundir com Tipologia, termo pertencente à
taxionomia, a ciência das classificações, o estudo
das características das diferenças entre objetos e
seres vivos de toda espécie;

5. O que é tipografia ?
•A aparência de uma determinada família de letras é
chamada como Tipo, podendo apresentar variações
em seu corpo (ligth, itálico e negrito) ou não;
•São a principal ferramenta de comunicação, que
permitem dar expressão ao documento, transmitindo
instantaneamente uma atmosfera e imagem.

6. Trajetória da Tipografia
Para ser comunicada, a palavra deve necessariamente partir de um alfabeto, e estão
contidos nesse alfabeto os desenhos de letras, seu estilo, a forma da fonte. Os primeiros
alfabetos que apareceram no Ocidente surgiram em civilizações do Mediterrâneo. Para
cada letra havia um desenho, uma imagem correspondente. Eram simples figuras
destinadas a representar a escrita. No Egito antigo, por exemplo, a letra “A” era
representada por uma ave.

7. alfabetismo é o último
aperfeiçoamento da escrita para
alguns pesquisadores.
Pode-se definir como um conjunto
de símbolos gráficos que
representam sons vocais, que serão
combinados e pronunciados de
acordo com os idiomas.
A B C
D E F
G H…
Alfabeto

8. Livro Xilográfico
A invenção chinesa de tipos
separados antecedeu as
experiências de Gutenberg em
mais de quatrocentos anos. O
inventor foi Pi Shêng por volta do
ano 1040 da era cristã. Os tipos
eram feitos inicialmente de argila
cozida, passando à madeira e por
fim, ao bronze. Contudo, esses
tipos móveis chineses ficaram
restritos à impressão tabulária.

9. Literatura de Cordel

10. Manuscritos
ancestral do livro, consistia na
cópia dos textos bíblicos, a rigor, é
o texto escrito à mão, independente
do suporte, técnica ou instrumento.
Por convenção, ao longo do tempo,
a palavra manuscrito passou a
designar materiais escritos em
papiro, pergaminho ou papel;

11. Letra
unidade mínima da escrita
Johanner Gutenberg, em 1455,
desenvolve os tipos móveis,
dando início ao revolucionário
processo de reproduzir em série
palavras, textos, livros...

12. Tipo Móvel
O tipo móvel, que era uma maneira de escrever com pequenos
pedaços de chumbo, inventado por Gutenberg, em 1454, na
Alemanha, facilitou a entrada da escrita para o mundo da
reprodução em série. Começava-se a pensar pela primeira vez na
possibilidade de diagramar uma página. Desde os primeiros tipos
gráficos de chumbo, a letra já ganhava um caráter de projeto.

13. O Condomínio

14. Galeria de Tipo Móvel

15. Importância da Tipografia no Projeto
Gráfico
• A Tipografia transmite personalidade a uma
peça gráfica.
• Cada família de fonte, cada tipo de letra
transmite um conceito.

16. Fonte tipográfica
• Termo criado durante a revolução industrial para a
fabricação dos tipos móveis das prensas mecânicas
para impressão de textos.
• É nome que se dá a um padrão de letra ou grifo
com o mesmo estilo de desenho ou atributos.
• Esse padrão identifica e descreve como funciona a
construção cursiva de cada tipo.

17. Estrutura de um tipo
AÁÁppiiccee HHaassttee
b e f j
TTrraavvee
BBaarrrriiggaa TTeerrmmiinnaall
Base ou pé
CCuurrvvaa oouu fflleexxããoo
BBaassee oouu ppéé
CCaauuddaa

18. Estrutura de um tipo
k o j MVVéérrttiiccee
AAnneell ee bbrraannccoo
BBrraaççoo
Serif (serifa)
ou remate

19. Corpo visual
Olho
Olho superior AbeDjghij
Olho inferior
Olho médio
Corpo Visual

21. Fonte
é o conjunto completo de caracteres sob o
mesmo estilo e em todos os corpos: caixa
alta e baixa, sinais de pontuação, acentos e
numerais.

23. Maiúsculo e minúsculo
• As letras maiúsculas e minúsculas tem uma grande influência na
legibilidade do texto. Nossa leitura consiste em reconhecer o formato
geral das palavras;
Árvore Rapaz Carnal
 Textos em maiúsculos são retângulos monótonos pouco distintos que
não atraem a atenção do olhar;
MONÓTONO
RETÂNGULO
Monótono
Retângulo

24. 24
Maiúsculo e minúsculo
Legibilidade depende do topo das letras

25. Maiúsculo e minúsculo
• Textos em minúsculo é mais legível porque exploramos a parte
superior das palavras;
Legibilidade depende do topo das letras
 A utilização de letras maiúsculas nas inicias de cada palavra quebra a
exploração das formas das palavras;
Letras Maiúsculas Quebram a Leitura

26. Sistema de medidas do
Corpo
• Corpo é a medida usada para calcular a área de
composição e conversão de textos manuscritos para tipos
de impressão, marcando os blocos (ou manchas).
• Não havia medida durante a revolução industria. Durante a
evolução das prensas, nasceram dois sistemas:
– Didot
• Usado na maior parte da Europa
• Equivale a 0,376 mm
• 12 pontos = Cícero (4,511 mm)
– Fournier
• Criado pelos Inglês e usado como padrão atualmente
• Equivale a 0,351 mm ou 1/72 de uma polegada
• 12 pontos = Paica (4,212 mm)
26

27. Exemplo de tamanhos de
corpo
Exemplo Tamanho do Corpo
ABCDEFabcdef 6
ABCDEFabcdef 8
ABCDEFabcdef 10
ABCDEFabcdef 12
ABCDEFabcdef 16
ABCDEFabcdef 26
ABCDEabcde 48
ABCabc 72
27

28. Família tipográfica
• Conjunto de fontes que variam sua
composição (negrito, itálico, sublinhado,
etc), mas sem preder seu estilo padrão.
• Exemplos de famílias:

29. Família
São todas as variações da fonte.
Ex.:
Helvetica Extra Bold
Helvetica Bold
Helvetica Italico

30. A tipografia e o design
• Um bom designer utiliza a tipografia para gerar um equilíbrio
visual que ajuda o leitor a assimilar o conteúdo;
• O formato de um tipo transmite sensações e padrões, criando
uma informação no subconsciente do leitor. Esse fato é utilizado
de forma proposital na linguagem, agregando mais confiabilidade
no conteúdo.

31. Alltype
• O texto também é uma forma de
ilustração;
• Existe uma técnica de design para
comunicação chamada Alltype, em
que o título da peça deverá assumir a
função da ilustração;
• Exige do designer um domínio do
espaço na peça e conhecimento das
características expressivas dos tipos;
• Deve-se distribuir título, subtítulo e
texto pela peça de maneira elegante,
mas funcional, convidando à leitura e
transmitindo a mensagem principal.

32. Escolhendo uma fonte
• A escolha da família tipográfica mais
adequada deve levar em conta:
1. A personalidade da fonte:
2. A natureza da idéia;
3. O perfil do cliente-anunciante;
4. O Público-alvo;
5. A Legibilidade.

33. Composição tipográfica
• Legibilidade: grau de distinção entre os caracteres;
– C - G | E - F | N - H | c - e | I - l - 1 | i - j | b - h | rn - m | Ti - T1
• A legibilidade deve manter um equilíbrio entre:
– Necessidades expressivas
– Tamanho do texto
– Corpo de fonte
– Adequação à mídia

34. Composição tipográfica
• Repetição: cria um padrão de
identidade visual com o leitor,
estabelecendo uma hierarquia;
A leitura é essencial

35. Composição tipográfica
• Alinhamento: possibilita uma coerência na
narrativa da leitura, garantindo uma
coexistência entre os elementos da interface
com a própria tela do computador, além de
permitir um alívio visual ao leitor.

36. Áreas visível de bloco
• Cuidado com texto branco com fundo
preto, pois reduz as área visível de
bloco, forçando a vista na leitura.
Veja os quadros com
atenção e teste para
saber em qual dá mais
trabalho para ler o
texto e qual a leitura é
mais agradável.
Veja os quadros com
atenção e teste para
saber em qual dá mais
trabalho para ler o
texto e qual a leitura é
mais agradável.

37. Cuidados com a
composição do texto
• Linha de texto não deve possuir mais
que 12 palavras
• O espaço entre palavras deve ser
menor que a entrelinha
• Para linhas longas e corpos
pequenos, aumente a entrelinha
37

38. Classificação dos Tipos
Francis Thibedeau Sec. XVIII
Arrumou a casa

40. Classificação dos tipos
• Estilo Antigo
– Baseado na escrita à mão dos escribas, que trabalhavam com uma pena na mão;
• Exemplos de sensações: antigo, tradição, requinte, confiabilidade, artesanal, sofisticação;
• Exemplos de tipos: Goudy, Times e Palatino.
Serifa Serifa de letras em caixa-baixa são inclinadas
Estilo Antigo
Transição grosso/fino moderada no traço Ênfase diagonal

41. Antigo apropriado para textos longos
fino-grosso
serifa
ênfase diagonal
serifa inclinada

42. Classificação dos tipos
• Moderno
– Criado em 1700 na Itália, com a evolução das técnicas de impressão mecânica. É
derivado do romano clássico, visando uma melhora na legibilidade das letras;
• Exemplos de sensações: solidez, força, robustez, destaque;
• Exemplos de tipos: Bodoni, Times Bold e New Century Schoolbook.
Serifa de letras em caixa-baixa são horizontais e finas
Transição grosso/fino radical no traço Ênfase vertical

43. Moderno desapropriado para textos longos
fino-grosso
ênfase vertical
serifa horizontal
e fina

44. Classificação dos tipos
• Serifado
– Também conhecido como estilo egípcio, surgiu depois da Revolução Industrial
como conceito de propaganda;
• Exemplos de sensações: padronização, processo;
• Exemplos de tipos: Clarendon, Memphis e Memphis Bold.
Serifa de letras em caixa-baixa são grossas
Serifado Pouca ou nenhuma transição grosso/fino
(ou contraste) nos traços
Ênfase vertical

45. M. Serifa Grossa indicada p/ leitura clara e
direta
serifa horizontais
e grossas
fino-grosso pouco
ou inexistente ênfase vertical

46. Classificação dos tipos
• Sem serifa
– Mais conhecido como sans serif, foi elaborada em 1919, pela Escola de Artes e
Ofício de Weimar, para estilo alemão Bauhaus;
– Estética clara legível, letras minúsculas e geométricas com linhas obliquas e
verticais, rejeita ornamentos, grandes numerais;
• Exemplos de sensações: clean, rigidez, exatidão, inovação;
• Exemplos de tipos: Antique Olive, Formata, Gill Sans, Sans serif, Arial, Franklin Gothic.
Sem serifa
Não há transição na espessura do traço
Não há ênfase, pois não apresenta
alteração na espessura do traço
Não há serifa nas letras

47. M. Sem Serifa cuidado ao contrasta-lá
fino-grosso
inexistente
ênfase
inexistente
serifa
inexistente

48. Classificação dos tipos
• Manuscrito / cursiva
– Simulam letras cursivas, como se fossem feitas a mão;
– Possui vários estilos que se apropriam de alguns elementos de outros tipos;
• Exemplos de sensações: realidade, verídico, artesanal;

49. Cursiva desapropriada a textos longos
conectam
não conectam

53. Classificação dos tipos
• Decorativo
– Criada em paralelo ao estilo de design Vitoriano (1820), apresenta variações
exageradas de peso e tamanho, contornos e ornamentos;
• Exemplos de sensações: luxo, encanto, entretenimento, excesso;

54. Decorativo utilização limitada

58. Classificação dos tipos
• De Stijl
– Estilo alemão de design, criado no início do século XX, que possuía sua própria
tipografia;
– Rigorosa precisão na divisão do espaço, assimetria, retangularidade, cores
primárias, linhas negras, simplificação, padronização e legibilidade.
• Exemplos de sensações: rigidez, exatidão, inovação, futurismo;

59. Classificação dos tipos
• Punk
– Estilo britânico de design criado na década de 70 para promover o movimento
cultural;
– Mistura de letras recortadas com letras cursivas, apresentam ruído, não possuem
ordem ou acabamento.
• Exemplos de sensações: caos, ruído, falta de padrão, artesanal, desorientação;

60. Planejamento para
composição
• O que vai ser lido?
• Por quem vai ser lido?
• Em que vai ser aplicado o texto?
• Onde vai ser lido?

61. Tipografia na mídia
impressa e digital
• Mídia impressa: os caracteres são processados em 1.200 dpi;
• Mídia digital: os caracteres são processados em 72 dpi;
• No computador, cada sistema operacional exibe a mesma família de
tipos de uma forma diferente:

62. Tipografia na mídia
impressa e digital
 Atualmente, até os browsers já começaram a apresentar diferenças
na exibição de tipos, alterando o espaçamento e inserindo
anti-serrilhado.

63. Fontes digitais
• Com a evolução tecnológica, a Adobe desenvolveu uma linguagem
chamada postscript que possibilitou a criação do formato vetorial;
– Adobe Type 1: utilizado para a mídia impressa, possui um nó a cada 90 graus,
apresentando mais refinamento e precisão ao desenho do tipo.
– True Type: utilizado mais para mídia digital, possui um nó a cada 45 graus,
apresentando deformidades quando ampliados.
• O anti-serrilhado, ou antialiasing, foi criado para suavizar a
exibição dos tipos na tela dos computadores, inserindo pixels para
eliminar o serrilhado dos caracteres;
– Não deve ser usado para tipos menores do que 12 pontos, principalmente se
importados de qualquer programa.

64. +
LEGIBILIDADE
MAXIMO: 3 TIPOS DIFERENTES

71. +fontes
- LEGIBILIDADE

76. Espaçamento

77. Espaçamento entre letras

78. Espaçamento entre letras

79. Espaçamento entre linhas

80. Alinhamento

81. Alinhamento

82. Centralizar, ainda não

83. Centralizar, ainda não

84. Centralizar, ainda não

85. Centralizar, ainda não

86. Centralizar, ainda não

87. Centralizar, ainda não

88. Centralizar, ainda não

89. Não Centralize, ainda

90. Classificações Tipográficas

91. seres humanos não lêem as palavras letra a letra,
mas em blocos
Serifas respondem

92. TAMBÉM É POR ESSE MESMO MOTIVO QUE OS
TEXTOS ESCRITOS EM MAIÚSCULAS SÃO TÃO
DIFÍCEIS DE SE LER.
MESMA ALTURA + MESMA LARGURA
=
LEITURA DIFÍCIL

95. POR QUE?

100. 1982

101. Monotype, Inglaterra 1980

107. Obras utilizadas
com referência
para a aula de
hoje: