O documento discute tipografia e fornece exemplos de erros comuns ao se trabalhar com fontes. Inclui uma seção sobre a anatomia das fontes e sua classificação. Resume os principais tipos de fontes de acordo com a classificação Vox/ATypI e fornece exemplos de cada tipo. Por fim, aborda questões relacionadas ao uso de fontes em tela e conceitos como suavização, fontes bitmap, texto e kerning.

1. Tipografia II
Eduardo Novais - UFC - 2011

2. Os trabalhos foram fracos.

3. Quem compraria seu próprio trabalho se fosse para a
sua empresa?

4. Vejamos alguns bons
trabalhos

5. Sócrates
Alexiei Alexander

6. Eutopia
Katryne Rabelo

7. IRR LICHT
Wendell Militão

8. UFC Virtual
Bruno Luiz

9. ENjMIN
Bruno Sabino

10. Moptop
Demetrius Abreu

11. Solar
Laerte de Mesquita

12. Rosa de Saron
Paulo Sérgio

13. Agora, vejamos alguns erros
encontrados

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

15. 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.

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

17. Fontes
decorativas
para leitura
Fontes decorativas
não devem ser
utilizadas para textos
longos.

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

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

20. Hierarquia
Saiba definir quem
manda.

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

22. Anatomia de uma fonte

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

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

26. 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.

27. 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.

28. Haste
é a espinha dorsal da
fonte, o alinhamento
vertical é feito por ela.

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

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

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

32. 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.

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

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

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

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

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

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

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

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

41. Classificação de tipos

42. 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.

43. Classificação Vox/ATypI
Romanos Incisos
Humanistas Manuais
Garaldos Decorativos
Transicionais Brush
Didones Manuscritos (Script)
Mecanizados Góticos
Lineares (Sem Serifa) Texturados
Grotescos Rotundos
Geométricos Bastardos
Neogrotescos Fraktur
Humanísticos Não Latinos

44. Romanos

45. Humanistas
São originadas das fontes romanas pioneiras. Foram
baseadas nos desenhos dos caracteres presentes em
manuscritos humanistas.

46. 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.

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

48. 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

49. 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.

50. 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.

51. 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.

52. 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.

53. 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.

54. 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.

55. Lineares (sem serifa)

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

57. 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.

58. 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.

59. 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.

60. 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.

61. 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.

62. 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.

63. 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.

64. Insisos

65. 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.

66. Manuais

67. Decorativas
São tipos que parecem mais desenhados do que
propriamente escritos.

68. 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.

69. Brush
No final do século 15, desenvolvidas a partir dos tipos
romanos manuscritos.

70. 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.

71. Manuscritos
São os tipos que imitam a cursiva comum ou formal

72. 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.

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

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

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

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

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

78. 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.

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

80. 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

81. Não latinos

82. Famílias

83. 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.

85. Fontes na tela

86. 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.

87. Fontes Bitmap
São projetadas para serem usadas em tamanhos
específicos (8px, ex.) porque seu corpo é construído
precisamente com unidades de tela.

88. Texto

89. 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.

90. Kerning

91. É 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.

92. Espacejamento

93. 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.

94. 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.

95. Entrelinhamento

96. 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.

97. Alinhamento

98. 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.

99. 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.

100. Justificado
Ruim: Vazios feios podem aparecer quando o texto for forçado a
caber em colunas com o mesmo comprimento. Evite-os certificando-
se de que a linha é grande o suficiente em relação ao tipo.

101. 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 a m, de um calmo amor prestante
E te amo além, presente na saudade
Amo-te, en m, 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.

102. 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.

103. 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.

104. 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.

105. 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.

106. Centralizado
Ruim: É estático e convencional. Empregado sem
cuidado, pode ser tedioso, melancólico como uma lápide.

107. Alinhamento vertical

108. 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.

109. Caixa-baixa
empilhada
Crime tipográfico! As
pilhas de letras em caixa-
baixa são esquisitas porque
as ascendentes e descentes
fazem o espacejamento
parecer desigual.

110. 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.

111. Hierarquia

112. 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.

113. Ênfase em textos corridos
Enfatizar uma palavra ou possível criar ênfase
frase em um texto utilizando outra fonte.
corrido normalmente
requer apenas um sinal.
O itálico é a forma-
padrão. No entando, há
diversas alternativas, tais
como o uso de negrito,
VERSALETES e mudanças
de cor. Também é

114. 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.

115. Bibliografia

116. 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.

117. Referências

118. 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-the-
best-blogs/