ESPACEJAMENTO E AS DISTORÇÕES VERTICAIS E HORIZONTAIS NA TIPOGRAFIA DA FACHADA DO BASILICATA NA RUA TREZE DE MAIO.

Transcrição

1 ESPACEJAMENTO E AS DISTORÇÕES VERTICAIS E HORIZONTAIS NA TIPOGRAFIA DA FACHADA DO BASILICATA NA RUA TREZE DE MAIO. SPACING AND THE HORIZONTAL E VERTICAL DISTORTIONS OF THE TYPOGRAPHY IN THE DISPLAY OF THE BASILICATA GROCERY AT 13 DE MAIO STREET. Alberto Miranda, Fabiano Troiano, Fábio Bolzan, Heller de Paula, Lucas Gomes, Márcio Lima, Yuri Nunes. RESUMO Este é um estudo tipográfico feito sobre distorções e espacejamento, tendo como objeto de análise o logotipo da padaria Basilicata localizada na Rua Treze de Maio na cidade de São Paulo com o intuito de dispor os efeitos de uma edição pobre em uma fonte. Para provarmos isso apresentamos e, posteriormente, relacionamos as distorções ao espacejamento, pois é no equilíbrio destes dois elementos que encontraremos a solução. ABSTRACT This is a study in Digital Design in the first semester of the course, the objective is to analyze the relation between spacing and the horizontal and vertical distortions of the typography of the basilicata s grocery display at Treze de Maio St., São Paulo. In order to achieve this purpose a lot of effort has been made trough analysis and application of conceptual theory regarding proximity and distance, shape and contra-forma and the processes that shape characters such as e and kerning Palavras-chave: Tipografia. Distorções. Espacejamento. Kerning. Aproximação. Key-word: Typography. Distortions. Spacing. Contraforma. Proximity

2 1. INTRODUÇÃO. A proposta apresentada aos alunos do primeiro semestre de Design Digital era a de formar grupos para produzir o trabalho interdisciplinar com o Tema Expreções tipográficas Design e Cidade. Para cada grupo foi dado uma rua, que carregava as características de uma região da cidade. A presente obra perence ao grupo que ficou a par da Rua Treze De Maio. Cada grupo então produziria um site com conteúdo proveniente da pesquisa feita ao longo do trabalho. Partindo da Rua Treze De Maio, foi escolhido, devido a uma pobre solução de design, a fachada do Basilicata da Rua Treze De Maio. Da infeliz solução, tematizamos as distorções verticais e horizontais e o espacejamento. Na primeira avaliação reparou-se a relação entre estes dois itens, que influenciam diretamente a legibilidade tipográfica. Na primeira sessão encontramos um estudo sobre as distorções verticais e horizontais, o porque e onde elas influenciam na tipografia, entendendo também sobre as linhas de construção de uma família tipográfica. Na segunda sessão o que é estudado é o espacejamento, os efeitos da aproximação, da forma e contraforma e também do Kerning. Na sessão final relacionamos e aplicamos todos estes conceitos ao objeto de estudo. Tendo como cerne do trabalho as distorções foi feita a proposta do layout do site explorando esta característica. Na pagina Inicial o titulo do site tipodistorcione, com o mapa da Itália, que mostrou forte influencia na região da Rua Treze De Maio. A trancição das paginas evidenciará ainda mais este aspecto fazendo travelings com o texto que compõe o mapa, para revelar depois o conteúdo deste.

3 2. COMPREENDENDO AS DISTORÇÕES VERTICAIS E HORIZONTAIS. O processo de criação de uma fonte é sistemático, bem orquestrado e fundamentado em padrões de leiturabilidade e legibilidade, onde legibilidade é a fonte ser facilmente identificada pelo leitor e leiturabilidade está relacionado com o fluxo de leitura rítmico e harmônico, evitando que ela seja uma leitura cansativa e enfadonha. Alguns elementos básicos da fonte dentro da tipografia são: 2.1 A composição da fonte: A fonte é composta por diversos elementos que objetivam facilitar a leitura e/ou legibilidade do texto. Cada fonte é criada com objetivo claro e, dependendo dele, receberá qualidades e características fundamentais para sua função e que darão a ela a identidade de pertencer àquela família tipográfica específica. Um bom exemplo disso são as serifas, que são as formas nas letras, dando um acabamento a elas. Elas são muito utilizadas em tipos para leitura de textos longos, pois estes tipos têm características, como peso adequado, cadência correta, entre outros que não estudados aqui. Já os tipos sem serifa foram muito usados para fontes displays, onde a leiturabilidade não era necessária, mas sim uma legibilidade e impacto.

4 2.2 A terminologia tipográfica: Além de diversos elementos que vão caracterizar a fonte, sua altura e largura também são pré-definidas por estudos básicos sendo eles: A linha da ascendente: É a linha limite com a altura máxima que a letra mais alta terá A linha da descendente: É a linha limite de base que a letra mais baixa terá A linha de altura de x: É a linha que define a altura dos elementos em caixa-baixa A baseline: É a linha de base de onde nascem as fontes de caixa baixa. 2.3 Desconstruindo: Distorcer o tipos sem levar em conta essas características acima listadas cria as mais diversas aberrações. A ordem, logo, é não alterar a largura nem a altura da fonte sem necessidade real. - Fonte Distorcida horizontalmente:

5 Esta distorção afeta diretamente o espacejamento que será esmiuçado mais a frente. A distorção horizontal tende a não ter as linhas horizontais intactas e a comprimir ou expandir as linhas verticais, trazendo abaixo todo o equilíbrio da fonte. - Fonte Distorcida verticalmente: Aqui temos o efeito oposto, as linhas verticais têm sua espessura original mantidas, mas as horizontais são comprimidas, ou espremidas. Esta distorção afetará diretamente as entrelinhas.

6 2.4 Visão geral Visto os exemplos podemos concluir que distorções verticais e horizontais são toda a forma de despadronização do tipo que pode ocorrer, principalmente, quando a tipografia não for manipulada de forma correta pelo tipógrafo, ou mesmo, quando manipulada por alguém sem os conhecimentos necessários para tal função. Essa despadronização pode ocorrer quando a tipografia for ampliada, estendida ou diminuída livremente não respeitando os padrões especificados em sua composição de fonte e em suas linhas de fonte.

7 3. ENTENDENDO O ESPACEJAMENTO. Além dos elementos básicos vistos no capítulo anterior que nos mostrou o enorme equivoco em esticar ou comprimir uma fonte desnecessariamente, outro importante elemento de composição da fonte é o espacejamento, ou seja, o espaço vazio ao redor das letras que também é fortemente influenciado por distorções desmedidas. Fundamental para uma leitura mais eficaz, ele precisa ser amplamente estudado. O primeiro aspecto a se estudar é que apenas um espaço entre as palavras é necessário e um depois das pontuações. Espaços maiores são pontuações em si próprias e cabe ao diagramador ou designer aplicá-los ou não. Espacejar em síntese é editar a aproximação entre as letras, logo vejamos o efeito da ação de aproximar. 3.1 Espaço em branco: O espacejamento é composto por um espaço em branco entre os caracteres de uma fonte que a compõe e dá a própria letra uma forma e uma contra forma (detalhada mais a frente), Esse espaço é fundamental na composição do espacejamento, pois ele pode influenciar todo o contexto facilitando ou dificultando a leitura e/ou legibilidade do texto, vejamos o exemplo: No primeiro grupo de linhas, onde os espaços entre si são uniformes, acabamos por identificar uma cerca de seis palitos, isso acontece devido ao branco entre as linhas ser de um tamanho único o que faz com que o imaginemos uniforme sendo um fundo único. Já no segundo grupo as linhas estão dispostas em pares, fazendo com que pareçam três barras, pois o espaço entre o par materializa uma nova forma que destoa do fundo, levando-nos de volta ao conceito da forma e sua contra forma. 3.2 Forma e Contra Forma: As letras são compostas por sua parte impressa (forma) e pelos espaços em branco ao seu redor (contra forma); isso faz com que nos adaptemos aos contornos característicos das letras, que se validam nestes dois conceitos, aproximação e forma e contra forma. Exemplos:

8 1.Quando lemos a palavra não reparamos que não Necessitamos ler todas as letras, mas apenas o seu contorno. Com um espacejamento adequado temos um fundo consistente e contra formas claras. 2. Já num espacejamento inadequado deixamos de identificar o fundo e as contra formas passam a brigar por espaço. A família tipográfica compartilha entre seus membros linhas horizontais, mas cada tipo ocupa um espaço determinado. Espaço que nos primórdios da imprensa era delimitado pelo corpo em chumbo do tipo. Cada tipo então possui seu limite. Este espaço influencia e é influenciado pelos itens acima estudados. Segundo Claudio Rocha é da Proteção lateral, este limite, que depende a qualidade do espacejamento. Cada letra tem uma disposição dentro dos seus limites, o S se mantém no centro relativo, enquanto o F tem seu terminal quase ultrapassando a proteção direita, e o f itálico ultrapassa tanto no terminal quanto na calda. Esta parte que ultrapassa os limites denominação herdada dos tipos de chumbo. recebe o nome de Kern, Quando se ajusta o espacejamento num texto, estamos aplicando um valor único para espacejar todas as letras. Mas isto se mostra ineficiente quando se avalia determinados pares de letras problemáticas. Problemáticos devido aos Kerns que muitas vezes sobrepõe outras letras, ou, às vezes, as formas de uma letra ser negativa em relação a outra.

9 4. RELACIONANDO AS DISTORÇÕES VERTICAIS E HORIZONTAIS E O ESPACEJAMENTO NO OBJETO DE ESTUDO. Ellen Lupton (Pensar com Tipos. São Paulo: Cosac Naify, v.), aponta a importância do reajuste de espacejamento em corpos maiores. Quando se aumenta o tamanho de um tipo o espaço em branco deste tende a ficar mais obvio. No caso estudado, o logotipo do Basilicata da Rua treze de maio, este não foi apenas aumentado desproporcionalmente como foi feito um espacejamento negativo. Provavelmente isso ocorreu de devido a aparente vontade de se aproveitar a totalidade da área da fachada:

10 Este espaço se mostra muito estreito, o que fez com que o responsável pelo logo buscasse a infeliz solução de distorcê-lo. O espacejamento negativo fez com que a forma de uma letra se unisse a outra, anulando o fundo; se apenas trabalharmos o espacejamento negativo do logo já teríamos uma melhora significativa: Mas apenas fazendo isto não se chega ao equilíbrio que buscamos, pois ainda não temos contornos definidos: Logo, a condensação dos tipos do logo ainda interfere nas letras, isto ocorre devido a distorção vertical, revertendo essa distorção teremos:

11 Como já foi dito ajustar apenas um item nos levará ao equilíbrio necessário teremos, então, que compor uma solução mais abrangente: Avaliemos, agora, a forma e contra forma dos caracteres: A diferença é notável, quando visualizamos as áreas com luz visualizando neste modo conseguimos notar com mais facilidade os pares que necessitam de ajuste de Kerning.

12 5. CONCLUSÃO Com a ajuda do recorte conseguimos demonstrar que existe a relação entre as distorções e o espacejamento, e que ela é crucial para uma boa tipografia. 5.1 Pesquisa para Website: Paleta de cores: A paleta de cores foi montada considerando características do objeto de estudos e suas relações com o bairro. O propósito é refletir a na análise e na produção do site características peculiares do objeto de estudo e como essas qualidades (ou defeitos) interferem na tipografia a ser analisada. As cores definidas foram: - Vermelho (C: 15 M: 100 Y: 100 K: 0) - Verde (C: 75 M: 5 Y: 100 K: 0) - Amarelo (C: 1 M: 4 Y: 49 K: 0) Processos tecnológicos: os softwares utilizados foram: AdobePhotoshop CS3; Adobe Ilustrator CS3; Adobe Flash CS3; Adobe InDesign CS3; Corel Draw X4 e FontLab. Processos tecnológicos: os softwares utilizados foram: AdobePhotoshop CS3; Adobe Ilustrator CS3; Adobe Flash CS3; Adobe InDesign CS3; Corel Draw X4 e FontLab. 5.2 Projeto do Website: O site foi conceituado com o mapa da Itália, pois, além de da rua Treze de Maio ter influência italiana, o próprio mapa está inserido no objeto de estudo. Os botões foram distribuídos pelas regiões geográficas existentes no país. O tema de cada página foi distribuído distorcidamente dentro da região e, ao clicar, ele se amplia e abre a página. O website foi feito em preto e branco, porém ao clicar sobre um dos botões ele se torna verde e abre a página correspondente, para retornar basta um clique na primeira letra correspondente ao tema da página e ela se torna vermelha e retorna à página inicial utilizando, assim, as cores propostas no projeto.

13 Layout do site Página inicial: Detalhe do botão e da página do Projeto:

14 BIBLIOGRAFIA ROCHA, Cláudio. Projeto Tipográfico: Análise e produção de fontes digitais. 3. ed. São Paulo: Rosari, v. BRINGHURST, Robert. Elementos do Estilo Tipográfico. 3. ed. São Paulo: Cosac Naify, v. LUPTON, Ellen. Pensar com Tipos. São Paulo: Cosac Naify, v. FARIAS, Priscila. Tipografia Digital: O impacto das novas tecnologias. 3. Ed. Rio de Janeiro: 2ab, v. FRUTIGER, Adrian. Sinais e Simbolos: Desenho, projeto e significado 2. Ed. São Paulo: Martins Fontes, v.