95
Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Embed Size (px)

Citation preview

Page 1: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

AULA 001Principios de Tipografia

Page 2: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

O que e 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;• É a principal ferramenta de comunicação, que permite dar expressão ao documento, transmitindo instantaneamente uma atmosfera e imagem.

Page 3: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

A tipografia nos envolve em todos os momentos do dia – dos mundanos itens listados nas contas que pagamos, nas etiquetas de alimentos até aos bombardeios de experiências alfabéticas em cartazes, na internet e na TV. Passamos por milhares de mensagens tipográficas todos os dias, a maioria das quais ignoramos ou nem mesmo enxergamos.

Page 4: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

Existe uma crescente valorização de imagens e suas aplicações, mas a palavra escrita continua muito importante para informar e comunicar. A tipografia desempenha um papel muito importante na sinalização. As regras para utilização de tipografia para sinalização podem sofrer algumas alterações em relação às utilizadas para a área editorial, ela precisa ser de rápida compreenssão e legibilidade.

Page 5: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

As tipografias podem ser avaliadas de acordo sua:

• Anatomia • Genealogia• Classificação • Composição

Page 6: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Anatomia

Claro que nenhum designer/publicitário seria demitido de um emprego por se referir à orelha da letra g, por exemplo, como “aquela coisinha bonitinha que sai da parte de cima e que faz um ‘rabinho’”, ou por não saber a diferença entre uma terminal e um remate, mas certamente não custa nada aprender.

Page 7: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Anatomia

Page 8: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Anatomia

Page 9: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Anatomia

Page 10: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Anatomia

Page 11: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Anatomia

A tipografia pode ser apresentada de 3 formas:

Page 12: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Anatomia (curiosidade)

Caixa alta e baixa derivam da organização dos tipos emcaixas de madeira sobre um cavalete, na oficina.

Page 13: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Anatomia (curiosidade)

Page 14: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Genealogia ou família

É um conjunto de tipograficas com as mesmas características estilísticas fundamentais, porém apresentadas com variações de espessura, largura, altura e outros detalhes.

Page 15: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Genealogia ou família

Algumas destas variações são mais frequentes nas famílias tipográficas e recebem nomes que se tornaram conhecidos pelo público em geral, tais como bold (negrito), light (claro), regular, itálico, condensed, dentre outros.

Page 16: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Genealogia ou família

Page 17: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Genealogia ou família

Page 18: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Tradicionalmente a tipografia é classificada em 6 grandes grupos: estilo antigo, moderno, serifado, sem serifa, manuscrito/cursivo e decorativas.

Page 19: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Outra forma de classificar os tipos é agrupá-los segundo correntes históricas, esse tipo de classificação leva em consideração os diferentes movimentos tipográficos ao longo do tempo e as suas consequentes transformações estéticas.

Page 20: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Estilo AntigoBaseado na escrita à mão dos escribas, que trabalhavam com uma pena na mão;

Page 21: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Estilo AntigoExemplos de sensações: antigo, tradição, requinte, confiabilidade, artesanal, sofisticação.

Exemplos: Goudy, Times e Palatino.

Page 22: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Estilo Antigo

Page 23: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

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

Page 24: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

ModernoExemplos de sensações: solidez, força, robustez, destaque.

Exemplos: Bodoni, Times Bold e New Century Schoolbook.

Page 25: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Moderno

Page 26: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

SerifadoTambém conhecido como estilo egípcio, surgiu depois da Revolução Industrial como conceito de propaganda.

Page 27: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

SerifadoExemplos de sensações: padronização, seriedade.Exemplos: Clarendon, Memphis e Memphis Bold.

Page 28: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Serifado

Page 29: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Sem serifaMais conhecido como sans serif, foi elaborada em 1919, pela Escola de Artes Alemã e Ofício de Weimar, Bauhaus. Estética clara legível, letras minúsculas e geométricas com linhas obliquas e verticais, rejeita ornamentos e apresenta grandes numerais e símbolos.

Page 30: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Sem serifaExemplos de sensações: clean, rigidez, exatidão, inovação.

Exemplos: Antique Olive, Formata, Gill Sans, Sans serif, Arial, Franklin Gothic.

Page 31: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Sem serifa

Page 32: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

ManuscritoSimulam letras cursivas, como se fossem feitas a mão. Possui vários estilos que se apropriam de alguns elementos de outros tipos.

Page 33: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

ManuscritoExemplos de sensações: realidade, verídico, artesanal.

Page 34: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Manuscrito

Page 35: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

DecorativoApresenta variações exageradas de peso e tamanho, contornos algumas vezes arrojados e ornamentos.

Page 36: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

DecorativoExemplos de sensações: luxo, encanto, requinte, riqueza, extravagância, excesso.

Page 37: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Decorativo

Page 38: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

Page 39: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

CUIDADO AO SELECIONAR UMA TIPOGRAFIA!!!

Page 40: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

• O que vai ser lido?• Por quem vai ser lido?• Em que vai ser aplicado o texto?• Onde vai ser lido?

Page 41: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Classificação

• A personalidade da fonte;• A natureza da ideia/conceito;• O perfil do cliente-anunciante;• O Público-alvo;• A Legibilidade.

Page 42: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição

Esta é a atividade que ocupa maior tempo do designer – de maneira bem direta, dispor as letras em palavras, palavras em frases, frases em parágrafos e parágrafos em layout. Alguns princípios e semânticaa respeito de espaçamento, organização e uso adequado de pontuação são imperativos para uma composição competente.

Page 43: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição

- Alinhamento;- Espaço entre linhas (leading);- Espaço entre letras/entreletras (tracking);- Kerning;

Page 44: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição

- Órfãs e Viúvas (Forcas);- Pontuação pendente;- Pontuação;- Legibilidade e Leiturabilidade.

Page 45: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Alinhamento

Page 46: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Espaço entre linhas (leading)

Também chamado de entrelinha, é o espaço colocado entre duas linhas de texto. O inglês ‘leading’ vem das tiras de chumbo (‘lead’) que eram usadas para este efeito.

Page 47: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Espaço entre linhas (leading)

A medida da entrelinha é igual ao corpo mais o espaçoou, mais corretamente, de linha de base a linha de base.

Page 48: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Espaço entre linhas (leading)

Page 49: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Espaço entre letras (tracking)

Também chamado de entreletras, é o espaço total entre cada letra. É possível espaçar as letras de maneira fechada ou mais aberta. Versaletes e maiúsculas se beneficiam de uma espaçamento mais generoso.

Page 50: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Espaço entre letras (tracking)

Trata-se de um processo de adicionar ou remover espaço em todo um bloco de texto, ou seja, mexe-se no espaçamento existente em todo o conjunto de letras por igual, seja uma única palavra, frase, parágrafo inteiro.

Page 51: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Espaço entre letras (tracking)

Page 52: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Espaço entre letras (tracking)

O espaçamento entre palavras deve ser o menorpossível e sobretudo consistente. Espaço inconsistentecria ‘rios’ no texto, dificultando a leitura. Estes espaçossão também conhecidos como ‘dentes de cavalo’ ou ‘janelas’.

Page 53: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Espaço entre letras (tracking)

Page 54: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Espaço entre letras (tracking)

Page 55: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Kerning

É o espaço entre duas letras específicas. É ajustado independente do tracking. Cada par de letras tem o seu kerning definido na fonte digital, mas por vezes são necessários ajustes manuais, sobretudo em tamanhos grandes.

Page 56: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Kerning

Parte das letras que ‘sai fora’ do bloco para permitir o encaixe de outras letras que caso contrário ficariam demasiado afastadas, opticamente.

Page 57: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Kerning

Page 58: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Órfãs e viúvas (Forcas)

• Órfãs: ocorrem quando a primeira linha de um parágrafo começa no final de uma página ou coluna.

• Víuvas: ocorrem quando a última linha do parágrafo é a primeira de uma coluna ou página.

Page 59: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Órfãs e viúvas (Forcas)

Page 60: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Pontuação pendente

Page 61: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Pontuação pendente

Page 62: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Pontuação

• Aspas: “aspas”• Primo: ‘primo’ | 15’ (minutos) | 30’’ (segundos)• Hífen: neo-acadêmico | pre-pa-ra!

Page 63: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Pontuação

• Travessão-n: aberto das 13:00 – 15:00 (alt + 0150)• Travessão-m: Então — timidamente — beijaram-se. (alt + 0151)• Reticências: E … Ação! (alt + 0133)

Page 64: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Legibilidade

Refere-se ao aspecto geral de cada letra e a habilidade do leitor em distinguir uma das outras.• C – G • I – l – 1 • c – e• E – F • i – j • rn – m• N – H • b – h • Ti – T1

Page 65: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Legibilidade

A legibilidade deve manter um equilíbrio entre:• Necessidades expressivas;• Tamanho do texto;• Corpo de fonte;• Adequação à mídia.

Page 66: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

• Composição » Leiturabilidade

Refere-se a como o tipo se comporta em um texto.

• Tipografia de leitura contínua ou de longa durabilidade (funcionais)• Tipografia efêmera ou de impacto(características)

Page 67: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia
Page 68: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia
Page 69: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia
Page 70: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia
Page 71: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

13 REGRINHAS BÁSICAS PARA O USO CORRETO DE TIPOGRAFIAS

Page 72: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

01. Para uma legibilidade máxima, escolha tipos clássicos e testados ao longo do tempo, com um “cadastro” comprovado.

Page 73: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

01.

Page 74: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

02. Um texto composto somente em caixa-alta atrasa muito a leitura. Utilize caixa-alta e baixa para obter a melhor leiturabilidade possível.

Page 75: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

03. Tenha o bom senso de não utilizar demasiados tipos diferentes ao mesmo tempo. A simplicidade é mais importante que o exibicionismo.

Page 76: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

03.

Page 77: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

03.

Page 78: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

04. Realce os elementos no texto com sutileza e sem perturbar o fluxo da leitura. No design, menos é mais.

Page 79: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

04.

Page 80: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

05. Utilize comprimentos de linha adequados. As linhas demasiado curtas ou compridas prejudicam o processo de leitura. Pois os olhos devem viajar pelas linhas, captando as palavras em grupos de três ou quatro de cada vez e saltando de linha sem esforço.

Page 81: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

05.

Page 82: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

05.

Page 83: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

06. Os títulos devem ser maiores que o corpo do texto e surgir acima deste. O estabelecimento de uma hierarquia visual é importante para comunicar claramente.

Page 84: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

07. O texto principal deve ser de um tamanho legível para o meio em que é aplicado. Texto demasiado pequeno ou demasiado grande torna-se cansativo e difícil de ler. A distância e o tempo de leitura é um dos fatores mais importantes a ter em mente.

Page 85: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

08. Deve utilizar-se um tipo de letra standardizado. Letras decorativas e de pobre legibilidade devem ser escassamente usadas e nunca para texto corrido.

Page 86: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

08.

Page 87: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

09. O espaço entre pares de letras, letras numa frase e palavras deve ser consistente. O texto deve criar linhas fáceis de seguir pelo olhar, letras ou palavras demasiado juntas ou afastadas criam distração e impedem a leitura.

Page 88: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

10. Elementos de ênfase devem ser discretos. O itálico e o negrito são formas preferenciais de dar ênfase a uma passagem, pois não quebra o ritmo de leitura e não deixa de transmitir a enfatização pretendida.

Page 89: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

11. Apenas se deve recorrer à justificação completa (esquerda e direita), quando temos controle total sobre kerning, tracking e hifenização, caso contrário, deve alinhar-se à esquerda. A justificação total em sistemas que não suportam controle tipográfico do espacejamento criam espaços e perdem a consistência.

Page 90: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

12. As linhas não devem ser curtas, nem longas demais. A linha ideal tem 66 caracteres* (incluindo espaços), porque ajuda a ler rapidamente e permite uma eficiente mudança de linha (fim de uma linha para o início da linha seguinte).

*50 a 80 caracteres é aceitável.

Page 91: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

12. Se a linha for mais curta, deve reduzir-se o tamanho da letra, se for mais longa, deve aumentar-se o tamanho da letra. Se o leitor sentir, fisicamente, os olhos a andar da direita para a esquerda no fim de uma linha... está longa demais.

Page 92: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

13. Quando possível, deve indentar-se os parágrafos. O primeiro parágrafo de uma página não precisa de indentação.

Page 93: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

13.

Page 94: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia
Page 95: Editoração Eletrônica e Diagramação AULA 001 Principios de Tipografia

Editoração Eletrônica e Diagramação

estudiomultifoco.com.br/ftc