Page 1

Tipografia II Eduardo Novais - UFC - 2011

terรงa-feira, 3 de maio de 2011


Os trabalhos foram fracos.

terรงa-feira, 3 de maio de 2011


Quem compraria seu pr贸prio trabalho se fosse para a sua empresa?

ter莽a-feira, 3 de maio de 2011


Vejamos alguns bons trabalhos

terรงa-feira, 3 de maio de 2011


S贸crates Alexiei Alexander ter莽a-feira, 3 de maio de 2011


Eutopia Katryne Rabelo terรงa-feira, 3 de maio de 2011


IRR LICHT Wendell Militรฃo terรงa-feira, 3 de maio de 2011


UFC Virtual Bruno Luiz terรงa-feira, 3 de maio de 2011


ENjMIN Bruno Sabino terรงa-feira, 3 de maio de 2011


Moptop Demetrius Abreu terรงa-feira, 3 de maio de 2011


Solar Laerte de Mesquita terรงa-feira, 3 de maio de 2011


Rosa de Saron Paulo SÊrgio terça-feira, 3 de maio de 2011


Agora, vejamos alguns erros encontrados

terรงa-feira, 3 de maio de 2011


Mudar “só” a fonte Mesmo que o trabalho fosse só para mudar a fonte, cuidados deveriam ser tomados.

terça-feira, 3 de maio de 2011


Distorção Horizontal ou Vertical As fontes são projetadas por designers com uma proporção. A distorção delas faz com que elementos grossos fiquem finos e vice-versa.

terça-feira, 3 de maio de 2011


Uso equivocado de tipos Se a fonte “não precisa latir para falar de cachorros”, ela - ao menos - não deve miar.

terça-feira, 3 de maio de 2011


Fontes decorativas para leitura Fontes decorativas nĂŁo devem ser utilizadas para textos longos.

terça-feira, 3 de maio de 2011


Efeitos. Use com cuidado. Aquele “super” efeito que você acabou de conhecer já é conhecido. Fato.

terça-feira, 3 de maio de 2011


Muitas fontes Você não precisa mostrar que conhece muitas fontes para mostrar que sabe muito sobre elas.

terça-feira, 3 de maio de 2011


Hierarquia Saiba definir quem manda.

terรงa-feira, 3 de maio de 2011


Como erramos muito, vamos voltar e rever tudo...

terรงa-feira, 3 de maio de 2011


Anatomia de uma fonte

terรงa-feira, 3 de maio de 2011


terรงa-feira, 3 de maio de 2011


Altura de versal é a medida da base da fonte até o pico máximo das letras maiúsculas.

terça-feira, 3 de maio de 2011


Altura-x é a medida da altura da fonte até o topo da minúscula, excluindo seus ascendentes e descendentes.

terça-feira, 3 de maio de 2011


Linha de base é onde todas as letras repousam. Ela é o eixo mais estável ao longo de uma linha de texto e é crucial para alinhar textos a imagens e a outros textos.

terça-feira, 3 de maio de 2011


Serifa são os “bracinhos” que acontecem no final de cada fonte. Foi criada no século passado, uma lembrança dos acabamentos tipográficos feitos em pena.

terça-feira, 3 de maio de 2011


Haste ĂŠ a espinha dorsal da fonte, o alinhamento vertical ĂŠ feito por ela.

terça-feira, 3 de maio de 2011


Bojo ĂŠ a barriga da fonte, uma fatia que nasce e morre com formas arredondadas.

terça-feira, 3 de maio de 2011


Orelha ou Bandeira a fonte pode possuir traços que saem da sua parte superior, uma espécie de linha.

terça-feira, 3 de maio de 2011


Descendente toda a parte da fonte que está abaixo da linha de base. As letras “G” e “J”, representam bem isso.

terça-feira, 3 de maio de 2011


Ascendente toda parte da fonte que está acima da linha da altura-x. O “L” e o “F” minúsculo em algumas fontes, apresenta as ascendentes bem visíveis.

terça-feira, 3 de maio de 2011


Remate é a finalização da fonte na base inferior, o final da pena.

terça-feira, 3 de maio de 2011


Ligadura muitas vezes duas letras ao serem escritas seguidas criam um laรงo entre si.

terรงa-feira, 3 de maio de 2011


Terminal o oposto do remate. É a finalização da fonte na sua parte superior.

terça-feira, 3 de maio de 2011


Espinha Curva e contra-curva principal presente na letra “S”.

terça-feira, 3 de maio de 2011


Barra horizontal todos elementos da fontes que produzem uma paralela com a linha de base.

terรงa-feira, 3 de maio de 2011


Oco ou Miolo espaรงo em branco envolvido por uma letra, seja totalmente, seja parcialmente.

terรงa-feira, 3 de maio de 2011


Eixo linha imaginária que define o grau de inclinação da fonte de acordo com o lado e o movimento feito pela pena.

terça-feira, 3 de maio de 2011


Abertura é o espaço de abertura de acesso ao miolo da fonte.

terça-feira, 3 de maio de 2011


Classificação de tipos

terça-feira, 3 de maio de 2011


A classificação adotava pela Association Typographique Internationale (AtypI) é conhecida como Classificação Tipográfica VOX/ATypI. Ela leva esse nome por ter se baseado cla classificação de Maximilien Vox, em 1954.

terça-feira, 3 de maio de 2011


Classificação Vox/ATypI Romanos Humanistas Garaldos Transicionais Didones Mecanizados Lineares (Sem Serifa) Grotescos Geométricos Neogrotescos Humanísticos

terça-feira, 3 de maio de 2011

Incisos Manuais Decorativos Brush Manuscritos (Script) Góticos Texturados Rotundos Bastardos Fraktur Não Latinos


Romanos

terรงa-feira, 3 de maio de 2011


Humanistas

SĂŁo originadas das fontes romanas pioneiras. Foram baseadas nos desenhos dos caracteres presentes em manuscritos humanistas.

terça-feira, 3 de maio de 2011


O desenho dos caracteres tem sua origem no uso da pena empunhada de modo oblíquo. Por isso a inclinação do eixo para a esquerda, clara no O, no b e na barra do e. Não há grandes contrastes entre as hastes grossas e finas e as serifas são triangulares, ligadas às hastes por curvas. Nas caixas baixas, as serifas apresentam curvatura pronunciada. Exemplos: Centaur, Deepdene, Italian Old Style, Jenson, Kennerley, Lutetia, Schneider Old Style, Stempel Scheneider, Venetian Old Style, Verona. terça-feira, 3 de maio de 2011


Garaldos

A denominação vem de Garamond e Aldus Manutius. Os tipos Garaldos dominaram a tipografia européia por dois séculos.

terça-feira, 3 de maio de 2011


Como humanistas, os garaldos também têm os eixos inclinados para a esquerda, suas serifas são triangulares e as serifas das caixas baixas são oblíquas. No entanto, diversos daqueles, há um maior contraste das hastes e a barra do e tende a ser horizontal. Exemplos: Benguart, Bembo, Caslon, Dante, Garaldus, Garamond, Goudy Old Style, Palatino, Platin, Sabon, Souvenir terça-feira, 3 de maio de 2011


Transicionais Têm origem no Roman du Roi, criado para a Imprensa Real por determinação de Luís XIV e que foi projetado por regras matemáticas rígidas.

terça-feira, 3 de maio de 2011


Os tipos transacionais têm uma maior variação nas espessuras das hastes do que os garaldos, suas serifas são mais planas (porém, ainda triangulares) e seu eixo é vertical ou apenas levemente inclinado. Exemplo: Americana, Baskerville, Bookman, Caledonia, Janson, Fournier, Imprimatur, Perpetua, Quadriga Antiqua, Stone Serif, Times, Zapf International. terça-feira, 3 de maio de 2011


Didones São tipos cuja origem está no Neoclássico da segunda metade do século XVIII e no início do século XIX. Eles seguem a fenda aberta pelos transacionais, também baseando-se em rígidas proporções matemáticas e radicalizando as inovações daqueles.

terça-feira, 3 de maio de 2011


O contraste verificado entre as hastes dos tipos transacionais se torna bem mais acentuado e o eixo é definitivamente vertical. As serifas se tornam lineares, e especialmente nas maiúsculas elas são visivelmente finas e perpendiculares às hastes, unidas a estas sem quaisquer curvaturas. Os desenhos tendem a ter uma configuração geométrica. Exemplos: Bodoni, Corvinus, Didot, Fenice, Modern Extended, Modern, Walbaum. terça-feira, 3 de maio de 2011


Mecanizados Esta configuração de tipos tem origem na Revolução Industrial e no mercado publicitário que surge a partir daí: eles foram originalmente desenhados para serem vistos de longe e em meio a outros impressos concorrentes e não mais para serem lidos de perto e mediante concentração do leitor, como nos livros e jornais. Por isso tendem a ser mais pesados e têm destaque nas sefiras.

terça-feira, 3 de maio de 2011


As serifas são marcantes, sólidas, formando um ângulo reto com a linha de base (ou com a das ascendentes ou a das descendentes). Esta perpendicularidade pode ser enfatizada pela ligação às hastes por outro ângulo reto (a chamada serifa retangular) ou contrastada com o uso de curvas discretas para estas mesmas ligações (a serifa inglesa). Exemplos: Aachen, American Typewriter, Beton, Cheltenham, Clarendon, Clearface, Courier, Egizio, Ionic, Melior, Memphis, Neutra, Nimrod, Lubalin Graph, Pro Arte, Rockwell, Serifa Volta, Schadow. terça-feira, 3 de maio de 2011


Lineares (sem serifa)

terรงa-feira, 3 de maio de 2011


Grotescos

Um padrão originário do século XIX

terça-feira, 3 de maio de 2011


Gravemente pesado mas com um contrate na espessura das hastes. Os caracteres são reduzidos à sua estrutura, conservando-se as formas mais essenciais. As curvas tendem a ser discretas, com terminações horizontalizadas das hastes curvas. Exemplos: Alternate Gothic, Grotesca, Grotesque, Franklin Gothic. terça-feira, 3 de maio de 2011


Geométricos

Têm origem no movimento modernista, com inspiração geométrica e racionaliza, e começam a ser difundidos na década de 1930.

terça-feira, 3 de maio de 2011


São monolineares (não há contrate entre as hastes) e tendem a partir de configurações básicas para a construção de grupos de caracteres com estrutura semelhante. São bem menos pesados do que os grotescos, dos quais derivam. Em geral, o a apresenta se sem o gancho superior. Exemplos: Avant Gardc Gothic, Erbar, Eurostyle, Futura. terça-feira, 3 de maio de 2011


Neogrotescos

Como os geométricos, derivam dos grotescos, com menos contraste entre as hastes do que aqueles, mas não monolineares quanto os geométricos.

terça-feira, 3 de maio de 2011


Difundidos a partir de meados da década de 1950, têm desenho cuidadoso, com forte preocupação com a legibilidade tanto para corpos grandes quando para pequenos. As hastes tendem a terminar de forma oblíqua. Exemplo: Folio, Helvetiva, Univers. terça-feira, 3 de maio de 2011


Humanísticos

Embora sem serifa, estão menos ligados aos grotescos e mais nas inscrições das maiúsculas a lapidarias romanas e nas minúsculas humanistas ou garaldas.

terça-feira, 3 de maio de 2011


Tendem a ser mais delicados do que as trĂŞs subclasses anteriores, com contrastes entre as hastes. O a possui gancho superior. Exemplo: Frutiger, Gill Sans, Shannon, Myriand, Optima.

terça-feira, 3 de maio de 2011


Insisos

terรงa-feira, 3 de maio de 2011


São tipos que possuem semiserifa, baseados nas romanas gravadas em pedra. Suas formas assemelham-se mais aos originais esculpidos do que a letras caligrafias. Exemplos: Albertus, Augustea, Friz Quadrara, Hadriano, Medien. terça-feira, 3 de maio de 2011


Manuais

terรงa-feira, 3 de maio de 2011


Decorativas

SĂŁo tipos que parecem mais desenhados do que propriamente escritos.

terça-feira, 3 de maio de 2011


Comumente utilizados em logotipos, displays, cartazes, anúncios publicitários. Não se destinam a texto corrido. Exemplos: Arnold Boecklin, Benguiat Gothic, Biffo, Codex, Hobo, Largo, Profil, Revue, Stop, Stencil. terça-feira, 3 de maio de 2011


Brush

No final do sĂŠculo 15, desenvolvidas a partir dos tipos romanos manuscritos.

terça-feira, 3 de maio de 2011


Têm inspiração na letra cursiva - por isso o eixo claramente inclinado, as linhas geralmente leves e arredondadas. No entanto, é nítido que são desenhados e que não têm como objetivo imitar a escrita cursiva, apesar de se inspirarem nela. Por isso se diferenciam dos manuscritos. Exemplos: Balloon, Brush Script, Dom Casual, Tekton. terça-feira, 3 de maio de 2011


Manuscritos

SĂŁo os tipos que imitam a cursiva comum ou formal

terça-feira, 3 de maio de 2011


Distiguem se das manuais por imitarem claramente a escrita caligrafia. Observa-se ligaduras. Exemplos: Ariston, Coronet, Legend, Lithographia Shelley, Mistral, Park Avenue, Snell, Present Script, Virtuosa. terรงa-feira, 3 de maio de 2011


Góticos

Originaram-se na França, no século XI. Entre suas particularidades, foram os tipos utilizados na Bíblia de Gutenberg.

terça-feira, 3 de maio de 2011


Possuem como caracterĂ­sticas principais tipos pontiagudos, com hastes terminando em losango. Exemplo: Cloister Wilhelm Kligspor.

terça-feira, 3 de maio de 2011


Rotundos

Têm origem na Espanha e na Itália.

terça-feira, 3 de maio de 2011


As terminações são retangulares, mas as estruturas incluem curvas marcantes, com linhas angulosas. Exemplo: Schwabem Alt, Trump Deutsch, Wallau, Wedding, Weiß-Gotisch.

terça-feira, 3 de maio de 2011


Bastardos

É o gótico mais popular, conhecido na Alemanha como schwabacher.

terça-feira, 3 de maio de 2011


Bastante enfeitado, com o o caixa baixa pontiagudo. As maiúsculas são mais dinâmicas do que as dos tipos texturas e rotundos. Exemplos: Ehmecke-Schwabacher, Old Schwabacher, Renata. terça-feira, 3 de maio de 2011


Fraktur

Foi muito difundido na Renascença e é hoje o tipo gótico mais utilizado na Alemanha.

terça-feira, 3 de maio de 2011


Tem formas mais sofisticadas que os bastardos, com curvas e ângulos que se alternam e maiúsculas com hastes curvas. As ascendentes têm serifas que se bifurcam. Exemplos: Breitkopf-Fraktur, Fette Gotich, Unger-Fraktur, Gilgengart Durer Fraktur terça-feira, 3 de maio de 2011


NĂŁo latinos

terça-feira, 3 de maio de 2011


FamĂ­lias

terça-feira, 3 de maio de 2011


A ideia de organizar fontes em famílias combinadas data do século XVI, quando os impressores começaram a coordenar tipos romanos e itálicos. O conceito foi formalizado na virada do século XX.

terça-feira, 3 de maio de 2011


terรงa-feira, 3 de maio de 2011


Fontes na tela

terรงa-feira, 3 de maio de 2011


Suavização A suavização digital (anti-aliasing) cria a aparência de borda suave ao fazer com que alguns píxels da borda de uma letra apareçam em tons de cinza. Ela é mais eficaz em títulos do que em textos pequenos. terça-feira, 3 de maio de 2011


Fontes Bitmap São projetadas para serem usadas em tamanhos específicos (8px, ex.) porque seu corpo é construído precisamente com unidades de tela. terça-feira, 3 de maio de 2011


Texto

terรงa-feira, 3 de maio de 2011


O termo “texto” é definido como uma sequência contínua de palavras, distinta de legendas ou títulos mais curtos. O bloc principal normalmente é chamado de “corpo” ou “texto corrido” e fui de uma caixa, coluna ou caixa para outra. Os designers geralmente tratam o corpo do texto com consistência, fazendo-o parecer como uma substância coerente distribuída ao longo do documento.

terça-feira, 3 de maio de 2011


Kerning

terรงa-feira, 3 de maio de 2011


É o processo de ajuste do espaço entre caracteres em uma fonte proporcional. Se as letras de uma fonte forem espacejadas muito uniformemente, produzirão um padrão não uniforme. Nesses casos, é necessário ajustar o Kerning manualmente. terça-feira, 3 de maio de 2011


Espacejamento

terรงa-feira, 3 de maio de 2011


TambÊm conhecido como tracking, refere-se a o ajuste das disntâncias entre um grupo de letras. Espacejar versais e versaletes enobrece-as e Ê um ato comum. terça-feira, 3 de maio de 2011


Fazer espacejamento negativo é um crime tipográfico. Lembre-se: ajuste o sapato, não o pé. Não use espacejamento negativo para ganhar espaço.

terça-feira, 3 de maio de 2011


Entrelinhamento

terรงa-feira, 3 de maio de 2011


TambÊm chamada de leading, a distância da linha de base para outra Ê chamada de entrelinha. Expandir a entrelinha torna o texto mais leve e aberto. Aumentar demais faz com que as linhas tornem-se elementos individuais, dificultando a leitura. terça-feira, 3 de maio de 2011


Alinhamento

terรงa-feira, 3 de maio de 2011


O arranjo de colunas de texto com bordas duras e suaves é chamado de alinhamento. Cada estilo de alinhamento traz qualidades estéticas e prejuízos potenciais ao design.

terça-feira, 3 de maio de 2011


Justificado Bom: Produz uma forma limpa na pรกgina. Seu uso eficiente do espaรงo faz com que seja a norma para jornais e livros de texto longo. terรงa-feira, 3 de maio de 2011


Justificado Ruim: Vazios feios podem aparecer quando o texto for forçado a caber em colunas com o mesmo comprimento. Evite-os certificandose de que a linha é grande o suficiente em relação ao tipo. terça-feira, 3 de maio de 2011


Amo-te tanto, meu amor... não cante O humano coração com mais verdade... Amo-te como amigo e como amante Numa sempre diversa realidade. Amo-te afim, de um calmo amor prestante E te amo além, presente na saudade Amo-te, enfim, com grande liberdade Dentro da eternidade e a cada instante.

Alinhamento à esquerda Bom: Os designers usam esse alinhamento quando querem respeitar o fluxo orgânico da linguagem e evitar o espacejamento irregular que infesta as colunas estreitas do texto justificado. terça-feira, 3 de maio de 2011


Alinhamento à esquerda Ruim: A coluna alinhada à esquerda perde a sua aparência orgânica quando é desgraçada pelo mau desalinhamento. Batalhe firme para criar margens aleatórias e naturais, sem cair na tentação dos hífens. terça-feira, 3 de maio de 2011


Alinhamento à direita Bom: Pode ser bem-vindo como desvio do familiar. Ele produz boas legendas, barras laterais e notas marginais, sugerindo afinidades entre elementos da pågina. terça-feira, 3 de maio de 2011


Alinhamento à direita Ruim: Ele pode não ser um desvio bem-vindo, enervando leitores. O desalinhamento o ameaça tanto quanto aos alinhados à esquerda, com a dificuldade adicional: a pontuação no final da linha pode enfraquecer a margem direita. terça-feira, 3 de maio de 2011


Centralizado Bom: O texto centralizado é clássico e formal, trazendo ricas associações com a história e a tradição. Ele convida o designer a quebrá-lo de acordo com o seu sentido e a criar uma forma orgânica em resposta ao fluxo do conteúdo. terça-feira, 3 de maio de 2011


Centralizado Ruim: ร‰ estรกtico e convencional. Empregado sem cuidado, pode ser tedioso, melancรณlico como uma lรกpide. terรงa-feira, 3 de maio de 2011


Alinhamento vertical

terรงa-feira, 3 de maio de 2011


Versaletes empilhados AS letras romanas foram feitas para ficar lado a lado, não em cima da outra. Centralizar a coluna ajuda a homogrneizar as difetenças de largura.

terça-feira, 3 de maio de 2011


Caixa-baixa empilhada Crime tipogrรกfico! As pilhas de letras em caixabaixa sรฃo esquisitas porque as ascendentes e descentes fazem o espacejamento parecer desigual.

terรงa-feira, 3 de maio de 2011


Linhas de base verticais O modo mais simples de fazer com que uma linha de texto forme uma linha vertical é mudar a orientação da linha de base, preservando a afinidade natural da letra que se apóiam nela.

terça-feira, 3 de maio de 2011


Hierarquia

terรงa-feira, 3 de maio de 2011


Indica um sistema que organiza um sistema que organiza conteúdo, enfatizando alguns dados e preterindo outros. Ela ajuda os leitores a localizarem-se no texto, sabendo onde entrar e sair e como selecionar o conteúdo que deseja. terça-feira, 3 de maio de 2011


Ênfase em textos corridos Enfatizar uma palavra ou frase em um texto corrido normalmente requer apenas um sinal. O itálico é a formapadrão. No entando, há diversas alternativas, tais como o uso de negrito, VERSALETES e mudanças de cor. Também é

terça-feira, 3 de maio de 2011

possível criar ênfase utilizando outra fonte.


Crime tipográfico. Cuidado com a utilização de mais de um sinal para criar ênfase em um texto. Normalmente o texto fica saturado e cansativo. terça-feira, 3 de maio de 2011


Bibliografia

terรงa-feira, 3 de maio de 2011


Lupton, Ellen. Pensar com Tipos: Guia para designers, escritores, editores e estudantes. Cosac Naify: São Paulo, 2006. Beaird, Jason. Princípios do web design maravilhoso. Alta Books: Rio de Janeiro, 2007.

terça-feira, 3 de maio de 2011


ReferĂŞncias

terça-feira, 3 de maio de 2011


http://www.atypi.org http://www.adobe.com/type/browser/ classifications.html http://tipos.wordpress.com/ http://www.smashingmagazine.com/2009/08/20/ typographic-design-survey-best-practices-from-thebest-blogs/

terรงa-feira, 3 de maio de 2011

Tipografia  

Aula de aprofundamento sobre tipografia