5º Aula FAPEN - TIPOGRAFIA
-
Upload
fernando-souza -
Category
Documents
-
view
221 -
download
0
Transcript of 5º Aula FAPEN - TIPOGRAFIA
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
1/31
Composio e Projeto
VISUALTipograf
ia
.Verg
ne
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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.
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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 -
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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 -
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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 -
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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/2/2019 5 Aula FAPEN - 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 -
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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 -
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
10/31
SERIFA: EXEMPLOS- Ideia de juno da palavra
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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.
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
12/31
O TIPO
Maisculas: ABCDEFGHIJLMNOPQRSTUVXZMinsculas: abcdefghijlmnopqrstuvxzVersaletes: caixa alta semelhante altura-X
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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: &
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
14/31
TIPOGRAFIA: PARTES DO TIPO
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
15/31
TIPOGRAFIA: Exemplo de LOGOTIPOEstudo e Analise
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
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 -
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
18/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
19/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
20/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
21/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
22/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
23/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
24/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
25/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
26/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
27/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
28/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
29/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
30/31
-
8/2/2019 5 Aula FAPEN - TIPOGRAFIA
31/31