A Tipografia

A tipografia (do grego typos — "forma" — e graphein — "escrita") é o

processo que nos permite escrever e trabalhar com as letras, palavras e
textos, seja no meio físico ou digital. Por exemplo, o título e o texto em um
anúncio publicitário.

Também podemos definir a tipografia como o estudo, a escolha e o uso da

melhor fonte tipográfica para cada tipo de publicação em design. E
definimos fontes, tipos ou caracteres como sendo todos os conjuntos de
letras, sinais e números de uma família tipográfica.

Exemplo de fonte tipográfica da família Arimo, em diversos tamanhos e em sua

versão bold (negrito).

Para a criação de uma boa peça de design, um dos componentes de maior

importância é a escolha das fontes tipográficas que usaremos, em perfeita
harmonia com o conteúdo da sua mensagem e a distribuição dos demais
elementos da composição, tais como fotos e desenhos.

Na organização dos elementos de uma peça de design, processo esse a que

chamamos diagramação, a tipografia se destaca com importante papel. Ela
participa e interfere na organização e no alinhamento dos elementos
textuais (título, subtítulo, textos) para comunicar as mensagens com
legibilidade e clareza.

A tipografia também é usada nas marcas (logotipo) e para desenvolver o

que chamamos de Lettering Art (uso da tipografia como desenho artístico).
No videografismo, os designers criam o Motion Type, que é uma espécie de
infográfico somente feito com palavras e frases, com movimentos e efeitos
especiais.

Nº 1 – exemplo de lettering art, rascunho e obra, criada pelo designer gráfico

Marcelo Schultz (www.marceloschultz.com); Nº 2 – Revista Computer Arts de
agosto de 2012, com o tema Design Tipográfico; Nº 3 – Filme publicitário
usando Motion Type, da Globonews, no fim do ano de 2011; Nº 4 – trabalhos
feitos pelo Designer inglês Mico sobre a filosofia do Rock And Roll
(www.musicphilosophy.co.uk).

Na Publicidade e Propaganda existe uma categoria de anúncios impressos

chamada Alltype (todo texto, em tradução livre), que é uma peça
publicitária feita somente com textos, sem imagens ou ilustrações.

A seguir, veremos dois exemplos de anúncios Alltype: um foi um outdoor da

revista Veja e outro um anúncio da Rolex:

As fontes tipográficas
Tal como podemos observar na Wikipédia, a fonte tipográfica (também
chamada de tipo) “é um padrão, variedade ou coleção de caracteres
tipográficos com o mesmo desenho ou atributos e, por vezes, com o mesmo
tamanho (corpo)”, composta de letras, símbolos e números. Por exemplo,
as conhecidas fontes: Arial, Garamond, Helvetica, Lucida, Courier, Times,
Verdana, Trebuchet, escolhidas quando vamos escrever em um editor de
textos.

Classificação das fontes tipográficas

As fontes tipográficaspodem ser classificadas de acordo com os cinco grupos

a seguir:

• Fontes com serifa: serifas são detalhes decorativos que

encontramos nas extremidades das letras. Mais tecnicamente
poderíamos dizer que são traços que se prolongam nas hastes de um
tipo. Tais prolongamentos (serifas) parecem ser melhor empregadas
em grandes blocos de textos, facilitando a leitura de livros. Sua
estrutura, em geral, passa a ideia de clássico, confiante, formalidade.
Exemplos de fontes com serifa: Times New Roman; Garamond;
Palatino; Courier; Georgia; Bodoni; Bembo; Didot; Dejavu Serif;
Perpetua Titling; Sylfaen; Lucida.

• Fontes sem serifa: nesse grupo de fontes sem o detalhe decorativo

da serifa, os tipos passam ideia de algo mais moderno, jovial e
dinâmico. São fontes de elaboração mais simples, indicadas para
textos na Web. Exemplos de fontes sem serifa: Arial; Arial Black;
Verdana; Calibri; Cooveltica; Frutiger; Futura; Impact; Helvetica; Gill
Sans; Bauhaus; Bellerose; Lucida Sans.
• Fontes cursivas: também conhecidas como script ou manuscritas,
aproximam-se da letra feita à mão. Elas proporcionam uma
personalidade mais humana ao texto, às vezes mais clássica e
pomposa; às vezes mais informal e infantil, até. Muitas vezes geram
um ar de seriedade, quando como as vemos nos diplomas ou
convites de casamento. Também vemos essa classe de fonte nos
logotipos da Ford, Disney, Cartier, Kellogg’s. Exemplos de fontes
cursivas: Vivaldi; Scriptina; Brush Script MT; Pristina; Freestyle
Script; Kunstler Script; Ballpark; CAC Champagne; Coventry Script;
Alex Brush; Creampuff; Monika; Blackjack; English.

• Fontes decorativas: fontes criadas para um uso específico, com

tema bem claro e definido, muitas vezes não utilizando os tipos de
forma legível. São fontes diferentes e temáticas, tais como: a Bloody,
onde vemos gotas de sangue escorrendo pelas hastes dos tipos
tipográficos; a Circus, com motivos circenses; a Cowboy, com nítida
inspiração do Velho Oeste, como também a fonte Rio Grande e a
Army, muito usada para temas militares.

Alerta: o uso dessas fontes requer muito cuidado para que não sejam
causadas interferências no tema geral da peça, pois elas possuem
uma “personalidade” muito marcante. Por exemplo, na criação de um
cartaz para uma feira de ciências, não seria interessante usar uma
fonte com motivos que lembrem o circo.

• Fontes dingbats: apresentam vários ícones e pictogramas, além de

desenhos temáticos. Exemplos de fontes “dings”: Webdings;
Wingdings; Faces.
Estilos de tipografia:

São as características que uma fonte pode ter, sem que seja modificada
totalmente a sua estrutura, ampliando as possibilidades de uso em um
texto. Algumas fontes não possuem alguns estilos, originalmente:

• Regular: Os softwares da Adobe chamam de “regular” a fonte

tipográfica em sua forma normal, original. Esse estilo também é
denominado “normal”;

• Negrito (Bold): o estilo negrito (ou bold) reforça o peso da fonte,

promovendo maior destaque para uma palavra ou frase. Exemplo:
Este texto está em negrito.

• Itálico (Italic): o estilo itálico (ou italic) inclina as fontes levemente

para a direita, com eixo fixo em sua base. Exemplo: Todo esse texto
está em estilo itálico.

Conceitos importantes em Tipografia sobre caracteres (tipos):

Para entender mais profundamente e tomar decisões com mais precisão

sobre a tipografia em nossos trabalhos, é importante compreender alguns
conceitos sobre os tipos ou caracteres, como veremos a seguir:

• Corpo da fonte (Size): é o tamanho da fonte geralmente visto em

pontos (pt), que é uma unidade de medida. Por exemplo, alguém
pode nos pedir para ampliarmos o tamanho de um título em um
anúncio: aumentamos o corpo para 22 pt (pontos), ou 30 pt.
• Linha base (Baseline): linha que apoia a fonte tipográfica,
oferecendo base à maioria das hastes das letras. Existem algumas
letras (tipos) que atravessam essa linha base, tais como a letra “g”,
“p”, “q”, “y” e o “ç”.

• Altura de x (x-height): é uma linha determinada pelo tamanho da

letra “x” em minúscula. Também é considerada a linha mediana: a
altura básica das letras minúsculas, excetuando as letras que
(mesmo em minúsculas) ultrapassam essa linha, como “d”, “f”, “h”,
“t”, “k” e “l”.

• Caixa alta (All Caps ou Upper-case): são as fontes em seu

formato maiúsculas. Os designers preferem chamar de “caixa alta”.

• Caixa baixa (Lower-case): são as fontes em seu formato

minúsculas. Os designers preferem chamar de “caixa baixa”.

• Versalete (Small Caps): é um estilo especial com todas as letras

em caixa alta, porém encostando na altura x. Isso faz com que todas
as letras fiquem em caixa alta, mas as primeiras letras da palavra,
quando eram maiúsculas antes do versalete, ficarão maiores do que
 as outras. Muitas vezes esse recurso é usado para dar ênfase a uma
palavra quando não queremos usar o negrito ou o itálico.

• Entrelinhas (Leading): é o espaçamento entre as linhas base nos

textos. No Photoshop e em outros softwares é possível ampliar ou
reduzir essa distância.

• Entreletras (Tracking): é o espaçamento entre as letras da fonte

tipográfica de uma palavra ou texto inteiro. Geralmente usamos esse
recurso para aproximar as letras entre si e, com isso, diminuir a área
das caixas de texto, fazendo com que elas caibam em alguns espaços
na diagramação.

• Kerning: é o ajuste do espaçamento entre duplas de letras de uma

fonte tipográfica que geravam espaços vazios desnecessários ou
invasões na área adjacente. Esse ajuste também auxilia bastante na
criação de logotipos com base em texto.
 Existe um jogo online para testar a visão sobre o espaçamento
correto das fontes, chamado Kern me. Você pode jogá-lo nesse link:
http://type.method.ac/#

No exemplo acima, a palavra type estava com os espaçamentos errados entre

duplas de letras. A letra de cor azul (ciano) indica qual deveria ser o kern ideal
entre eles.

• Ligadura (Ligature): algumas fontes admitem a ligação entre duas

letras gerando um símbolo novo.

Conceitos importantes em Tipografia sobre parágrafos:

 • Alinhamento de textos: recursos que organizam um texto,
alinhando as palavras em linhas horizontais de forma que elas fiquem
alinhadas à esquerda, direita, centralizadas (com relação ao espaço
disponível) ou justificadas, onde os espaços entre as palavras são
equilibrados de forma a sempre serem criados textos em blocos. No
quadro explicativo a seguir, veremos exemplos de anúncios com tais
alinhamentos:

Nesse quadro explicativo os dois primeiros anúncios (de cima) estão com títulos
alinhados à esquerda; o de baixo (mais à esquerda) tem o título e texto
alinhados à direita; a seguir temos um anúncio com título centralizado; o da
esquerda apresenta uma grande área de texto justificado.

• Espaçamento entre parágrafos: importante recurso que promove

a ampliação ou redução dos espaços entre os parágrafos, que não é o
mesmo espaço entrelinhas. Esse espaço na diagramação de livros ou
revistas ajuda a descansar a visão do leitor. Sempre que possível,
devemos usar esse recurso para textos longos.
Demonstração de um mesmo texto com três parágrafos, sem e com
espaçamento entre parágrafo . Note como os espaços ampliados entre os
parágrafos aliviam o peso dos blocos de texto, facilitando a leitura.

• Indentação, indentação ou recuo (Indent): são deslocamentos

de parágrafos inteiros para a esquerda ou para a direita,
desalinhando-os propositadamente do resto dos parágrafos. São
muito usados em parágrafos que representam uma citação longa de
outro autor, afastando-se das margens da caixa de texto.
Demonstração do que é recuo de texto ou indentação para destacar um
parágrafo.

• Indentação da primeira linha (Indent First Line): é uma

formatação usada para recuar, mais para a direita, a primeira linha
de um parágrafo. Esse recurso é usado para fazer o leitor visualizar
bem o começo de um parágrafo.

Indentação de primeira linha.

• Hifenização (Hyphenation): Hífen é o tracinho que separa sílabas

de palavras grandes demais para ficarem em uma mesma linha do
texto. Nos softwares que possuam esse recurso, é possível desmarcar
essa opção para que as palavras não sejam divididas pelos hifens.
Por exemplo, há uma regra para que nunca hifenizemos títulos em
uma matéria jornalística.

• Lorem Ipsum: Lorem Ipsum é um texto criado para preencher áreas

de texto em um layout de peça de design. Às vezes os textos que
farão parte de uma composição ainda não ficaram prontos ou não
foram enviados pelo cliente, mas, mesmo assim, o designer tem que
testar o layout. O texto está em latim, mas não faz nenhum sentido,
razão pela qual ele é preferível frente ao uso de outros textos que
poderiam distrair a atenção do cliente.
Texto em Lorem Ipsum para fim de completar layouts de páginas de revistas,
anúncios, livros etc.

Dicas de uso das fontes para um melhor layout:

• Contraste para leitura: Qual cor eu aplico em um texto? E no

fundo? Quanto mais contraste melhor para melhorar a velocidade de
leitura e sua absorção. Para trabalhos impressos, a melhor opção é o
texto preto (ou com tonalidades bem próximas ao preto) sobre um
fundo de cor branca.

• Alinhamentos: o alinhamento de parágrafos pelo centro

(centralizado) pode gerar a impressão de amadorismo,
principalmente em textos longos. Evitemos usá-lo, a menos que seja
necessário na composição.

• Hifenação de títulos: Geralmente não se aplica hifenização em

títulos de anúncios ou de matérias de revistas e jornais.

• Use só uma fonte: recomenda-se não exagerar na quantidade de

fontes a serem usadas em uma composição, seja um site, anúncio ou
texto jornalístico. Se for possível trabalhar com somente uma fonte,
variando em seu corpo (tamanho) e estilos (negrito, itálico), melhor.
Mas se for necessário, podemos diferenciar a fonte do título com o
resto dos textos.

• Cuidado com o corpo: escolha um tamanho de fonte que esteja

bem adequado à visão de seu público, sobretudo para os textos
longos. Em média o corpo 12 pt é confortável para a leitura de todas
as idades, mas alguns designers ampliam o tamanho da fonte quando
o trabalho é direcionado para crianças ou idosos, chegando a 14 ou
16pt.
7.2: Sites importantes para tipografia
Existem diversos sites que nos ajudam a trabalhar com a tipografia no
Design de diversas formas, seja para escolher uma nova fonte para baixar
para o computador ou para construir uma fonte própria.

Alguns dos sites que serão citados nesse livro podem estar fora
do ar ou ter mudado de endereço.

Sites para pesquisa de fontes:

Nesses sites de busca de novas fontes, geralmente é possível escolher a

classe de fonte (serifa, cursiva) e ainda escrever um pequeno texto para o
site demonstrar como ele ficará com cada opção oferecida.

Um dos mais famosos sites para baixarmos fontes tipográficas gratuitas é o

Dafont (www.dafont.com), mas ainda temos: www.freepremiumfonts.com;
www.1001freefonts.com; www.netfontes.com.br; www.fontcubes.com;
www.urbanfonts.com; www.fontesgratis.com.br.

Depois de baixar a fonte desejada é preciso instalá-la em seu

computador, na pasta correta.

Sites para reconhecer fontes em imagens:

Quantas vezes um designer esteve diante de uma imagem ou de um

anúncio e se perguntou: qual será o nome dessa fonte maravilhosa? Existe
um site que nos permite reconhecer qual fonte foi usada. Claro que não
funcionará em fontes decorativas ou muito truncadas. Mas pelo menos já
nos proporcionará uma boa ajuda.

Um dos mais conhecidos é o WhatTheFont, que também existe em forma de

aplicativo para smartphones e tablets (www.myfonts.com/WhatTheFont).

O site permite que você suba uma imagem jpg ou gif, por exemplo, de
preferência cortada na parte que exibe as letras. Recomenda-se também
que as letras estejam bem visíveis, ou seja, sem efeitos especiais
exagerados, texturas ou figuras sobrepostas.

Tornar sua própria letra uma fonte tipográfica:

Existe um serviço online que promete transformar nossa caligrafia em uma
nova fonte tipográfica. Ele nos dá um modelo para imprimirmos, que possui
campos dedicados a cada uma das letras do alfabeto. Depois digitalizamos
esses papéis e ele constrói a fonte tipográfica digital.

O site é o Yourfont e o endereço eletrônico é www.yourfonts.com. O site

não é gratuito, mas para baixar a fonte aprovada e usá-la no Photoshop, no
Word e em qualquer outro software, o custo fica por volta de 10 dólares
americanos.

Criar uma tipografia digital própria

Existe um site para construirmos fontes tipográficas de forma simples e

gratuita, direto na tela. O serviço é o Fontstruct (fontstruct.com). Basta
inscrever-se e usar o sistema bem intuitivo que o site possui para irmos
criando cada uma das letras de todo um alfabeto. Depois baixamos e
começamos a usar a fonte.

Imagem do site Fo ntsruct durante a construção da letra “A”. Notamos ao lado

esquerdo as várias possibilidades de desenho que podem ser usados. A linha de
base fica sempre aparente para ajudar a construir.

(Alexander Francisco)