You are on page 1of 42

4tipografia

| li n h a d o te m p o
| c la s s i fi c a ç ã o
| ti p ó g ra fo s \ ty p e d e s i g n e rs
| le tra
| te x to
| e x e rc í c i o s

4 Professor Fabio Silveira | Projeto Tipográfico

O trabalho Aulas_Tipografia do Professor Fabio Silveira foi licenciado com uma Licença Creative Commons - Atribuição-
NãoComercial-CompartilhaIgual 3.0 Não Adaptada. Podem estar disponíveis autorizações adicionais ao âmbito desta
licença em fabio.designerbr@gmail.com. Este é um trabalho destinado ao âmbito acadêmico. O uso das imagens neste
documento servem apenas para ilustrar os exemplos dos conceitos e tecnicas apresentadas em sala de aula.

6000 a 4000 a.c | história 2

pictogramas
Figuras ou símbolos que
representam um objeto como
forma de comunicação.

Ideogramas
Representação de ideias e formas
abstratas (dia, Luz, claridade, etc)

Tipografia 4 Professor Fabio Silveira

3000 / 1300 a.c | história 3

Sumérios
Escrita cuneiforme
(objetos em formato de cunha).
600 símbolos

Fenícios
Primeiro Sistema alfabético,
com 22 símbolos.

Tipografia 4 Professor Fabio Silveira

900 / 400 a.c | história 4

Gregos
Baseados no alfabeto dos
Fenícios, os gregos criaram
um sistema completo de
alfabetos, com consoantes
e vogais, contruído com
formas geométricas

Etruscos (Itália, região da Toscana)
Baseado no alfabeto grego,
tinha 20 letras,
sendo 16 consoantes
e 4 vogais.

Tipografia 4 Professor Fabio Silveira

Inscrição Augustana. I a IV | história 5 Coluna de Trajano.SEc. — Formas geométricas — terminações serifadas Tipografia 4 Professor Fabio Silveira . FInal do Sec. I Capitulares Quadradas Romanas 23 letras adaptadas a partir do alfabeto etrusco.

é a versão caligráfica e condensada da capitular quadrada romana. I a IV | história 6 Capitais rústicas (romana script) Feitas com caneta sobre o papyrus.SEc. Tipografia 4 Professor Fabio Silveira .

Tipografia 4 Professor Fabio Silveira . Economia do papiro e as formas amplas das unciais são mais legíveis em tamanos menores. I a IV | história 7 Uncial Script Usadas pelos escribas em textos sagrados da igreja.SEc.

determina a padronização dos textos eclesiáticos. Carlos Magno.SEc. I a IV | história 8 Semi Uncial Script Introdução de caixa baixa caligráfica. Tipografia 4 Professor Fabio Silveira . formalização da escrita cursiva. Surgimento oficial da caixa-baixa.

SEc. capitulares e sinais de pontuação durante um século. De 796 a 804 sobre a supervisão do abade de São Martinho de Tours um grande número de monges transcreveram praticamente todos os textos eclesiásticos fixando um padrão da caligrafia na utilização da caixa-alta e caixa-baixa. Tipografia 4 Professor Fabio Silveira . VIII a XI | história 9 Carolíngias Consolidação dos caracteres em caixa baixa.

SEc. XIV | história 10 Blackletter Deesenhada pelos escribas da Idade Média tinha a função de aproveitar melhor o espaço na página — Escura — Condensada — Angular Tipografia 4 Professor Fabio Silveira .

tipografia | Clássico / Old Style 11 *1450 †1518 Francesco Griffo Francesco Griffo *1490 †1561 *1606 †1669 Claude Garamond Claude Christoffel van Dijck Christoffel van Dijck Garamond Johann Francesco Griffo Gutemberg cria a primeira fonte *1580 †1658 inventa o itálica baseada Jean Jannon Jean Jannon tipo móvel. Design Editorial 4 Professor Fabio Silveira . numa caligrafia 1450 1500 1600 1700 : 1455 60 70 1465 80 90 10 20 30 40 50 60 70 80 90 10 20 30 40 50 60 70 80 1606 * 90 » 10 Gutenberg Sweynheym imprime a e Panartz criam William Caslon bíblia de o primeiro projeto 42 linhas tipográfico na Itália clá ssico / o ld sty le transitório m oderno b auhaus/suiços contem porâneos tip ó g ra fo s Romana de Griffo: Fragmento da impressão * n a scim e n to da obra De Ætna do † fa le cim e n to cardeal Bembo.

1530.Garamond | Tipógrafo 12 ^ Claude Garamond. Design Editorial 4 Professor Fabio Silveira . na oficina de Gutenberg em Mainz. > Tipos móveis > Página de um exemplar da Bíblia de 42 linhas. o primeiro livro europeu impresso por processo industrial. Foi o mais elegante Tipografo de toda a Renascença.

tipos móveis | história 13 Design Editorial 4 Professor Fabio Silveira .

1799 1845 Nicholas . Aloys Senefelder fonte semi-serifada concorrente direto Inveta a Litografia [san serif] de Caslon. Design Editorial 4 Professor Fabio Silveira .Louis Robert Besley *1706 †1775 Robert inventa projeta a primeira John Baskerville John Baskerville a maquina de fonte Claredon papel 1700 1800 10 20 30 40 50 60 70 80 90 10 20 30 40 50 1702 Philipe Grandjean cria Romain du Roi. XVIII 1791 1815 Bodoni cria o Vincent Figgins † 1716 . a primeira * 1606 Giambattista Bodoni †1813 Giambattista Bodoni » fonte transitório do séc.1728 1796 projeta a primeira Baskerville. cria seu alfabeto transitório.1728 William Caslon Estilo Moderno fonte slab William Caslon cria de fontes [serifa quadrada] a fonte Old Style que foi o modelo adotado até os dias de hoje.Tipografia | Transitório / Moderno 1784 14 Francois Ambroise Didot cria a pimeira fonte 1816 da era moderna Wiliam Caslon IV 1716 .1728 revolucionário projeta a primeira 1716 .

Caslon | Tipógrafo 15 Design Editorial 4 Professor Fabio Silveira .

Baskerville • Bodoni | Tipógrafos 16 Design Editorial 4 Professor Fabio Silveira .

Bodoni | Tipógrafos 17 Giambattista Bodoni — Composição — Rigorosidade e Limpeza Design Editorial 4 Professor Fabio Silveira .

Tipografia | Bauhaus /Tipos Suiços / Contemporâneo 18 *1878 1930 †1956 Paul Renner Futura Paul Renner *1928 1957 1976 Adrian Frutiger Univers Frutiger *1937 1994 Mathew Carter Verdana e Georgia 1850 1900 2000 60 70 80 90 10 20 30 40 50 60 70 80 90 00 *1985 Adobe introduz o formato Postscript *1882 †1947 Eric Gill 1928 Eric Gill Eric Gill / Gill Sans 1957 *1949 †1980 Max Miedinger Helvética Max Miedinger *1902 †1974 1928 Jan Tschichold Jan Tschichold Die Neue Typographie Design Editorial 4 Professor Fabio Silveira .

Revistas e Panfletos — Efeitos Tridimensionais — Função Decorativa .Tipografia | Bauhaus /Tipos Suiços / Contemporâneo 19 Tipografia Display — Revolução Industrial — Jornais.

bauhaus | simplicidade da forma 20 .

adrian frutiger | Tipógrafo 21 Design Editorial 4 Professor Fabio Silveira .

Jornal Londrino Times Marcou o fim do uso da Blackletter Design Editorial 4 Professor Fabio Silveira . designers 22 Stanley Morison Times new roman 1932.. typedesigners.tipógrafos | Tipógrafos..

designers 23 Paul Renner Futura 1928 Design Editorial 4 Professor Fabio Silveira .. typedesigners..tipógrafos | Tipógrafos.

. typedesigners.. designers 24 Paul Matew Eric Gill Erik Spiekermann Otl Aicher Renner carter Design Editorial 4 Professor Fabio Silveira .tipógrafos | Tipógrafos.

anos 80 | história 25 Tipografia Digital Design Editorial 4 Professor Fabio Silveira .

anos 90 | história 26 Expe- rimen- tação Design Editorial 4 Professor Fabio Silveira .

tipografos | alguns deles.. Dwiggins • Aldo Novarese • Saul Bass • Heinrich Jost • Ed Benguiat • Oswald Bruce Cooper • Wim Crouwel •Miguel Deslandes • Pablo Ferro • Daniel Gauthier • Francesco Griffo • Karlgeorg Hoefer • Alistair Johnson • Frank Jonen • Ray Larabie • Zuzana Licko • Harold Lohner • Tony Malone • John Marsh • Stanley Morison • Aldo Novarese • Phyllis Pearsall • Bruce Rogers • Berthold Wolpe • Hermann Zapf • Piet Zwart • Dirk voskens • Cristoffel van djick • jeffrey keedy • jonathan hoefler • neville brody • summer stone • crystian cruz • tony de marco • burritos do brasil • claudio rocha • guto lacaz • tipos do acaso Design Editorial 4 Professor Fabio Silveira ..A. Müller-Brockmann • Wolfgang Weingart • Gabriel Martínez Meave • Edward Johnston • Stanley Morison • Jan van Krimpen • Rudolf Koch • Karl Klingspor • W. 27 Hans Eduard Meier • Emil Ruder • Max Bill • Josef Müller- Brockmann • Hans Rudolf Bosshard • Max Caflisch • Josef Albers • Herbert Bayer • Moholy-Nagy • Paula Scher • Ellen Lupton • Wim Crouwell • Rudy VanderLans • David Carson • Emil Ruder • J.

4anatomia tipográfica | c la s s i fi c a ç ã o | a n a to m i a ti p o g rá fi c a | ti p o s p a ra te la | k e rn i n g e tra c k i n g | li g a tu ra 4 Professor Fabio Silveira | Projeto Tipográfico O trabalho Aulas_Tipografia do Professor Fabio Silveira foi licenciado com uma Licença Creative Commons .designerbr@gmail. Podem estar disponíveis autorizações adicionais ao âmbito desta licença em fabio. . Este é um trabalho destinado ao âmbito acadêmico.com. O uso das imagens neste documento servem apenas para ilustrar os exemplos dos conceitos e tecnicas apresentadas em sala de aula.Atribuição- NãoComercial-CompartilhaIgual 3.0 Não Adaptada.

é conhecidas por muitos leigos mas esta forma não explica a origem dos alfabetos que utilizamos.Tipografia | Classificação 29 srf srf com serifa e sem serifa A primeira e mais simples das classificacões. Jenson. Bookman. Italian Old Style.b.a e cx. Palatino. Lutetia. e Sabon Quadriga Antiqua. Platin Francesa. projetado para a imprensa Real [1460-1470]. Humanistas Old Style/Estilo Antigo Transicionais São originários dos primeiros Variação das fontes humanistas Classificação cuja base era precisa tipos romanos aparecidos na Itália com modificações nas cx. Stone Serif. Garamond. Baskerville. Goudy. Stempel Schneider Zapf International Design Editorial 4 Professor Fabio Silveira . Verona. Alfabetos venezianos.

Frankiln. American Typewriter. Walbaun. Só apareceu no século XIX. Bell. Giambattista Bodoni. Claredon. raiz de todas os tipos bastões. Helvética. Univers Design Editorial 4 Professor Fabio Silveira . tidos como grande nome Aachen. Arial. Gill Sans. Menphis Grotesque. Fenice. William Thorowgood produz a Didot. Kabel.Tipografia | Classificação 30 Modernos Slab serif sem serifa A elegância dos tipos e precisão Definidas pelo próprio nome. Eurostile. Bodoni. Lubalin Graphs. Optima. produzido pela fundidora Caslon.

Poster bodoni. Holandês desenhados com uma falsa ou [Caslon. Bauhaus. Old Style: Veneziano [Bauer text]. Geométrico [Futura. Neo Clarendon [Cheltman. XX [Centennial. Zapf Clarendon: Séc XIX [Bookman]. Séc. Platin] e Revival [Benguiat. Garamond. Clarendon Chancerry. Univers]. Novarese. Gill Sans]. Corona] Slab Serif: [Lublain Graf] Glíficos: [Friz Quadrata. Humanístico [Frutiger.Tipografia | Classificação 31 Displays Classificação Norte americana Alfabetos sem origens antigas. Neo Grotesque [Helvética. Peignot] Design Editorial 4 Professor Fabio Silveira . [Clarion. Zapf internacional] mesmo modernos. Cooperplate. Moderno: Didone [Bodoni. Broadway. Quadrada [Eurostile] Scripts: [Mistral. Didot]. Fenice] Belwe. Novarese] Sem serifa: Grotesque [Franklin Gothic]. Aldino [Bembo. inclassificável em serifadas ou não serifados ou Tradicionais: [Americana. Kabel]. Cooper black] curta serifa. Snell Roundhand] Gráficos: [American typewriter.

terminação bojo ligatura Olho aberto Haste vertical descendente [counter] ascendente orelha Altura de x Olho fechado cauda Haste horizontal serifa [counter] times garamond futura contraste eixo humanista eixo racionalista Ausência de eixo Tipografia 4 Professor Fabio Silveira [inclinação da escrita] [vertical] . a. Tipografia | anatomia do tipo 32 Hpxefgfi Altura da cx.

formas abertas foi projetada para o meio impresso. seja utilizada como fonte-padrão de curvas mais simples e formas mais abertas qe muitos computadores. a Times Roman também A Georgia é uma fonte serifada de tela projetada com é muito popular.Tipografia | Ajustes ópticos 33 Fontes de tela A suavização. tesses textos parecem desfocados. no entanto. foi projetada para impressão embora Sua construção possui uma altura de X maior. Tipografia 4 Professor Fabio Silveira . criada na Suiça em 1957. por Mathew Carter especialmente para a tela. Muitos designers (e leitores) preferem usar fontes de pixels neste caso LETRA SUAVIZADA LETRA BITMAP [ANTI-ALIASING] impresso x tela A Helvética. Em tamanhos menores. É a fonte padrão de muitos sites mas curvas simples. é eficaz para a reprodução de textos na tela em tamanhos grandes. e espacejamento generoso. A Verdana é uma fonte sem serifa projetada é uma das fontes mais famosas do mundo. a Helvética Criada para o jornal londrino. que usa tons de cinza para criar a ilusão de contornos curvos.

usada para caracterizar um parâmetro essencial: a altura das letras minúsculas. etc. U. Tipografia 4 Professor Fabio Silveira . altura-x (x-height. alemão). Versalhöhe. Altura da letra maiúscula X. é a Caps X medida da distância da linha base até ao topo de um xeh caractere com o M. X. inglês). indicada em pontos. inglês. W. Z. x height Quanto maior for a altura-x. T. Altura da letra minúscula x. em comparação com a altura das maiúsculas.Tipografia | anatomia do tipo 34 XEH altura das maiúsculas (Cap-height. Esta altura. maiores serão as letras minúsculas relativamente às maiúsculas.

tendo o ponto como unidade de medida. tem 12 pontos de altura. H Tipografia | anatomia do tipo 35 hdk ascendente [Tip] A parte das letras minúsculas que se prolonga ascendente acima da altura-x. t. k. f. Um alfabeto em corpo 12. d. Corpo Expressão utilizada para designar o tamanho das 12 pt letras. h. descendente Tipografia 4 Professor Fabio Silveira . l. A linha dos ascendentes (que define a altura máxi­ma dos ascendentes) pode ser um pouco pq j mais baixa que a linha de altura das maiúsculas. b. este recurso micro-tipográfico melhora a legibilidade da fonte e tem sido usado por numerosos typeface designers. Ascendentes têm as letras d.

Por exemplo: á. J. j. inglês) Apêndice do corpo de algumas letras (g. å. Tipografia 4 Professor Fabio Silveira . inglês. pontos e traços que se acrescentam a um caractere para alterar a fonética. K. R) que fica abaixo da linha de base. alemão). Nas letras K e R também pode ser chamado «perna». çâä cauda diacríticos [Tip] (diacritic signs. à. perna (tail. Q. Sinais. ä. gjR Tipografia título | história | anatomia do tipo 36 cauda. â. ã. diakritische Zeichen.

que é válido para a totalidade dos glifos. alemão) Espaço entre as letras (e os demais glifos) de um dado corte de uma fonte. Tipografia 4 Professor Fabio Silveira . alemão) O tracking pode ser normal (=default). avião Este valor é apropriado para o corte e a largura média dos caracteres. Sperren. Além deste espaçamento. que tem relação direta com as qualidades estéticas da fonte. os pares de kerning servem para ajustar de forma mais satisfatória certos pares de letras. inglês. (Spationieren.Tipografia título | história | anatomia do tipo 37 avião entreletra (tracking) [Tip] (tracking. Laufweite. O valor por defeito é um espaçamento pré-ajustado pelo autor da fonte. com valor prédefinido. solto ou apertado. Zeichenabstand.

francês) O principal traço vertical ou diagonal do glifo («tronco»). Tipografia 4 Professor Fabio Silveira . Um termo mais geral é o traço (stroke).Tipografia título | história | anatomia do tipo 38 haste ou fuste (stem. elemento essencial de muitas letras minúsculas e maiúsculas. Exemplos: o aHI A. alemão) Ajustamento individual do espaço entre duas letras. Não confundir com o tracking. o h. inglês. para compensar o excesso ou a escassez de espaço entre as mesmas. O kerning vem definido em pares de kerning (Kerning pairs). I. e até o y. derivados do desenho desses caracteres em particular. Kerning (Unterschneidung. o H (que tem dois). fût.

com dois ou mais caracteres. As ligaturas podem ser usadas como recurso estilístico de um período. Ms Eaves.Tipografia título | história | Ajustes ópticos 39 LIGATURAS São letras com conexões. Emigre Tipografia 4 Professor Fabio Silveira . em uma única posição no teclado.

68 PT. do tipo de alfabeto. Os caracteres não devem ser vistos como elementos individuais. Ex. HH [possui kerning positivo. Os valores e quantidade de kerning em uma fonte dependem das combinações específicas de letras. FRUTIGER. aberto]. COM AJUSTE KERNING A parte de uma letra que avança no espaço da outra. e do espaçamento individual dos caracteres. fechado] Design Editorial 4 Professor Fabio Silveira . a definição do espaço é uma questão de percepção PARES DE KERNING Garamond regular e itálico Adobe Garamond regular e itálico Ao lado pares de letras que frequentemente precisam de ajustes óticos de kerning. Os problemas individuais são tratados com pares de kerning. SEM AJUSTE DE ESPACEJAMENTO FRUTIGER. AV [possui kerning negativo.Tipografia | Ajustes ópticos 40 ESPAÇAMENTO AVIÃO AVIÃO ajuste global entre as letras das palavras. 68 PT.

RECONHECIMENTO Gill Sans Helvética Univers 55 Verdana Futura UNIVERSAL As diferenças entre os mesmos caracteres de uma fonte sem serifa. g com “dois andares” ou simples Design Editorial 4 Professor Fabio Silveira .título | história | Ajustes ópticos Tipografia 41 TRACKING Não podemos confundir kerning com tracking. na junção e na terminação inferior. na abertura. Ao lado os caracteres tem variações na altura-de-x. No exemplo vemos variações na letra a. traduzem programas modulares de design que harmonizam o conjunto de caracteres da mesma fonte e compõem palavras. na modulação. por exemplo. que é o aumento ou diminuição por igual do espaço entre caracteres de uma palavra ou bloco de texto. no ângulo da terminação superior. linhas páginas equilibradas.

Caneta de ponta porosa preta Tipografia 4 Professor Fabio Silveira . Canson A3. Campo: livre 1 cm Suporte: Canson A3 Material: papel milimetrado.proposta | família tipográfica I 42 Criar um protótipo de fonte bitmap desenhando letras numa malha quadrada de 1 cm de lado Não será permitido elaborar “falsas curvas” nem traços construtivos diagonais.