aula ee - tipografia

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

Upload: profvivianelopes

Post on 19-Jul-2015

140 views

Category:

Design


7 download

TRANSCRIPT

Page 1: Aula EE - tipografia

Editoração Eletrônica1º Período – UNIRONProfª. Viviane Cristina Camelo Lopes

Page 2: Aula EE - tipografia

Tipografia

Page 3: Aula EE - tipografia

Conquiste o mundo com 26 soldados de chumbo

Page 4: Aula EE - tipografia

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;

Page 5: Aula EE - tipografia

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.

Page 6: Aula EE - tipografia

Trajetória da TipografiaPara 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.

Page 7: Aula EE - tipografia

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 CD E FG H…

Alfabeto

Page 8: Aula EE - tipografia

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.

Page 10: Aula EE - tipografia

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;

Page 11: Aula EE - tipografia

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

Letra

Page 12: Aula EE - tipografia

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.

Tipo Móvel

Page 13: Aula EE - tipografia

O Condomínio

Page 14: Aula EE - tipografia

Galeria de Tipo Móvel

Page 15: Aula EE - tipografia

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.

Page 16: Aula EE - tipografia

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.

Page 17: Aula EE - tipografia

A b e f jÁpiceÁpice

HasteHaste

TraveTrave

Base ou pé

Curva ou flexãoCurva ou flexão

Base ou péBase ou pé

BarrigaBarriga TerminalTerminal

CaudaCauda

Estrutura de um tipo

Page 18: Aula EE - tipografia

k o j MVérticeVértice

Anel e brancoAnel e branco

BraçoBraço

Serif (serifa)ou remate

Serif (serifa)ou remate

Estrutura de um tipo

Page 19: Aula EE - tipografia

Corpo visualOlho

Olho superior

AbeDjghijOlho inferior

Olho médio

Corpo Visual

Page 20: Aula EE - tipografia
Page 21: Aula EE - tipografia

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

Fonte

Page 22: Aula EE - tipografia
Page 23: Aula EE - tipografia

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;

Textos em maiúsculos são retângulos monótonos pouco distintos que não atraem a atenção do olhar;

Árvore Rapaz Carnal

MONÓTONO

RETÂNGULO

Monótono

Retângulo

Page 24: Aula EE - tipografia

24

Maiúsculo e minúsculo

Legibilidade depende do topo das letras

Page 25: Aula EE - tipografia

Maiúsculo e minúsculo

A utilização de letras maiúsculas nas inicias de cada palavra quebra a exploração das formas das palavras;

Legibilidade depende do topo das letras

Letras Maiúsculas Quebram a Leitura

• Textos em minúsculo é mais legível porque exploramos a parte superior das palavras;

Page 26: Aula EE - tipografia

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

Page 27: Aula EE - tipografia

Exemplo de tamanhos de corpo

27

Exemplo Tamanho do Corpo

ABCDEFabcdef 6

ABCDEFabcdef 8

ABCDEFabcdef 10

ABCDEFabcdef 12

ABCDEFabcdef 16

ABCDEFabcdef 26

ABCDEabcde 48

ABCabc 72

Page 28: Aula EE - tipografia

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:

Page 29: Aula EE - tipografia

Família

São todas as variações da fonte.Ex.:Helvetica Extra BoldHelvetica BoldHelvetica Italico

Page 30: Aula EE - tipografia

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.

Page 31: Aula EE - tipografia

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.

Page 32: Aula EE - tipografia

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.

Page 33: Aula EE - tipografia

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

Page 34: Aula EE - tipografia

Composição tipográfica

• Repetição: cria um padrão de identidade visual com o leitor, estabelecendo uma hierarquia;

A leitura é essencial

Page 35: Aula EE - tipografia

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.

Page 36: Aula EE - tipografia

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

Page 37: Aula EE - tipografia

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

Page 38: Aula EE - tipografia

Classificação dos Tipos F

ran

cis

Th

ibed

eau

Sec

. X

VIII

Arr

um

ou

a c

asa

Page 39: Aula EE - tipografia
Page 40: Aula EE - tipografia

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.

Estilo AntigoSerifa Serifa de letras em caixa-baixa são inclinadas

Transição grosso/fino moderada no traço Ênfase diagonal

Page 41: Aula EE - tipografia

fino-grosso

serifa

ênfase diagonalserifa inclinada

Antigo apropriado para textos longos

Page 42: Aula EE - tipografia

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

Page 43: Aula EE - tipografia

Moderno desapropriado para textos longos

fino-grosso

ênfase vertical

serifa horizontale fina

Page 44: Aula EE - tipografia

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.

SerifadoPouca ou nenhuma transição grosso/fino

(ou contraste) nos traços

Ênfase vertical

Serifa de letras em caixa-baixa são grossas

Page 45: Aula EE - tipografia

M. Serifa Grossa indicada p/ leitura clara e direta

fino-grosso poucoou inexistente ênfase vertical

serifa horizontais e grossas

Page 46: Aula EE - tipografia

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 serifaNã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

Page 47: Aula EE - tipografia

fino-grossoinexistente

ênfase inexistente

serifainexistente

M. Sem Serifa cuidado ao contrasta-lá

Page 48: Aula EE - tipografia

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;

Page 49: Aula EE - tipografia

conectam

não conectam

Cursiva desapropriada a textos longos

Page 50: Aula EE - tipografia
Page 51: Aula EE - tipografia
Page 52: Aula EE - tipografia
Page 53: Aula EE - tipografia

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;

Page 54: Aula EE - tipografia

Decorativo utilização limitada

Page 55: Aula EE - tipografia
Page 56: Aula EE - tipografia
Page 57: Aula EE - tipografia
Page 58: Aula EE - tipografia

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;

Page 59: Aula EE - tipografia

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;

Page 60: Aula EE - tipografia

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?

Page 61: Aula EE - tipografia

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:

Page 62: Aula EE - tipografia

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

Page 63: Aula EE - tipografia

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.

Page 64: Aula EE - tipografia

+ LEGIBILIDADEMAXIMO: 3 TIPOS DIFERENTES

Page 65: Aula EE - tipografia
Page 66: Aula EE - tipografia
Page 67: Aula EE - tipografia
Page 68: Aula EE - tipografia
Page 69: Aula EE - tipografia
Page 70: Aula EE - tipografia
Page 71: Aula EE - tipografia

+fontes - LEGIBILIDADE

Page 72: Aula EE - tipografia
Page 73: Aula EE - tipografia
Page 74: Aula EE - tipografia
Page 75: Aula EE - tipografia
Page 76: Aula EE - tipografia

Espaçamento

Page 77: Aula EE - tipografia

Espaçamento entre letras

Page 78: Aula EE - tipografia

Espaçamento entre letras

Page 79: Aula EE - tipografia

Espaçamento entre linhas

Page 80: Aula EE - tipografia

Alinhamento

Page 81: Aula EE - tipografia

Alinhamento

Page 82: Aula EE - tipografia

Centralizar, ainda não

Page 83: Aula EE - tipografia

Centralizar, ainda não

Page 84: Aula EE - tipografia

Centralizar, ainda não

Page 85: Aula EE - tipografia

Centralizar, ainda não

Page 86: Aula EE - tipografia

Centralizar, ainda não

Page 87: Aula EE - tipografia

Centralizar, ainda não

Page 88: Aula EE - tipografia

Centralizar, ainda não

Page 89: Aula EE - tipografia

Não Centralize, ainda

Page 90: Aula EE - tipografia

Classificações Tipográficas

Page 91: Aula EE - tipografia

seres humanos não lêem as palavras letra a letra, mas em blocos

Serifas respondem

Page 92: Aula EE - tipografia

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

Page 93: Aula EE - tipografia
Page 94: Aula EE - tipografia
Page 95: Aula EE - tipografia

POR QUE?

Page 96: Aula EE - tipografia
Page 97: Aula EE - tipografia
Page 98: Aula EE - tipografia
Page 99: Aula EE - tipografia
Page 100: Aula EE - tipografia

1982

Page 104: Aula EE - tipografia
Page 105: Aula EE - tipografia
Page 106: Aula EE - tipografia
Page 107: Aula EE - tipografia

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