5º Aula FAPEN - TIPOGRAFIA

8/2/2019 5 Aula FAPEN - TIPOGRAFIA

1/31

Composio e Projeto

VISUALTipograf

ia

.Verg

ne


2/31

TIPOGRAFIA: DEFINIO 1

Tipografia compreende o desenho e a produo de letras e asua adequada distribuio e espaamento sobre umasuperfcie para transmitir informao e facilitar acompreenso.


3/31

TIPOGRAFIA: DEFINIO 2

A tipografia (do grego typos "forma" e graphein "escrita")

a arte e o processo de criao na composio de um texto, fsica oudigitalmente. Assim como no designgrfico em geral, o objetivo principalda tipografia dar ordem estrutural e forma comunicao impressa
http://pt.wikipedia.org/wiki/Artehttp://pt.wikipedia.org/wiki/Processohttp://pt.wikipedia.org/wiki/Textohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Textohttp://pt.wikipedia.org/wiki/Processohttp://pt.wikipedia.org/wiki/Arte


4/31

TIPOGRAFIA: Viso Geral

Na maioria dos casos, uma composio tipogrfica deve ser especialmente

legvel e visualmente envolvente, sem desconsiderar o contexto em que lido e osobjetivos da sua publicao.

Em trabalhos de design grfico experimental (ou de vanguarda-atuais) osobjetivos formais extrapolam a funcionalidade do texto, portanto questes comolegibilidade, nesses casos, podem acabar sendo relativas.

No uso da tipografia o interesse visual realizado atravs da escolha adequadade fontestipogrficas, composio (ou layout) de texto, a sensibilidade para o tomdo texto e a relao entre texto e os elementos grficos na pgina. Todos esses fatoresso combinados para que o layout final tenha uma atmosfera ou ambienteapropriado ao contedo abordado

Por muito tempo o trabalho com a tipografia, como atividade projetual e industrialgrfica, era limitado aos tipgrafos (tcnicos ou designers especializados), mas com oadvento da computao grfica a tipografia ficou disponvel para designersgrficos emgeral e leigos.

Hoje qualquer um pode escolher uma fonte (tipo de letra) e compor um textosimples em um processadordetexto. Mas essa democratizao tem um preo, pois afalta de conhecimento e formao adequada criou uma proliferao de textos malDiagramadose fontestipogrficas mal desenhadas.

Talvez os melhores exemplos desse fenmeno possam ser encontrados na internet.
http://pt.wikipedia.org/wiki/Legibilidadehttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Funcionalidadehttp://pt.wikipedia.org/wiki/Legibilidadehttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Layouthttp://pt.wikipedia.org/wiki/Layouthttp://pt.wikipedia.org/wiki/Tip%C3%B3grafoshttp://pt.wikipedia.org/wiki/Designers_gr%C3%A1ficoshttp://pt.wikipedia.org/wiki/Designers_gr%C3%A1ficoshttp://pt.wikipedia.org/wiki/Designers_gr%C3%A1ficoshttp://pt.wikipedia.org/wiki/Fontehttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Diagramadoshttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Diagramadoshttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Processador_de_textohttp://pt.wikipedia.org/wiki/Fontehttp://pt.wikipedia.org/wiki/Designers_gr%C3%A1ficoshttp://pt.wikipedia.org/wiki/Designers_gr%C3%A1ficoshttp://pt.wikipedia.org/wiki/Designers_gr%C3%A1ficoshttp://pt.wikipedia.org/wiki/Tip%C3%B3grafoshttp://pt.wikipedia.org/wiki/Layouthttp://pt.wikipedia.org/wiki/Layouthttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Fontes_tipogr%C3%A1ficashttp://pt.wikipedia.org/wiki/Legibilidadehttp://pt.wikipedia.org/wiki/Funcionalidadehttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Design_gr%C3%A1ficohttp://pt.wikipedia.org/wiki/Legibilidade


5/31

Prensa mecnica em uso,xilogravura*, 1568

Mesmo com o advento dosComputadores e da edio eletrnicade texto, a tipografia permanece viva

nas formataes,estilos e grafias.

*Xilogravura a tcnica de gravurana qual se utiliza madeira como matrize possibilita a reproduo da imagem

gravada sobre papel ou outrosuporte adequado. um processomuito parecido com um carimbo.

uma tcnica em que se entalha

na madeira, com ajuda de instrumentocortante, a figura ou forma (matriz) quese pretende imprimir. Em seguida usa-se

um rolo de borracha embebecida emtinta, tocando s as partes elevadas do

entalhe.
http://pt.wikipedia.org/wiki/Gravurahttp://pt.wikipedia.org/wiki/Madeirahttp://pt.wikipedia.org/wiki/Tintahttp://pt.wikipedia.org/wiki/Tintahttp://pt.wikipedia.org/wiki/Madeirahttp://pt.wikipedia.org/wiki/Gravura


6/31

Xilogravuras do sculo XVI ilustrando a produo da xilogravura. No primeiro: ele esboa a gravura.Segundo: ele usa um buril para cavar o bloco de madeira que receber a tinta


7/31

SERIFA: DEFINIO

Na tipografia, as serifas so os pequenos traos e prolongamentos que

ocorrem no fim das hastes das letras. As famlias tipogrficas sem serifas soconhecidas como sans-serif (do francs "sem serifa"), tambm chamadas grotescas(de francs grotesqueou do alemo grotesk). A classificao dos tipos em serifados eno-serifados considerado o principal sistema de diferenciao de letras.

Tipicamente, os textos serifados so usados em blocos de texto pois as serifastendem a guiar o olhar atravs do texto. O ser humano l palavras ao invs de letrasindividuais, assim as letras serifadas parecem juntar-se devido aos seusprolongamentos, unindo as palavras. Por outro lado, os tipos sem-serifa costumamser usados em ttulos e chamadas, pois valorizam cada palavra individualmente etendem a ter maior peso e presena para os olhos ("chamando a ateno"), j queparecem mais limpos.

Tipo sem serifa

Tipo com serifa ou serifado

Serifas em vermelho
http://pt.wikipedia.org/wiki/Tipografiahttp://pt.wikipedia.org/wiki/L%C3%ADngua_francesahttp://pt.wikipedia.org/wiki/Tipohttp://pt.wikipedia.org/wiki/Tipohttp://pt.wikipedia.org/wiki/L%C3%ADngua_francesahttp://pt.wikipedia.org/wiki/Tipografia


8/31

SERIFA: EXEMPLOS

Tipos serifados

BemboBodoniCaslonDejaVu Serif

DidotGaramondLiberation SerifPalatinoTimes New Roman

Ex: ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
http://pt.wikipedia.org/wiki/Bembohttp://pt.wikipedia.org/wiki/Bodonihttp://pt.wikipedia.org/wiki/Caslonhttp://pt.wikipedia.org/wiki/DejaVu_Serifhttp://pt.wikipedia.org/wiki/Garamondhttp://pt.wikipedia.org/wiki/Liberation_Serifhttp://pt.wikipedia.org/wiki/Palatino_%28tipografia%29http://pt.wikipedia.org/wiki/Times_New_Romanhttp://pt.wikipedia.org/wiki/Times_New_Romanhttp://pt.wikipedia.org/wiki/Times_New_Romanhttp://pt.wikipedia.org/wiki/Times_New_Romanhttp://pt.wikipedia.org/wiki/Times_New_Romanhttp://pt.wikipedia.org/wiki/Times_New_Romanhttp://pt.wikipedia.org/wiki/Palatino_%28tipografia%29http://pt.wikipedia.org/wiki/Liberation_Serifhttp://pt.wikipedia.org/wiki/Liberation_Serifhttp://pt.wikipedia.org/wiki/Liberation_Serifhttp://pt.wikipedia.org/wiki/Garamondhttp://pt.wikipedia.org/wiki/DejaVu_Serifhttp://pt.wikipedia.org/wiki/DejaVu_Serifhttp://pt.wikipedia.org/wiki/DejaVu_Serifhttp://pt.wikipedia.org/wiki/Caslonhttp://pt.wikipedia.org/wiki/Bodonihttp://pt.wikipedia.org/wiki/Bembo


9/31

SERIFA: EXEMPLOS

Tipos sem serifa ou bastonadosAkzidenz Grotesk

ArialArial BlackAvantgarde

CalibriDejaVu SansFranklin GothicFrutiger

FuturaGill Sans

HelveticaImpactLiberationSans

MS Sans SerifOptimaSegoe UIUnivers

Verdana

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
http://pt.wikipedia.org/wiki/Akzidenz_Groteskhttp://pt.wikipedia.org/wiki/Arialhttp://pt.wikipedia.org/wiki/Calibrihttp://pt.wikipedia.org/wiki/DejaVu_Sanshttp://pt.wikipedia.org/wiki/Futura_%28tipografia%29http://pt.wikipedia.org/wiki/Gill_Sanshttp://pt.wikipedia.org/wiki/Helveticahttp://pt.wikipedia.org/wiki/Liberation_Sanshttp://pt.wikipedia.org/wiki/Liberation_Sanshttp://pt.wikipedia.org/wiki/MS_Sans_Serifhttp://pt.wikipedia.org/wiki/Optimahttp://pt.wikipedia.org/wiki/Segoe_UIhttp://pt.wikipedia.org/wiki/Univershttp://pt.wikipedia.org/wiki/Verdanahttp://pt.wikipedia.org/wiki/Verdanahttp://pt.wikipedia.org/wiki/Univershttp://pt.wikipedia.org/wiki/Segoe_UIhttp://pt.wikipedia.org/wiki/Segoe_UIhttp://pt.wikipedia.org/wiki/Segoe_UIhttp://pt.wikipedia.org/wiki/Optimahttp://pt.wikipedia.org/wiki/MS_Sans_Serifhttp://pt.wikipedia.org/wiki/MS_Sans_Serifhttp://pt.wikipedia.org/wiki/MS_Sans_Serifhttp://pt.wikipedia.org/wiki/MS_Sans_Serifhttp://pt.wikipedia.org/wiki/MS_Sans_Serifhttp://pt.wikipedia.org/wiki/Liberation_Sanshttp://pt.wikipedia.org/wiki/Liberation_Sanshttp://pt.wikipedia.org/wiki/Liberation_Sanshttp://pt.wikipedia.org/wiki/Helveticahttp://pt.wikipedia.org/wiki/Gill_Sanshttp://pt.wikipedia.org/wiki/Gill_Sanshttp://pt.wikipedia.org/wiki/Gill_Sanshttp://pt.wikipedia.org/wiki/Futura_%28tipografia%29http://pt.wikipedia.org/wiki/DejaVu_Sanshttp://pt.wikipedia.org/wiki/DejaVu_Sanshttp://pt.wikipedia.org/wiki/DejaVu_Sanshttp://pt.wikipedia.org/wiki/Calibrihttp://pt.wikipedia.org/wiki/Arialhttp://pt.wikipedia.org/wiki/Akzidenz_Groteskhttp://pt.wikipedia.org/wiki/Akzidenz_Groteskhttp://pt.wikipedia.org/wiki/Akzidenz_Grotesk


10/31

SERIFA: EXEMPLOS- Ideia de juno da palavra


11/31

TIPOGRAFIA X TIPOLOGIA

Tipologia: processo de classificao ou estudo de umconjunto, qualquer que seja a natureza dos elementosque o compem, para determinao das categorias emque se distribuem, segundo critrios definidos.


12/31

O TIPO

Maisculas: ABCDEFGHIJLMNOPQRSTUVXZMinsculas: abcdefghijlmnopqrstuvxzVersaletes: caixa alta semelhante altura-X


13/31

O TIPO

Ligaturas: minsculas unidas, em geral, por suas ascendentes.

Acentos grfico: ~^Algarismos: 1,2,3,4,5,6,7,8,9,10. Podem ser alinhados ou no pela base.Fraes: 1/4, 1/2, 2/3Sinais de pontuao: . : ; ? { ]Smbolos monetrios: $Smbolos de operaes matemticas: +, =, Smbolos comerciais: &


14/31

TIPOGRAFIA: PARTES DO TIPO


15/31

TIPOGRAFIA: Exemplo de LOGOTIPOEstudo e Analise


16/31

TIPOGRAFIA: VARIAES DO TIPO

quanto ao tamanho

quanto a forma

quanto ao peso

espessura dos traos

quanto a inclinao

quanto a largura do tipo


17/31

TIPOGRAFIA: FAMLIAS TIPOGRFICAS - CLASSIFICAO VOX/ ATYPI

1. Romanos2. Lineares (ou sem serifa)

3. Incisos4. Manuais5. Manuscristos6.Gticos7.No latinos

reas afins...Identidade VisualSinalizaoEditorial (jornais,revistas, livros, folders)Embalagem

Internet
http://pt.wikipedia.org/wiki/Identidade_Visualhttp://pt.wikipedia.org/wiki/Sinaliza%C3%A7%C3%A3ohttp://pt.wikipedia.org/wiki/Editorialhttp://pt.wikipedia.org/wiki/Embalagemhttp://pt.wikipedia.org/wiki/Internethttp://pt.wikipedia.org/wiki/Internethttp://pt.wikipedia.org/wiki/Embalagemhttp://pt.wikipedia.org/wiki/Editorialhttp://pt.wikipedia.org/wiki/Sinaliza%C3%A7%C3%A3ohttp://pt.wikipedia.org/wiki/Identidade_Visual


18/31


19/31


20/31


21/31


22/31


23/31


24/31


25/31


26/31


27/31


28/31


29/31


30/31


31/31

Documents

5º Aula FAPEN - TIPOGRAFIA