TypeArt: arte feita com tipografia

Semana Tipográfica - Selo Horizontal
Para encerrar a Semana Tipográfica, trarei uma coletânea de trabalhos artísticos criados com tipografia, como aquele da Grase colocado no post de lançamento do logotipo do Woww. Depois que nossa designer falou tudo sobre El Filete Porteño de Buenos Aires, me inspirei para trazer mais arte tipográfica para o encerramento desta série de posts. Vejam!
  • Typographic Ilustration: A série inicial é composta de 6 trabalhos, cada um utilizando uma fonte formando belas animações flash. Ao fundo, trilhas sonoras bastante coerentes com o tema das peças. Vale a pena dar uma olhada nos outros quatro trabalhos da segunda série.
helvetica
Helvetica / Nirvana

big copy
Baskerville Old Face / Notorious B.I.G.

bush
Times New Roman / Led Zeppelin

bod_dylan
Garamond / Bob Dylan

darthbold2
darthbold3
Print

miss_bodoni
miss_gil
miss_franklin_gothic
miss_meta

  • Twenty-Six Types of Animals: a tese de mestrado do designer Jeremy Head trás 26 tipos que lembram animais. Segundo o autor, ele quer desmistificar a palavra tipografia relacionando ela com algo familiar as pessoas: animais.
zebra
cobra
rabbit

  • Fire in the Hole: um alfabeto contendo 26 caracteres feitos com soldadinhos de plástico derretidos.
fire_in_the_hole_all

Para finalizar vou colocar os trabalhos de typeart feitos pela equipe no segundo semestre da faculdade. Fiz a figura "Bitter Sweet Symphony" construindo cada uma das três palavra que formam o título da música com trechos de sua letra. Coloquei características das palavras amargo, doce e sinfonia nas cores e fontes usadas. O Travolta do Id e a Guitarra da Grase deixarei para eles comentarem no [Update] do post.
bittersweet22_original
Jhon Travolta
pictogramas
Conhece algum trabalho feito com type art?! Comente!

Espacejamento, Entrelinhamento e Alinhamento

Semana Tipográfica - Selo Horizontal
Quando em uma de nossas reuniões para traçar metas para o blog incluímos o projeto da Semana Tipográfica, ficou sob minha responsabilidade (por livre e expontânea pressão!) escrever sobre espacejamento, entrelinhamento e afins. Pensei eu que era mamão com açúcar redigir sobre algo que se gosta. Ledo engano quando o tema é uma das principais ferramentas de trabalho.

Tomando por base Pensar com Tipos, de Ellen Lupton e Elementos do Estilo Tipográfico, de Robert Bringhurst, excelentes livros que recomendo, reestudei estou reestudando o assunto e agora compatilho alguns dos tópicos indispensáveis para a análise e criação de uma peça.

De nada adianta um belo texto, escrito na mais culta das formas se nele encontram-se falhas no que diz respeito à Tipografia e, em consequência, na legibilidade. Um texto possui em sua mancha gráfica tanto os grafismos compostos pelas letras e pontuação, quanto os espaços em branco, que recebem igual importância no quesito legibilidade. Essa área negativa vai responder quanto um texto é agradável de se ler e quão bem foi composto.

As palavras, no âmbito da linguagem falada, recebem característica de texto fluido, sem pausas, diferente do que está no papel, onde aparecem inclusive sinais de pontuação. Tais espaços são fatores cruciais para legibilidade e harmonia visual.

O Espacejamento surgiu com o alfabeto grego onde houve a necessidade de tornar as palavras unidades distintas e inteligíveis. Experimentelersequeressalinhasemespacejamentoepercebasuaimportância. A partir disso, a tipografia tornou o texto algo material com dimensões conhecidas e localizações fixas.

Pode-se falar em Espaçamento de uma forma geral, mas o termo Espacejamento é nomenclatura exclusiva do assunto Tipografia. O termo trata do espaço global entre as letras.

Dentro disso também está o Kerning, fator responsável pela adição ou remoção de espaço entre pares de caracteres específicos. O espacejamento das letras L, T, V, W, Y em conjunto com a letra sucessora na palavra podem causar ruído se o Kerning não receber devida atenção.

Espacejamento
A Entrelinha ou leading recebe esse nome em referência às tiras de chumbo (lead) usadas para separar quando ainda se usavam tipos de metal. O Entrelinhamento padrão que mais encontramos é um pouco maior que a altura da versal do tipo, por volta de 120%.

Uma dica que torna o texto agradável é expandir a entrelinha-padrão, tornando mais leve. Mas cuidado com o exagero: distanciar demais uma linha da outra pode criar elementos lineares e visualmente distintos.

Alinhamento à Esquerda e Entrelinhamento 120%
Outro elemento diretamente ligado à legibilidade é o Alinhamento. Ele cuida da disposição das palavras e frases dentro de colunas. Pode ser justificado, à esquerda, à direita e centralizado. Cada qual traz benefícios únicos se bem empregados, mas também prejuízos em potencial ao design da página ou da tela se utilizados sem controle.

O primeiro traz bordas uniformes tanto na direita quanto na esquerda, por isso é recomendado para textos longos como em jornais ou livros. O cuidado a ser tomado nesse caso é a largura das colunas. Pode produzir vazios quando o comprimento da linha é muito curto em relação ao tamanho do tipo. A hifenização das palavras é um recurso que mantém os espaços sem denegrir a textura produzida pelo texto.

Alinhamento Justificado
O alinhamento à esquerda é utilizado quando o objetivo é respeitar o fluxo da linguagem fazendo com que o olho percorra a linha até o final, mesmo que irregular, e retorne ao início da próxima onde a margem é fixa. É mau porque pode criar figuras irregulares ao longo da margem direita, causando desconforto visual.

Alinhamento à Esquerda
Já o alinhamento à direita traz um grave problema por possuir sua margem esquerda irregular forçando o usuário procurar uma nova posição a cada nova linha de leitura iniciada. Cumpre muito bem sua função quando empregado em barras laterais, citações e outras passagens que comentem um texto principal.

Alinhamento à Direita
Por último, o alinhamento centralizado é conhecido por aparecer em títulos, convites de casamento, certificados e até mesmo em epitáfios. É interessante limitá-lo a esses usos.

Alinhamento Centralizado
Ainda dentro do alinhamento podemos incluir o alinhamento vertical, terror de alguns designers quando relacionado ao quesito ergonomia, e fator estético diferencial para outros. Não há uma regra que determine que a leitura seja de cima para baixo ou vice-versa, apesar das lombadas de livros desenvolvidas nos Estados Unidos, principalmente, sejam feitas de cima para baixo. Pode-se usar ambas direções em conjunto também.

Alinhamento Vertical
Com base nesses conceitos é sempre interessante ter um projeto tipográfico antes de iniciar a redação de uma obra. Já diz Bringhurst em seu livro: "Leia o texto antes de fazer seu projeto visual". A tipografia e suas "leis" estão aqui para contribuir com o projeto e, se bem estudadas e empregadas, tornam-se um diferencial em detrimento aos demais.

Font Conference: a conferência das fontes

Semana Tipográfica - Selo Horizontal
O pessoal do College Humor lançou mês passado um vídeo bastante oportuno para a semana tipográfica. Font Conference trata do encontro de um grupo de fontes chefiado por nada menos que Times New Roman. O objetivo era decidir se Dingbats merecia um convite para fazer parte da dita cúpula. Arial Narrow, Arial Black, French Script, Rage Italic, Futura e demais fontes tradicionais são personificadas por pessoas que traduzem suas características através do comportamento e aparência.

Assista ao vídeo abaixo:

Não tenho dúvida que na próxima vez que você encontrar a Futura na sua lista de fontes irá associá-la àquela japonesa futurista ou mesmo a Arial Black ao coitado do companheiro de quarto do intolerante Arial Narrow. O que falar da Wingdings e sua memorável fala: "Mailbox! Mailbox! Airplane! Open Mailbox!". O inesperado mesmo foi Comic Sans salvar "o mundo"! Quem conhece a história desta fonte sabe que ela tem sua importância.

Dois nomes não são exibidos no vídeo:
Ransom (sequestrador da Courier): diga se não é a cara da fonte aqui embaixo.

ransom
???? Curlz MT(sequestrada com Courier): você identificou ela?! Conta pra nós!
curlzmt
[Update] 30.09.08

Muito obrigado Marcelo Andrade Torres, identificou a famigerada fonte sequestrada com a Courier. Como a moça de vestido rosa e cachos loiros, a Curlz MT é característica pelos seus caracóis.

Como escolher a fonte certa

Semana Tipográfica - Selo Horizontal
A semana tipográfica não teria sentido se ao menos não tentássemos responder a esta questão. Depois que postei aquela sopa de letrinhas quarta-feira, pensei em escrever algo que pudesse ajudar a por em prática aqueles conhecimentos anatômicos das fontes na hora de decidir qual tipo selecionar. Foi então que lembrei de um artigo antigo que havia guardado em meus favoritos com dicas de como selecionar uma fonte pelos seus detalhes gráficos.

O artigo 15 tips to choose a good text type cita e exemplifica cuidados que devem ser tomados ao escolher uma fonte. Os exemplos são bastante coerentes e fáceis de enxergar. Tentei recriar as belas comparações feitas pelo autor do post, o designer chileno Juan Pablo de Gregorio, mas acabei ficando com os mesmos do texto original.

Das 15 dicas deste artigo selecionei 11 que considerei infalíveis para escolha da fonte certa (utilize o artigo Anatomia das Fontes para tirar possíveis dúvidas):
  • O Peso de uma fonte é medido pela relação entre as letras de um texto e a luz(brilho) da página em que ele está disposto. Ao usar a versão light de uma fonte em um texto longo e denso, sua leitura pode se tornar cansativa. Veja a diferença entre o primeiro e o segundo "h" da figura abaixo. Um texto que utiliza uma fonte de peso igual ao do segundo "h" certamente será menos entediante do que um escrito com uma de peso similar ao do primeiro exemplo.
peso
  • O Contraste de uma fonte trata das diferenças entre os traços verticais e horizontais, ou entre as partes pequenas e finas de uma letra. Bodoni é um bom exemplo de fonte com alto contraste. Quando tentamos ler a fotocópia da fotocópia de um texto que a utiliza, provavelmente sua legibilidade será prejudicada aparecendo apenas traços verticais. Boa alternativa para materiais onde cópias não são autorizadas. Perceba abaixo como as hastes do primeiro "n" são muito largas em comparação com a sua abertura externa.
contraste
  • O eixo em que a fonte foi desenhada pode afetar sua leitura. Traços verticais prevalecem em um texto escrito, se o eixo da fonte for diagonal o olho terá problemas em seguir a linha do texto. Fontes com mais de um eixo fazem com que a linha do texto pareça estar dançando no papel dificultando a leitura. Fontes com eixo ortogonal não dançam.
eixo
  • A área entre a linha base e a altura-x da fonte contém a maior parte da informação legível. É uma área bastante importante no momento da leitura. Fontes com ascendentes menores possuem uma altura-x maior tendo assim melhor legibilidade, como a Times New Roman no segundo exemplo. O primeiro é a Mr Eaves de ascendente "avantajado".
altura-x
  • Ao utilizar uma fonte com tamanho grande, por exemplo em um cartaz, tudo é ampliado. Os pequenos detalhes das fontes tornam-se evidentes, bem como as falhas. Antes de imprimir 1.500 cópias daquele cartaz é importante avaliar o resultado das ampliações em uma prova. Veja como o primeiro "S" parece ter sido moldado com um facão e o segundo com um laser preciso. Em tamanho menor ambos seriam idênticos e sem problemas. No tamanho abaixo, o primeiro arruinaria seu trabalho.
defeitos
  • Um bloco de texto a uma certa distância se parece com uma textura. Esta textura deve ser uniforme sem letras menores ou pontos que atraiam a atenção. Um teste como este pode revelar problemas de legibilidade imperceptíveis a primeira vista mas que distraem o leitor tornando a leitura cansativa.
textura
  • Em várias fontes, suas aberturas são tão curtas a ponto de causar confusão entre "o" e o "c". O terceiro "c" é um caso crítico de ângulo de abertura fechado. Em alguns casos vale a pena investir em outra fonte.
abertura
  • Um desenho mais acurado da abertura externa de uma fonte resulta numa melhor compreensão do texto. Por exemplo a letra "m" e as letras "rn" (até mesmo neste texto) podem ser confundidas. No meu caso, usuário de óculos a algum tempo, sinto dificuldade em alguns livros que abusam na redução do tamanho de fontes com esta característica.
m-rn
  • Selecionar uma fonte no meio daquele balaio, cheio e desorganizado que você tem no seu computador não é tarefa fácil. O que irrita mesmo é, após encontrar a fonte perfeita, perceber que ela não possui acentos ou algum outro caractere que você quer utilizar. Antes de chegar ao final de um projeto e perceber isso, é importante fazer um teste com todos os caracteres da fonte. Acentuação é artigo de luxo em fontes free.
fonte-incompleta
  • Se você partir para o uso de uma família completa, verifique se ela está completa mesmo e se suas variações, como itálico, não possui problemas de legibilidade. Algumas famílias podem esconder problemas que as vezes aparecem na pior hora.
família
  • Use sempre fontes com espaçamento e métrica corretos. Se você começar a utilizar uma fonte e perceber que o kerning dela está literalmente "bixado" não insista. O trabalho para tentar fazê-la funcionar direito é imenso, desista logo e procure outra fonte.
kerning
Confesso que não é tarefa fácil domar todos estes detalhes na hora de decidir qual das fontes utilizar. Tenho certeza que se você nunca tinha prestado a atenção nestas observações agora vai olhar para o um "c", "r","n" e "s" com olhos mais técnico.

Agora espero alguma sugestão sua: qual cuidado você toma na hora de definir a fonte de um projeto?!

Créditos ao excelente artigo 15 tips to choose a good text type.

El Filete Porteño de Buenos Aires

Semana Tipográfica - Selo Horizontal

Durante a semana passada apareceram aqui alguns posts apareceu aqui um post relatando a viagem da colega que vos fala. Pois bem, não pensem vocês que foi por má vontade e por isso não escrevi mais. É tudo culpa dessa cidade que tem muito a oferecer, seja qual for o interesse do turista que a visita.

Entre os vários passeios todos orgulhosamente feitos a pé (!) e, nesse caso, fator que só contribuiu para a "descoberta" e posterior encantamento, percebi que a cada nova rua, em qualquer canto da cidade, um estilo de ornamentação que abrange tanto desenhos quanto uma tipografia específica insistia em aparecer. Composto de uma gama de cores que não passava despercebida, fui registrando tudo o que encontrava mesmo sem saber a origem, história ou conceitos que o envolviam. Para isso trago como contribuição para a Semana Tipográfica El Filete Porteño, que deu o ar de sua graça conquistando mais uma admiradora.

El Filete Porteño

Junto com uma imigração massiva que chegou a Argentina no início do século passado, três expressões artísticas desembarcaram junto: o tango, um estilo de comédia curto e o Filete. Cada um representando um aspecto da vida desses recém-chegados. O Filete ficou responsável por demonstrar a prosperidade no trabalho, por isso ainda hoje ele pode ser visto em meios de transporte como caminhões e ônibus, figuras ímpares da cidade, também em fachadas de comércios típicos.

A idéia de ornamentar meios de transporte surgiu entre dois garotos, Vicente Brunetti e Cecilio Pascarella, que em um dia qualquer de trabalho substituíram o que até então era o pintor dos carros. Tal pintor, dono de um estilo nada criativo de cobrir as carrocerias com um gris sem vida, viu seu emprego ameaçado depois da experiência dos dois garotos. A princípio, o impacto já era esperado assim como qualquer ruptura de cultura causa mesmo nos dias de hoje. Foi quando, no dia seguinte, donos de carrocerias faziam fila na porta da oficina, cada qual desejando o diferencial para seu negócio através das pinceladas nada convencionais.

No início, o desenho era composto pelo nome do dono, para o que seu negócio era orientado e sua especialidade, como verduras, leite, pão, etc.

El Filete Porteño - Fachada Ferreteria El Filete Porteño - Placa

O nome Filete vem do francês "filet", que quer dizer fio, linha, algo que acrescenta, a borda de uma moldura. Os pincéis usados nessa técnica também somam à definição, já que são materiais de pêlo comprido próprios para "filetear".

El Filete Porteño - Jean Jaurés

A base da técnica iniciava pela concepção do desenho desejado, incluindo todo o projeto harmonizando ornamentos e tipografia. Os mesmos eram representados sobre papel transparente e em seguida furados com agulha ao longo do traço. Aplicava-se o desenho sobre a superfície desejada e, friccionando carbono em pó dentro de uma meia de mulher, o desenho era transcrito para a posterior pintura. Os letristas sofriam por não poder usar o mesmo desenho dos dois lados, já que as letras possuem um único sentido; já os fileteadores se aproveitaram e por fim criaram mais uma característica do Filete espelhando um mesmo desenho sem o menor esforço.

Vários são os temas correntes dentro do Filete. Entre eles e, os mais comuns, estão as flores, personagens como o cantor Carlos Gardel e Evita Perón, as cores da bandeira argentina, animais, dragões e seres fantásticos. Mas deixemos os desenhos para um outro post. O que nos interessa para essa Semana Tipográfica é o desenho das letras, que não deixa de ser tão surpreendente quanto.

El Filete Porteño - Evita El Filete Porteño - Flores

A tipografia era gótica, chamada especificamente de "esgróstica", uma adaptação para o Filete que mescla o desenho desses tipos primitivos com a imaginação dos fileteadores. Essa talvez eram as únicas letras que disponibilizavam ao artista a representação forte, grossa, presente e colorida, comum no Filete.

El Filete Porteño - Cadeira Restaurante

Para se adequar à estética do estilo, foi incorporado um efeito tridimensional chamado de "repiqué". Mais tarde foram agregados os demais adornos extraídos dos desenhos.

Esse estilo tipográfico aparece unicamente nos elementos mais importantes, como as iniciais do dono e seu nome. Não se utilizava para escrever as "frases de pára-choque de caminhão", por exemplo.

El Filete Porteño - Feira de San Telmo

Atualmente é reelevante citar que os ônibus da cidade seguem utilizando o estilo no nome da empresa e no número que identifica qual linha o carro pertence.

El Filete Porteño - Traseira do ônibus

A partir do desenho das letras, os donos das carrocerias demonstraram interesse em representar frases. Os fileteadores de nada gostaram, já que a arte surgiu para ter continuidade entre os grafismos e uma frase seria um ruído às curvas e à harmonia as quais os artistas tanto prezavam. A inclusão de frases, dos mais variados temas indo do patriotismo ao machismo, eram de autoria exclusiva dos clientes.

Da mesma forma que o tango se alimentou das canções de campo para criar sua identidade, o Filete se inspirou na arquitetura da época, no formato das grades e nos grafismos dos bilhetes de ingressos e entradas. Em consequência disso, essa representação, como característica local, possui um charme único que preenche os olhos apenas se representado em seu berço. O contexto faz com que suas características sejam ressaltadas o tornando ainda mais atrativo e típico do que se fossem expostas em qualquer outro lugar.

Fonte: Livro "El Filete Porteño", de Esther Barugel e Nicolás Rubió.

Agradecimento especial ao Laino por ceder algumas de suas fotos. Algumas também são de minha autoria.