O documento discute a importância da tipografia no design gráfico e fornece detalhes sobre os diferentes estilos, classificações e características das fontes que devem ser considerados na escolha da fonte certa para um projeto.

1. Porque pensar em fontes?
Muitas vezes consideramos a tipogra a como algo em segundo plano. Pensamos nas cores,
na disposição dos elementos e na hora da fonte só decidimos entre Serifa e Sem Serifa.
Isso é muito contraditório porque a tipogra a é uma conseqüência natural da criatividade
humana, e para nós que trabalhamos com criatividade ela deve ser uma prioridade no
processo da concepção do layout.
A tipogra a está em todos os lugares. Ela está no que compramos, nos livros e revistas,
nas paredes, no chão, em sinais de trânsito, etc. Os tipos nos dizem o que fazer e o que não
fazer. Eles podem ser permanentes, móveis, ajudar-nos a encontrar os caminhos, fazer uma
coisa diferente da outra, mostrar um sentimento, en m, são in nitas as possibilidades.
O uso dos tipos mostra ao leitor tanto de quem originou aquela mensagem, quanto sobre
a mensagem em sí. Um restaurante com um quadro de giz para o menu, mostra que seu
cardápio está em constante mudança oferecendo algo sempre diferente, ou pode mostrar
desleixo e falta de organização da cozinha, dependendo da fonte desenhada.
Tipo x Fonte
Pra começar a falar da complexidade da escolha de um tipo é interessante conhecer a
diferença entre tipo e fonte. Um tipo é o conjunto de letras, números e símbolos com o
mesmo design, enquanto fonte é a forma física que aquele tipo foi construída (ex: escavada
na madeira, feita de massinha). A fonte é a forma de cookie e o tipo é o cookie. Quando
estamos avaliando famílias tipográ cas temos que pensar no processo e no resultado
para escolher uma família tipográ ca que cumpra todas as funções.
Estilos
Muitas vezes uma mesma fonte é usada para um único design. Isso porque essa fonte
permite diferentes estilos que vão dar hierarquia ao texto. É interessante conhecer todos os
estilos pra saber quantas subdivisões poderão ser feitas e qual estilo se adéqua mais a
proposta do texto:
Romano Tipos originados dos escritos romanos. É o estilo básico da maioria dos textos de apoio.
Itálico Uma versão da fonte manuscrita com uma leve inclinação para a direita. Além de ser
usado para nomes cientí cos e palavras em outra língua, o Itálico é uma boa opção de destaque
para uma palavra sem deixar o texto muito pesado.
Condensado O texto condensado é o texto romano com menos espaço entre as letras.
Estendido É uma versão romana com mais espaço entre as letras
1

2. Bold Uma versão com um stroke mais largo. Também é chamado de médium, semi bold,
super e pôster.
Light ou Thin Uma variação da fonte com menos stroke.
Obliquo Uma versão da fonte original levemente inclinada para a direita.
Anatomia do Caractere
Anatomia pode parecer algo chato e sem utilidade, mas conhecer ela é o que vai fazer a sua
escolha tipográ ca ser a mais adequada para o seu trabalho. São muitos os termos, mas para
que o trabalho seja bem feitos existem alguns fundamentais:
Ascendente
Parte das letras minúsculas que se ergue acima da
linha da mediana.
Descendente
Parte das letras minúsculas que passa abaixo da
linha de base.
Corpo
Tamanho da letras. É a soma do ascendente, altura-x,
descendente e espaço reserva.
Serifa
Pequenos segmentos de retas que ornamentam as
hastes de alguns tipos. Existem diversos formatos de
serifa.
Stroke
É a espessura da linha do tipo.
Capitular
Caractere de grandes dimensões , muitas vezes
ornado, que surge no começo de uma página
ou parágrafo
Versalete
Letra maiúscula com a mesma altura e espessura das
letras minúsculas.
2

3. Altura X
Também chamada de mediana. De ne o tamanho das letras minúsculas. É a distância do pé até
a cabeça da letra “x”. Essa medida in ui diretamente na legibilidade do texto.
Modulação ou inclinação
É a tensão vertical ou oblíqua relacionada com o contraste da fonte. É determinada por um linha
que cruza os lados mais estreitos do caractere. Quando o contraste é nulo, não existe modulação.
Ligatura
Letras combinadas constituindo um único caractere.Só aparecem nas combinações: ff, , , ct.
Contraste
Diferença de espessura entre as hastes de um mesmo caractere. Esse contraste pode ser nulo,
médio ou grande.
Classi cação das fontes
Gótica
Baseada na forma antiga de escrever. O stroke pode ser acompanhado por um o. Em grandes
blocos a leitura é árdua, por isso, seu uso é apenas decorativo. Caso use esse tipo de fonte,
aumente o espaço entre as letras para maior legibilidade.
algerian - abcdefghijklmnopqrstuvxzwy 1234567890.,
Romana
É a fonte baseada na fonte dos escritos romanos. É a mais fácil de ler pois possui ascendentes e
descendentes bem delimitados. O leitor se cansa menos.
Old style: Pequeno contraste, inclinação para a esquerda e serifas irregulares. Essa é a forma
mais legível de todas.
Bembo - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,
Transicional: O contraste dessa fonte é médio, ela é pouco inclinada pra esquerda e suas pontas
formarm triângulos.
Baskersville - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy
1234567890.,
Moderna: Contraste grande e serifas nas. Esse tipo de fonte não é recomenada para logotipos, pois
ela é de difícil leitura em pequenos tamanhos devido a grande variação do contraste.
Bodoni - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,
Egípcia: Serifas quadradas.
Menphis - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy
1234567890.,
3

4. manuscritas
Por serem de difícil leitura devido a sua inclinação e muitas vezes ornamentos, essas fontes são
usadas para detalhes, como por exemplo, uma assinatura.
Kunstler - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,
Fontes grá cas/ Fonte fantasia
Essas fontes são vistas como imagens e ajudam na dramatização do texto. Elas podem ser criadas
para um texto em especial. Muitas vezes são usadas em títulos.
Komika jam - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,
Serifas
As fontes serifadas são normalmente usadas em textos corridos. Isso porque o olho humano
não lê as letras, e sim as palavras. Os ascendentes e descendentes serifados ajudam o leitor
a reconhecer a forma da palavra e assim ler o texto mais facilmente. Essas serifas podem ser
arredondadas, suaves, pesadas e duras, nas e decorativas.
Cooper Black - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy
1234567890.,
Sem Serifas
As fontes sem serifa são normalmentes utilizadas em cabeçalhos e pequenos textos, mas algumas
são feitas procurando uma melhor leiturabilidade e podem ser usadas em textos corridos. A forma
limpa do tipo dá um ar mais descontraído e jovem ao texto. Existe uma classi cação, também, para
esse tipo de fonte:
Grotesca: Condesada e pesada
Futura - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Geométrica: fontes limpas e arredondadas.
Century - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Humanísticas: existe um contraste no stroke que dá uma personalidade a fonte.
Optima Lt Std - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Arredondadas: normalmente são baseadas em outras fontes. São mais relaxadas e atratativas. O
arredondado cria um espaço melhor para a leitura e dá uma cara amigável ao texto.
Arial rounded - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
4

5. Outras considerações
Numerais: existem duas classi cações para os numerais: Old Style e Alinhado. Old Style são mais difíceis
de tabular pois não são alinhados com a base do texto. Já os Alinhados tem o peso e espaçamento de
caracteres iguais. Isso facilita o uso de numerais em tabelas, por exemplo. Os números alinhados
em um texto podem parecer maiores do que as letras porque são do mesmo tamanho das letras
maiúsculas. Os numerais em versalete são no formato Old Style, o que ajuda a mistura com o texto.
Enquanto os número Old Style são melhores para textos corridos, os Alinhados são muito mais
organizados para um texto apenas numérico.
Amigo 1234567890 Helvética Thin 1234567890
Caracteres especiais: Para que uma fonte seja totalmente e ciente é importante analisar se ela possui
caracteres especiais como: ℓ ⅓ ∑ # % *@
Escolhendo a Fonte
A fonte escolhida deve ser um convite à leitura, ela deve revelar o teor do texto e esclarecer a
estrutura proposta. A fonte é como uma bela taça de vinho. Ela impressiona em primeiro plano,
mas é transparente e permite o observador apreciar o conteúdo. Para a escolha da fonte, alguns
princípios são básicos:
Antes de escolher a fonte leia o texto. A fonte deve estar de acordo com o seu conteúdo.
Mapeie o texto e conte quantas camadas você vai utilizar.
Pense na relação entre o texto e os outros elementos, como grá cos e imagens.
Honre o caráter do texto. A fonte deve mostrar aquilo que o texto diz.
Dê forma à página e emoldure, honrando cada elementos. Deixe o espaço de respiro e divida as seções.
Dê atenção aos detalhes. Não adianta nada fazer um belíssimo layout e se esquecer dos detalhes
como nota de rodapé e números de página.
Usando apenas uma família
Para usar a mesma família é necessário conhecer os estilos, cores e tamanhos. Com o contraste você
cria uma harmonia. A combinação de dois extremos não é muito agradável, por exemplo, a combinação
de um título Heavy e um texto Thin deixa o texto ser engolido pelo título.
Usando várias famílias
Usar uma mesma família é algo complicado, mas se bem utilizado permite uma maior diversidade e
liberdade. As fontes escolhidas devem ter um fator semelhante, como por exemplo a altura-x, mas
ao mesmo tempo deve ser diferentes para causar uma hierarquia no layout. Alguns designers
recomendam o uso de no máximo 3 famílias. Recomenda-se também buscar fontes de um mesmo
autor para que as fontes se misturem de uma forma mais harmônica.
5

6. Legibilidade
A legibilidade é a capacidade do leitor de distinguir os caracteres. Alguns fatores como altura-x, forma,
contraste, peso, tamanho e alinhamento in uem nesse processo. Caracteres com maior espaço interno
e uma boa altura-x (não muito grande, para que os ascendentes e descendentes sejam identi cados)
são mais legíveis. O tamanho da fonte também in ui, não use tamanhos menores que 9 pts. As
fontes sem serifa são melhores para a legibilidade.
Leiturabilidade
A leiturabilidade é a capacidade de entender o que entender o que está sendo escrito. As fontes serifadas
são consideradas melhores para a leiturabilidade, na seguinte ordem: Old face (Caslon), tranzicionais
(Baskerville) e modernas (Bodoni).
Ajustando a fonte ao layout
Alinhamento
Esquerda: É o alinhamento da moda. Tem um caráter menos formal. A primeira e a última linha desse
formato devem ser menores que as outras e nenhuma palavra pequena deve sobrar no m da frase.
Cuidado com as palavras que cam sozinhas em uma linhas (viúvas).
Direita: Normalmente se usa esse alinhamento para criar harmonia com outro elemento do layout.
Essa forma só deve ser usada em pequenos textos porque é extremamente desconfortável.
Centralizado: Alinhamento formal. Utilizado em convites de cerimônia, por exemplo
Justi cado. O alinhamento mais comum em grandes textos. Para deixar as linhas do mesmo comprimento
muitas vezes são criados buracos no texto. Esses buracos prejudicam muito a leitura. Eles podem ser
consertados manualmente. Outra alternativa é usar divisões com o hifén. Dividir as palavras é melhor
que ler o texto com buracos. A quebra da palavra deve ser feita em um ponto que o leitor possa adivinhar
o resto.
Tracking
O tracking é feito em palavras. É na verdade o espaço entre as palavras de uma linha. Em um corpo
grande o tracking deve ser reduzido e em fundo escuros deve ser aumentado. Em algns casos uma
palavra termina com seu ascendente virado para a direita e a próxima começa com o ascendente
virado para a direita, nesse caso o espaço parece menor. o ideal é que o espaço entre as palavras seja
o mesmo do interior da letra “h”
The Old hat
Kerning
As letras tem espaços de nidos por seus criadores, mas ao serem usados em tamanhos maiores ou
em casos especí cos como em Caps, precisam de ajuste no kerning. Não mude o kerning até
que tudo esteja de nido. O lema da tipogra a em relação ao kerning é “close but not touching”, perto, mas
não se tocando. As fontes sem serifa devem ser mais espaçadas, especialmente em tamanhos pequenos.
Algumas combinações pedem um kerning diferente: “LA” pede menor kerning enquanto “HI” pede maior
Kerning. Os numerais precisam de kerning par serem ajustados em uma tabela. A pontuação deve ter um
kerning maior para que ela dê a entonação para a frase toda e não somente para a última palavra.
Nossa, mas que calor! Nossa, mas que calor!
6

7. Leading (espaçamento)
Retomar a leitura de uma linha para a próxima é um ato difícil e o leading ajuda a controlar essa
situação. Se uma fonte tiver uma altura-x menor, o espaço entre uma linha e outra parece maior e o
espaçamento deixado deve ser menor. Esse é o caso da fonte Bembo ou Calson. Fontes sem serifa
normalmente precisam de um leading maior. O mesmo acontece para fontes Bold ou Heavy.
O espaçamento de ne a cor da textura do texto. O ideal é ser um texto cinza, nem preto nem branco
demais. Uma linha deve conter uma média de 12 palavras, mas para linhas grandes deve ser usado um
espaçamento maior.
Retomar a leitura de uma linha para a próxima é um ato difícil na leitura e o leading ajuda a controlar essa
situação. Se uma fonte tiver uma altura-x menor, o espaço entre uma linha e outra parece maior e o
espaçamento deixado deve ser menor. Esse é o caso da fonte Bembo ou Calson. Fontes sem serifa
normalmente precisam de um leading maior. O mesmo acontece para fontes Bold ou Heavy.
O espaçamento de ne a cor da textura do texto. O ideal é ser um texto cinza, nem preto nem branco demais.
Uma linha deve conter uma média de 12 palavras, mas para linhas grandes deve ser usado um espaçamento
maior.
Retomar a leitura de uma linha para a próxima é um ato difícil na leitura e o leading ajuda a controlar essa
situação. Se uma fonte tiver uma altura-x menor, o espaço entre uma linha e outra parece maior e o
espaçamento deixado deve ser menor. Esse é o caso da fonte Bembo ou Calson. Fontes sem serifa
normalmente precisam de um leading maior. O mesmo acontece para fontes Bold ou Heavy.
O espaçamento de ne a cor da textura do texto. O ideal é ser um texto cinza, nem preto nem branco demais.
Uma linha deve conter uma média de 12 palavras, mas para linhas grandes deve ser usado um espaçamento
maior.
Margens
50% da folha deve ser deixado em branco. A divisão é mais ou menos assim: O cabeçalho deve ser
metade do tamanho do rodapé e os cantos devem ter o tamanho igual. Quanto maior o leading menor
deve ser o espaço da margem. Quanto mais na for a fonte, menor deve ser o espaço da margem
também.
Tipos para web
O tipo para tela é diferente do texto impresso. Os princípios de uma boa tipogra a são aplicados nas
duas mídias, mas devem ser reinterpretados para cada uma delas. A aparência do tipo na Internet não
é xa. Ele vai depender de vários fatores, como o browser, o sistema operacional e as fontes instaladas
pelo usuário. Para que o usuário veja o que você planejou é aconselhável usar Fontes Seguras para
Web. Ao usar essas fontes você vai estar prevenindo um resultado inesperado e indesejado no
seu layout.
Algumas Fontes Seguras:
Sem serifa
Verdana: Considerada a mais legível das cinco opções, essa fonte sem serifa tem uma
altura X grande, o que torna a leitura confortável. O espaço entre as letras é bem aberto
o que deixa a fonte com uma boa leiturabilidade em telas pequenas.
Trebuchet MS: Essa fonte é cara e de boa leiturabilidade mesmo sendo usada em corpos menores.
Ela é um pouco menor que a Verdana permitindo, assim, que um texto maior caixa em um espaço
menor. Seu contorno arrendondado dá um pouco mais de personalidade ao layout.
7

8. Arial: Mesmo não sendo desenhada para a web, Arial é uma fonte que funciona nas duas mídias
devido a sua legibilidade. Essa fonte é muito parecida com a Helvética no espaço e tamanho,
porém, seus caracteres tem algumas diferenças anatômicas.
Serifadas
Georgia: Essa fonte desenhada para web tem formas abertas e bastante espaço entre os caracteres.
É uma fonte limpa e fácil de ler se usada em um tamanho reduzido.
Times New Roman: Desenhada para a impressão essa fonte é de difícil leitura na web. Tente a Georgia ao
invés da Times.
Usando a fonte como imagem
Se você quiser usar uma fonte especí ca em algum layout é interessante associar a fonte como uma i
magem. Elas podem ser salvas como GIF, JPEG, ou PNG. Isso só é indicado para títulos e detalhes por
três motivos. O primeiro é que a página ca muito pesada e demora pra loudear, o Segundo é que
mecanismos de busca (Google) não encontram as palavras. O Terceiro é que essas fontes na forma
grá ca são complicadas para editar.
O que fazer e o que não fazer na web
Acrescente um espaço depois da pontuação para permitir uma quebra de linha melhor. Se messes
espaços a web vai ler a frase inteira como uma palavra só.
Escolha a cor do texto e a cor do fundo procurando o contraste que cause maior legibilidade
Veja se o bold e o italic se aparecem diferentes da fonte no seu formato original
Se for converter a fonte para imagem use o menor arquivo possível que permita uma boa de nição.
Não justi que o teto na web. A falta de hifén e a varaiação do tamanho do tipo pode criar rios enormes
no texto.
Não ajuste as linhas de forma manual, como na web a visualização é imprevisível isso pode causar
buracos no layout.
Não Coloque textos em pequenos formatos em fundos escuros. A leitura é extremamente prejudicada.
Não coloque texto em Caps Lock.
Atenção
A pontuação nos caracteres para web é colocada em forma de códigos.
Fontes no Windows aparecem maiores que em Macs.
O ideal é montar linhas com 60 até 70 caracteres.
8

9. Algumas fontes úteis
Bodoni - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Baskerville - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Gill sans - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Futura- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Univers- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Helvética- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Perpetua- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Garamond - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Aaargh- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., (dafont)
Accidental Presidency- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., (da font)
Franklin Gothic Book- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.
Eurostile- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,,
Democrática- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,, (fonte da Dois)
9

10. Manual
de tipogra a
eu
tipos.