Tipografia

TipografiaEstudo da arte e processo de criação de caracteres

Composição de Páginas webOdair Cavichioli Jr.

2O 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;

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.

Composição de Páginas webOdair Cavichioli Jr.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.

3


A b e f j

Estrutura de um tipo4

ÁpiceÁpice

HasteHaste

TraveTrave

Base ou pé

Curva ou flexãoCurva ou flexão

Base ou péBase ou pé

BarrigaBarriga TerminalTerminal

CaudaCauda


k o j M

Estrutura de um tipo5

VérticeVérticeAnel e brancoAnel e branco

BraçoBraço

Serif (serifa)ou remate

Serif (serifa)ou remate

Composição de Páginas webOdair Cavichioli Jr.Corpo visual

6

OlhoOlho superior

AbeDjghijOlho inferior

Olho médio

Corpo Visual


7Maiú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



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;

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;

Composição de Páginas webOdair Cavichioli Jr.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)

10

Composição de Páginas webOdair Cavichioli Jr.Exemplo de tamanhos de corpo

11

Exemplo Tamanho do Corpo

ABCDEFabcdef 6

ABCDEFabcdef 8

ABCDEFabcdef 10

ABCDEFabcdef 12

ABCDEFabcdef 16

ABCDEFabcdef 26

ABCDEabcde 48

ABCabc 72

Composição de Páginas webOdair Cavichioli Jr.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:

12


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


14Alltype

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.

Composição de Páginas webOdair Cavichioli Jr.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.

15

Composição de Páginas webOdair Cavichioli Jr.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

16


17Composição tipográfica

Repetição: cria um padrão de identidade visual

com o leitor, estabelecendo uma hierarquia;

Estuda que você passa


18Composiçã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.

Composição de Páginas webOdair Cavichioli Jr.Á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.

19

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.

Composição de Páginas webOdair Cavichioli Jr.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

20


21Classificaçã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



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



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



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



Manuscrito

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;



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;



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;



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;

Composição de Páginas webOdair Cavichioli Jr.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?

29


30Tipografia 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:

Atualmente, até os browsers já começaram a apresentar diferenças na exibição de tipos, alterando o espaçamento e inserindoanti-serrilhado.


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


32Referência bibliográfica

As informações contidas nessa apresentação foram elaboradas com base na minha

experiência profissional que, em algum momento, podem contradizer o que é explicado

na teoria.

Existem algumas informações que são encontradas na Wikipédia. Porém, como seu

conteúdo pode ser alterado por qualquer pessoa, sua credibilidade é questionável. Só

utilize informações da Wikipédia se você já conhece o assunto e concorda com as

definições.

Projeto Gráfico: Teoria e Prática da Diagramação Antônio Celso Collaro

Editora Summus Editorial

2006

Planejamento Visual Gráfico Milton Ribeiro

Editora LGE

2007

TipografiaEstudo da arte e processo de criação de caracteres

Odair Cavichioli Júnior

www.odaircavichioli.com.br

Tipografia

Technology

Transcript of Tipografia