Anda di halaman 1dari 161

UA3 - Tipografia

OBJETIVOS

Apresentar a evoluo dos tipos e das tcnicas


Discutir conceitos e classificaes tipogrficas
Estudar estratgias para composio com tipos
Analisar especificaes para o uso de tipografia na
WEB

119
UNIDADE DE APRENDIZADO 3

Tipografia
BCA 3.1 - Origem e tecnologias BCA 3.3 - Composio com tipos
Mapa A escolha dos tipos
Evoluo das letras latinas Intervenes na Aplicao de Tipos
4 Revolues que modificaram Recursos de Composio para Destaque de
o modo de reproduo da escrita Elementos
Relao entre tipos
BCA 3.2 - Conceitos Contrastes entre tipos
Espcies de caracteres: Critrios para uso de fontes
Partes do tipo
Variaes estruturais BCA 3.4 - Tipografia Digital
Sistema de medidas Arquivos de fontes digitais
Classificao das famlias Formatos de fontes
tipogrficas Fontes personalizadas
a) ATypI - Association (1954) Caractersticas dos Textos na web
Typographique International Restries para o uso trabalho com
b) Robert Bringhurst (1996) tipografia na web
c) Tipos Ps-Modernos (2002) Apresentando textos por intermdio de
Alguns tipgrafos renomados e seus imagens
tipos
BCA 3.5 - Dicas para a seleo de tipos

120 UA 3 | BCA 3.1 | Origem e tecnologias


BCA 3.1 - Origem e tecnologias
Evoluo das letras latinas

121 UA 3 | BCA 3.1 | Origem e tecnologias


Narrativas visuais so to antigas quanto o prprio homem.

PINTURA RUPESTRE:
a forma mais antiga de narrao de que se tem
conhecimento. Foi produzida entre 40.000 e 10.000 A.C.

Na pr-histria as ilustraes descreviam fatos que as


palavras ainda no podiam descrever.

122 UA 3 | BCA 3.1 | Origem e tecnologias


A simplificao dos desenhos originou smbolos grficos
abstratos para representar:

Fonemas > Letras > ALFABETO

Hierglifo: Caracter pertencente a um dos vrios sistemas de


escrituras onde os caracteres so PICTOGRAFIAS

PICTOGRAFIA: forma de escrita pela qual idias so


transmitidas atravs de desenhos

Na antiguidade o suporte para a escrita e para a ilustrao


era a pedra ou a argila.

123 UA 3 | BCA 3.1 | Origem e tecnologias


Depois da gravao em pedra ou argila vieram os volumen:
cilindros de papiro facilmente transportados.

ESCRIBAS:
Dominavam a leitura e a escritura e eram uma classe
poderosa. Educavam desde o povo at a classe dominante
para a manuteno das estruturas sociais. Os escribas
tambm ilustravam seus escritos.

124 UA 3 | BCA 3.1 | Origem e tecnologias


Evoluo das letras latinas
ANTIGUIDADE

Romana Capital quadrada (300 a.c)

Romana Rstica (200 a.c)

125 UA 3 | BCA 3.1 | Origem e tecnologias


Evoluo das letras latinas
IDADE MDIA Queda do Imprio Romano Sc. V / Renascimento Sc. XV

A escrita era manual e feita por calgrafos

Uncial (sc. IV)

Semi-Uncial (sc. V-VIII)

126 UA 3 | BCA 3.1 | Origem e tecnologias


Evoluo das letras latinas
IDADE MDIA Queda do Imprio Romano Sc. V / Renascimento Sc. XV

Carolngea (sc. VIII- XII)

Gtica (sc. XII sc. XV)

Iniciais Gticas (1200 a 1500)

127 UA 3 | BCA 3.1 | Origem e tecnologias


Evoluo das letras latinas
IDADE MDIA Queda do Imprio Romano Sc. V / Renascimento Sc. XV

Cursiva (sc. XV)

Humanistas (renascimento):
Longas ligaduras

128 UA 3 | BCA 3.1 | Origem e tecnologias


Evoluo das letras latinas
IDADE MDIA Queda do Imprio Romano Sc. V / Renascimento Sc. XV

Gtica (sc. XII sc. XV)

Cursiva (sc. XV)

129 UA 3 | BCA 3.1 | Origem e tecnologias


4 Revolues
Que modificaram o modo
de reproduo da escrita

1. Gutenberg - inveno da prensa tipogrfica


2. Revoluo Industrial
3. Fotocomposio
4. Tecnologia Digital

130 UA 3 | BCA 3.1 | Origem e tecnologias


1- Sc. XV XVI - perodo 1450 1870
Impresso por tipos mveis

131 UA 3 | BCA 3.1 | Origem e tecnologias


1- Sc. XV XVI - perodo 1450 1870
Impresso por tipos mveis

Johannes GUTENBERG formula o processo de impresso manual


utilizando Tipos Mveis

O mais antigo sistema de composio tipogrfica e foi o nico at o


final do sculo XIX. Est em uso at hoje, em pequenas grficas, em
todo o pas. Foi utilizado por Gutenberg na produo da Bblia de 42
linhas, em 1455.

Os tipos de metal, com caracteres em alto relevo e invertidos, so


organizados individualmente em um basto componedor, formando
linhas de palavras. Depois de utilizados na impresso, os tipos so
devolvidos a uma gaveta, reordenados para uso posterior.

Bblia - 1454

Exploso da impresso.

132 UA 3 | BCA 3.1 | Origem e tecnologias


2 - perodo 1870 1950
Aps a Revoluo Industrial composio quente

133 UA 3 | BCA 3.1 | Origem e tecnologias


2 - perodo 1870 1950
Aps a Revoluo Industrial composio quente

No final do sculo XVIII, com os adventos da Revoluo Industrial,


padro de impresso que preponderou por mais ou menos 400 anos
alterado.

Os processos artesanais do lugar s mquinas impressoras a vapor


substituem as manuais, e a gravao de imagens em chapas para
impresso por sensibilizao fotogrfica difundida.

Monotype e Linotype, mtodos mecnicos de fundio e composio


de tipos mveis, alternativos composio manual, foram lanados
ainda antes do virar do sculo (1884 e 1887)
e marcaram um salto significativo na velocidade de produo.

Com uma mquina Linotype, equipada com chumbo em ponto lquido,


era possvel compor uma linha inteira de texto datilografada no
teclado da mquina. Esta linha era imediatamente fundida e
integrada na composio de colunas e de pginas.
A produtividade aumentou. Um operador de Linotype podia compor o
equivalente a sete ou oito compositores manuais.

134 UA 3 | BCA 3.1 | Origem e tecnologias


3 - perodo 1950 1985
Fotocomposio - Sistema de composio a frio

135 UA 3 | BCA 3.1 | Origem e tecnologias


3 - perodo 1950 1985
Fotocomposio - Sistema de composio a frio

As matrizes dos tipos eram vazadas. Os caracteres so


projetados em uma pelcula para filme fotogrfico.

Foi possvel graas evoluo da impresso offset, que


permitia reprodues com melhor definies e,
consequentemente, maior qualidade final. Os sistemas de
fotocomposio eram incrivelmente mais rpidos,
comparados aos sistemas mecnicos. As matrizes traziam os
caracteres em negativo, que eram projetados em suportes
sensveis luz e processados fotograficamente.

Tipos ainda restritos.

136 UA 3 | BCA 3.1 | Origem e tecnologias


4 - a partir 1985
Tecnologia Digital Desktop publish

137 UA 3 | BCA 3.1 | Origem e tecnologias


4 - a partir 1985
Tecnologia Digital Desktop publish

O primeiro conjunto de equipamentos e sistemas de desktop


publishing (dtp) apresentado em 1985 pela Apple Computer
o computador Macintosh, o software Page Maker I, da Aldus
Corporation,fontes digitais licenciadas pela ITC (International
Typeface Corporation), linguagem de descrio de pgina
postscript da Adobe e o modelo original da impressora Apple
Laser Writer com resoluo de 300 dpi.

Os tipos deixaram de ser, definitivamente, objetos com


propriedades fsicas; passaram a ser seqncias digitalizadas
em cdigo binrio, vistas em tela de computador ou
descries de curvas vetoriais interpretadas por uma
impressora.

A liberdade dos Tipos.

138 UA 3 | BCA 3.1 | Origem e tecnologias


UNIDADE DE APRENDIZADO 3

Tipografia
BCA 3.1 - Origem e tecnologias BCA 3.3 - Composio com tipos
Mapa A escolha dos tipos
Evoluo das letras latinas Intervenes na Aplicao de Tipos
4 Revolues que modificaram Recursos de Composio para Destaque de
o modo de reproduo da escrita Elementos
Relao entre tipos
BCA 3.2 - Conceitos Contrastes entre tipos
Espcies de caracteres: Critrios para uso de fontes
Partes do tipo
Variaes estruturais BCA 3.4 - Tipografia Digital
Sistema de medidas Arquivos de fontes digitais
Classificao das famlias Formatos de fontes
tipogrficas Fontes personalizadas
a) ATypI - Association (1954) Caractersticas dos Textos na web
Typographique International Restries para o uso trabalho com
b) Robert Bringhurst (1996) tipografia na web
c) Tipos Ps-Modernos (2002) Apresentando textos por intermdio de
Alguns tipgrafos renomados e seus imagens
tipos
BCA 3.5 - Dicas para a seleo de tipos

139 UA 3 | BCA 3.2 | Tipografia: conceitos


BCA 3.2 - Tipografia: conceitos

Tipografia
Design das letras e sua organizao no espao, a gramtica do design
grfico, ora chamando ateno, ora delineando estilos e contedos.

Ofcio que trata dos atributos visuais da linguagem escrita (Weller,


apus Brittin e Glynn. 1987), envolve a seleo e a aplicao de tipos ,
a escolha do formato da pgina assim como a composio das letras
de um texto, com o objetivo de transmitir uma mensagem do modo
mais eficaz possvel, gerando no sujeito leitor significaes
pretendidas pelo originador da mensagem.

Tipologia
Processo de classificao ou estudo de um conjunto, qualquer que
seja a natureza dos elementos que o compem, para determinao
das categorias em que se distribuem, segundo critrios definidos.
(NIEMEYER, 2000)

Tipologia no sinnimo de Tipografia.


140 UA 3 | BCA 3.2 | Tipografia: conceitos
Baskerville

CARACTERE
Uma letra, nmero e/ou sinal

TIPO
Um conjunto de caracteres em estilo especfico
Univers
FONTE OU FAMLIA TIPOGRFICA
Conjunto completo de sinais alfabticos (caracteres
maisculos e minsculos) e para-alfabticos
(algarismos e sinais de pontuao) que integram um
determinado alfabeto (Niemeyer, 2000).

Memphis O alfabeto latino composto de 26 sinais, mas uma


fonte no se limita isso. Existem tambm os sinais
que no so letras: os sinais de pontuao,
acentuao, numerais, smbolos decorativos, etc.

Snell Uma fonte para uso internacional costuma ter 256


caracteres, entre letras e sinais no alfabticos.

141 UA 3 | BCA 3.2 | Tipografia: conceitos


Caligrafia
Processo manual para a obteno de letras nicas, a partir
de traados contnuos mo livre.
(FARIAS, 2004)

Lettering
Processo manual para obteno de letras nicas, a partir de
desenhos.
(FARIAS, 2004)
Herb Lubalin um designer que
utiliza a tipografia como um
elemento plstico com grande
habilidade. Ao lado, ttulo para
o LadiesHome Journal

142 UA 3 | BCA 3.2 | Tipografia: conceitos


Espcies de caracteres

Existem 12 grupos de caracteres no alfabeto latino, so eles:

143 UA 3 | BCA 3.2 | Tipografia: conceitos


1. Maisculas ou caixa-alta

As letras maisculas tambm so


conhecidas por caixa-alta devido sua
localizao na caixa de composio
tipogrfica.

As maisculas podem ter diversos


desenhos porm com caractersticas
semelhantes. So essas diferenas que
do personalidade uma famlia.

144 UA 3 | BCA 3.2 | Tipografia: conceitos


2. Minsculas ou caixa-baixa

Adotadas pelo imperador romano Carlos


Magno durante seu reinado, conhecidas
como carolngias.

Assim como as maisculas, as minsculas


tambm tem uma denominao devido
sua colocao da caixa de composio,
podendo ser chamadas de caixa-baixa.

145 UA 3 | BCA 3.2 | Tipografia: conceitos


3. Versaletes

Os caracteres versaletes so letras versais


(maisculas) com altura igual s letras
minsculas. Tambm so conhecidas
como small caps.

146 UA 3 | BCA 3.2 | Tipografia: conceitos


4. Ligaturas

So letras com coneces, com dois ou


mais caracteres. Em portugus, uma das
poucas ligaturas teis a fi.
As ligaturas evitam a inconveniente
sobreposio da terminao do f com o
pingo do i.

147 UA 3 | BCA 3.2 | Tipografia: conceitos


Ligaturas tambm podem ser usadas como recurso de estilo

ITC Avant Garde de Herb Lubalin.


E Cholla Unicase de Sybille
Hagman da Emigre.

Optima Nova Titling, verso Frases compostas com


para ttulos com vrias Mrs Eaves Ligatures.
ligaturas, de Hermann Zapf

148 UA 3 | BCA 3.2 | Tipografia: conceitos


5. Ditongos

Maisculas ou minsculas unidas, em geral,


por suas hastes e que, em determinadas
lnguas, representam fonemas prprios.

149 UA 3 | BCA 3.2 | Tipografia: conceitos


6. Acentos grficos

Nas fontes digitais existem os acentos


grficos separados e em conjunto com os
letras. Sendo assim cada caractere
acentuado corresponde um caractere
individual.

150 UA 3 | BCA 3.2 | Tipografia: conceitos


7. Algarismos

Os algarismos, ou numerais, apresentam


uma classificao que os divide em 3
grupos de acordo com as caractersticas
do seu desenho:
Old Style; Lining; e Small Caps.

151 UA 3 | BCA 3.2 | Tipografia: conceitos


OLD STYLE
Tambm conhecido por lowercase figures ou text figures, ou seja,
nmeros alinhados pelo texto. Isso quer dizer que esses nmeros tem
linhas ascendentes e descendentes.

LINING
Os numerais alinhados, mais freqentes, so conhecidos por lining
figures, titling figures ou cap figures. Esses numerais tem o tamanho
de uma maiscula e no apresentam ascendentes nem descendentes.

SMALL CAPS
Os numerais Small Caps, assim como o lining no apresentam
ascendentes e descendentes, mas tm o tamanho de um versalete
(small caps).

152 UA 3 | BCA 3.2 | Tipografia: conceitos


Voc sabia?

Numerais no sistema arbico: o valor numrico de cada signo


determinado pela quantidade de ngulos que ele
apresenta. O nmero 1 tem um ngulo, o 2, dois ngulos e
assim por diante. O zero no tem ngulo nenhum, assumindo
portanto a forma redonda.

153 UA 3 | BCA 3.2 | Tipografia: conceitos


8. Fraes

As fraes tambm tm seu espao nas fontes. As trs


fraes ao lado aparecem na maioria das fontes de texto.

154 UA 3 | BCA 3.2 | Tipografia: conceitos


9. Sinais de pontuao

Esses caracteres formam o conjunto de elementos que os


transcrevem ritmos da fala para a escrita, sendo
indispensveis a qualquer fonte.

155 UA 3 | BCA 3.2 | Tipografia: conceitos


Voc sabia?

A interrogao deriva da abreviao da palavra latina


quaestio, que utiliza a maiscula Q sobre a minscula o.

A exclamao deriva da abreviao da palavra latina io


(contentamento), com a maiscula I sobre a minscula o.

156 UA 3 | BCA 3.2 | Tipografia: conceitos


10. Smbolos monetrios

Os smbolos monetrios que compem o conjunto


internacional de caracteres (padro ISO para fontes latinas)
so o dlar e o cent norte-americanos, o yen japons, a libra
esterlina da (moeda inglesa), o florin (antiga moeda
holandesa) e, mais recentemente, o euro.

157 UA 3 | BCA 3.2 | Tipografia: conceitos


11. Smbolos de operao matemtica

Muito teis em escritos cientficos os smbolos de operaes


matemticas no podem ficar de fora das fontes.

158 UA 3 | BCA 3.2 | Tipografia: conceitos


12.Smbolos comerciais

Os principais smbolos comerciais presentes nas principais


fontes esto apresentados ao lado.

159 UA 3 | BCA 3.2 | Tipografia: conceitos


Voc sabia?

A arroba representa uma antiga medida de peso. Em ingls, significa at (em) e


ganhou novo status com o uso para
endereamento em e-mails, pois no tem funo em textos normais.

O e comercial derivado da et. Poucos caracteres permitem tanta variao na


sua forma. O et sofreu vrias transformaes at chegar ao seu traado
caracterstico.

O fleuron o mais aristocrticos dos ornamentos tipogrficos. Sua origem data de


1499 nas encadernaes de Aldus Manutius. Foi usado inicialmente como
decorao externa, em encadernaes de livros.
Algumas fontes tem fleurons como suplemento decorativo, mas so
normalmente encontrados em dingbats.

O smbolo de pargrafo era usado pelos antigos escribas para marcar o incio de
um pargrafo ou uma diviso no texto. O smbolo deriva do grego pi que significa
paragraphos.

160 UA 3 | BCA 3.2 | Tipografia: conceitos


Partes do tipo

As principais partes que compe os tipos so as hastes (ou


fustes) e as bases, as ascendentes e as descendentes, as
barrigas e os ocos (ou vazios), as barras, os montantes (ou
traves), os ganchos, as pices (ou cabeas), os braos, os
ombros, as orelhas e as caudas.

Apesar de a palavra Tipografia abaixo estar composta com as


fontes Bernhard Modern e Palatino, ambas com mesmo
tamanho, note que a altura de x pode variar de uma fonte
para outra.

161 UA 3 | BCA 3.2 | Tipografia: conceitos


Partes do tipo

162 UA 3 | BCA 3.2 | Tipografia: conceitos


Variaes estruturais

Tamanho
Relacionada ao corpo de tipo, isto , a sua altura

Forma
Relacionada s diferenas no desenho de uma letras nas suas
verses em caixa alta e caixa baixa

Peso
Relaciona-se estrutura dos traos em um mesmo corpo de
negrito, normal, claro, um tipo de uma mesma famlia.
bold, regular, light
black medium Os nveis de variao podem ser: extra-negrito (extra-black),
negrito (bold), normal (medium), claro (light), e extraclaro
(extralight)

163 UA 3 | BCA 3.2 | Tipografia: conceitos


Variaes estruturais
Quanto ao contraste

De angulao

Baskerville, Palatino, Goudy Old Style

De espessura dos traos

Baskerville, Helvtica

164 UA 3 | BCA 3.2 | Tipografia: conceitos


Quanto inclinao
Normal, Romano itlico, inclinado
Optima roman Optima itlic

Quanto estrutura

Garamond, Helvtica, Zapfino

Quanto largura do tipo

Condensado, apertado Expandido, wide


Optima Wide
Optima condensed

165 UA 3 | BCA 3.2 | Tipografia: conceitos


Sistema de medidas: CCERO E PAICA

CCERO

Ao final do sculo XIX, com o intuito de padronizar o


sistema de medidas dos tipos, o padro Didot criado
por Franoise-Ambroise Didot passou a ser
amplamente adotado.

Sua unidade o ccero.


1 ccero = 4,513 mm = 12 pontos (0,376065 mm cada)

O ccero utilizado para determinar extenso de


linhas e altura e largura de pginas. At a dcada de
1970 foi o sistema mais utilizado no Brasil.

166 UA 3 | BCA 3.2 | Tipografia: conceitos


Sistema de medidas

PAICA
O sistema da paica derivado do sistema Didot e o sistema
tipomtrico anglo-americano e tambm adotado pelo maioria
dos softwares de composio tipogrfica.
A paica equivale a 1/72 polegadas inglesas e tambm formada
por 12 pontos. O ponto paica um pouco menor que o ponto
ccero: 0,351368 mm. Uma paica mede: 4,216416 mm.

pt (pontos) mm (milmetro) in (polegada) p (paica)


pt (pontos) 1 0,3759 1/72 1/12
mm (milmetro) 2,83 1 1/25,4 1/4,23

in (polegada) 72 25,4 1 6
p (paica) 12 4,23 1/6 1

167 UA 3 | BCA 3.2 | Tipografia: conceitos


Unidades de medida: eme e ene

Uma outra unidade de medida tipogrfica a que trata do


espacejamento e da justificao dos textos.

Eme
Largura da letra M do tipo que est sendo composto. Esta
medida equivale a um quadrado cujo lado tem a mesma
medida do tipo que est sendo composto. Para simplificar
pode ser definido pelo pelo nmero de pontos do tipo em
uso. Se o corpo 18 est em uso a medida eme equivale a 18
pontos.

Nos softwares de editorao eletrnica estas unidades de


medida so alocadas para determinar os espaos que
separam os caracteres. O espao fino (hairline) tem a largura
de 1/4 de eme.

168 UA 3 | BCA 3.2 | Tipografia: conceitos


Unidades de medida

Ene
Largura no N maisculo do corpo do tipo em uso. Equivale a
metade de M.

Dependendo do nmero de unidades M e N utilizadas, o


espacejamento pode ser aberto, fechado ou normal.
(Niemeyer, 2001)

169 UA 3 | BCA 3.2 | Tipografia: conceitos


Classificao das famlias tipogrficas
ATypI- Association Typographique International

1 Romanos 4 Manuais
a) Humanistas (ou venezianos) a) Decorativos (display ou fantasia)
b) Geraldos (garaldinos) b) Brush
c) Transicionais (barrocos ou old style)
d) Didines (modernos) 5 Manuscritos (ou script)
e) Mecanizados
6 - Gticos
2 Lineares (sem serifa) a) Texturados
b) Rotundos
a) Grotescos
c) Bastardos
b) Geomtricos
d) Franktur
c) Neogrotescos
d) Humansticos 7 No latinos

3 Incisos

170 UA 3 | BCA 3.2 | Tipografia: conceitos


1 - Romanos

A) HUMANISTAS (OU VENEZIANOS)

Histrico: Descendem dos tipos criados a partir das minsculas do sc.


XIX originados das romanas pioneiras dos primeiros impressos por
volta de 1465. So baseadas nos desenhos de caracteres com
minsculas carolngeas dos manuscritos humanistas.

Caractersticas: O desenho dos caracteres tem origem no uso da pena


empunhada de modo obliquo. A inclinao fica clara no eixo do O,
no b e na barra do e. No h grandes contrastes entre hastes
grossas e finas.. Apresenta serifas triangulares ligadas s hastes
por curvas.

Exemplos: Centaur, Deepdene, Italian Old Style, Jenson, Kennerley,


Lutetia, Schneider Old Style, Stempel Schneider, Venetian Old
Style, Verona.

171 UA 3 | BCA 3.2 | Tipografia: conceitos


1 - Romanos

B) GERALDOS (GARALDINOS)

Histrico: Denominao deriva de Garamond + Aldus Mantius cujas


famlias homnimas so representativas deste grupo. Estes tipos
dominaram a tipografia europia por dois sculos.

Caracterstica: Como os humanistas possuem eixos inclinados para a


esquerda, serifas triangulares e serifas das caixas baixas oblquas.
Porm possuem maior contraste das hastes e a barra do e tende a ser
horizontal.

Exemplos: Benguiat, Bembo, Caslon, Dante, Geraldus, Garamond,


Goudy Ols Style, palatino, Palatin, Sabon, Sourvenir.

172 UA 3 | BCA 3.2 | Tipografia: conceitos


1 - Romanos

C) TRANSICIONAIS (BARROCOS OU OLD STYLE)

Histrico: Tem origem no Roman du Roi, alfabeto criado para a


imprensa real por determinao de Luis XIV e projetado segundo
regras matemticas rgidas.

Caractersticas: A Baskerville a famlia mais representativa desta


classe e apresenta grande contraste das hastes e serifas pontiagudas.
Os tipos transicionais apresentam maior variao na espessua das
hastes comparados aos Geraldos, suas serifas so planas (porm
triangulares) e o eixo vertical ou levemente inclinado.

Exemplos: Times, Americana, Baskerville, Bookman, Calednia,


Janson, Fournier, Imprimtur, Perptua, Quadriga, Antiqua, Stone
Serif, Times, Zapf Internacional.

173 UA 3 | BCA 3.2 | Tipografia: conceitos


1 - Romanos

d) DIDONES (MODERNOS)

Histrico: O termo deriva da juno dos nomes Didot + Bodoni. Sua


oriegm est no Neoclssico da segunda metadae do sculo XVIII e
incio do XIX. Tambm baseiam-se em rgidas propores matemticas
radicalizando as inovaes dos tipos transicionais.

Caractersticas: possuem contraste entre as hastes mais acentuado


que o dos transicionais e o eixo definitivamente vertical. Apresenta
serifas lineares onde nas minsculas so especialmente finas e
perpendiculares s hastes, unidas a estas sem quaisquer curvaturas. O
desenho tende a ter uma configurao geomtrica.

Exemplos: Bodoni, Didot, Corvinus, Fenice, Modern, Extended,


Walbaum.

174 UA 3 | BCA 3.2 | Tipografia: conceitos


1 - Romanos

E) MECANIZADOS

Histrico: Tem origem na revoluo Industrial e no mercado


publicitrio que surge a parir de ento. So desenhados para ser vistos
de longe e em meio a outros impressos concorrentes. Por isso tendem
a ser mais pesados e tm destaque nas serifas.

Caractersticas: Serifas marcantes, slidas, formando um ngulos reto


com alinha de base. Esta perpendicularidade se enfatiza na ligao s
hastes por outro 6angulo reto serifa retangular, como na Memphis,
ou contrastada com o uso de curvas discretas para estas ligaes
serifa inglesa, Claredon.

Exemplos: Aachen, American typewriter, Benton, Cheltenham,


Cleredon, Clearface, Corrier, Egizio, Ionic, Melior, Memphis, Neutra,
Nimrod, Lubalin Graph, Pro Arte, Rockwell, Serifa Volta, Schadow.

175 UA 3 | BCA 3.2 | Tipografia: conceitos


2 Lineares (sem serifa)

Tipos sem serifa. Algumas famlias so referidas nos


EUA como Gothic ou Grotesque, na Alemanha como
grotesk e na Frana como Antiqe. Tambm tm
origem no mercado de impressos advindo da
Revoluo industrial.

176 UA 3 | BCA 3.2 | Tipografia: conceitos


2 Lineares (sem serifa)

A) GROTESCOS

Histrico: Originrio do sculo XIX, bastante pesado mais com algum


contraste na espessura das hastes.

Caractersticas: Os caracteres so reduzidos s suas estruturas e


conservam suas formas mais essenciais. Apresentam curvas discretas,
com terminaes horizontalizadas das hastes e curvas.

Exemplos: Alternate Gothic, Grotesca, Grotesque, Franklin Gothic.

177 UA 3 | BCA 3.2 | Tipografia: conceitos


2 Lineares (sem serifa)

B) GEOMTRICOS

Histrico: No movimento modernista, com inspirao


geomtrica e racionalista e comeam e ser difundidos na
dcada de 1930.

Caractersticas: So monolineares no h contraste entre


as hastes - tendem a partir de configuraes bsicas para a
construo de grupos de caracteres com estrutura
semelhante. So bem menos pesados do que os grotescos dos
quais derivam. Em geral, apresenta-se sem o gancho
superior.

Exemplos: Avant-Garde Gothic, Erbar, Eurostyle, Futura.

178 UA 3 | BCA 3.2 | Tipografia: conceitos


2 Lineares (sem serifa)

C) NEOGROTESCOS

Histrico: Difundidos a partir de meados da dcada de 1950,


Tm desenho cuidadoso, com forte preocupao com a
legibilidade tanto para corpos grandes quanto para
pequenos.

Caractersticas: Como os geomtricos, derivam dos


grotescos, com menor contraste entre as hastes do que
aqueles, mas no monolineares como os geomtricos. As
hastes tendem a terminar de forma oblqua.

Exemplos: Arial, Folio, Helvtica, Univers.

179 UA 3 | BCA 3.2 | Tipografia: conceitos


2 Lineares (sem serifa)

D) HUMANSTICOS

Histrico: Embora sem serifa, so menos ligados aos


grotescos e mais nas inscries das maisculas lapidrias
romanas e nas minsculas Humanistas ou Geraldas.

Caractersticas: tendem a ser mais delicados do que as trs


subclasses anteriores, com contrastes entre as hastes. O a
possui o gancho superior.

Exemplos: Frutiger, Gill Sans, Shannon, Myriad, Optima.

180 UA 3 | BCA 3.2 | Tipografia: conceitos


3 Incisos

So tipos que possuem semiserifa,


baseados nas romanas gravadas em pedra.
Suas formas assemelham-se mais aos
originais esculpidos do que a letras
caligrficas.

Exemplos: Albertus, Augustea, Afriz


Quadrata, Hadriano, Meridien

181 UA 3 | BCA 3.2 | Tipografia: conceitos


4 - Manuais

A) DECORATIVOS (DISPLAY OU FANTASIA)

So tipos que parecem mais desenhados do que


propriamente escritos. Comumente utilizados em
logotipos, displays, cartazes, anncios publicitrios.
No se destinam a texto corrido.

Exemplos: Arnold Boecklin, Benguiat Gothic, Biffo,


Cdex, Hobo, Largo, Profil, Revue, Stop, Stencil.

182 UA 3 | BCA 3.2 | Tipografia: conceitos


4 - Manuais

B) BRUSH

Tem inspirao na letra cursiva por isso o eixo


claramente inclinado, as linhas geralmente leves e
arredondadas. No entanto ntido que so
desenhados e que no tm como objetivo imitar a
escrita cursiva apesar de se inspirarem nela.

Exemplos: Ballon, Brush Script, Dom casual, Tekton.

183 UA 3 | BCA 3.2 | Tipografia: conceitos


5 Manuscritos (ou script)

So tipos que imitam a cursiva comum ou


formal (ligados entre si). Distinguem-se das
manuais por imitarem claramente a escrita
caligrfica.

Exemplos: Ariston, Coronet, Legend,


Lithographia Shelley, Mistral, Park Avenue,
Snell, Present Script, Virtuosa.

184 UA 3 | BCA 3.2 | Tipografia: conceitos


6 - Gticos

185 UA 3 | BCA 3.2 | Tipografia: conceitos


6 - Gticos

A) TEXTURADOS

Foram os tipos utilizados na bblia de Gutemberg:


pontiagudos, com hastes terminando em losango.

Exemplo: Cloister, Wilhelm Klingspor.

186 UA 3 | BCA 3.2 | Tipografia: conceitos


6 - Gticos

B) ROTUNDOS

As terminaes so retangulares, mas as estruturais


incluem curvas marcantes, com linhas angulosas. Tm
origem na Espanha e na Itlia.

Exemplos: Schwaben Alt, Trump-Deutsch, Walau,


Wedding Text, Weib-Gotisch.

187 UA 3 | BCA 3.2 | Tipografia: conceitos


6 - Gticos

C) BASTARDOS

o gtico mais popular, conhecido na Alemanha


como Schwabacher. bem enfeitado, com o caixa
baixa pontiagudo. As maisculas so mais
dinmicas do que as dos texturados e rotundos.

Exemplos: Ehmecke-Sschwabacher, Old


Schwabacher, Renata.

188 UA 3 | BCA 3.2 | Tipografia: conceitos


6 - Gticos

D) FRANKTUR

Muito difundido na Renascena e hoje o tipo gtico mais


utilizado na Alemanha. Tem formas mais sofisticadas que os
bastardos, com curvas e ngulos que se alternam e
maisculas com hastes curvas. As ascendentes t6em serifas
que se bifurcam.

Exemplos: Brietlopf-Franktur, Fette Gotich, Unger-Franktur,


Gilgengart Drer Fraktur.

189 UA 3 | BCA 3.2 | Tipografia: conceitos


7 No latinos

Todos as demais famlias tipogrficas que pertencem a outros


alfabetos como tibetano, rabe, russo e etc.

190 UA 3 | BCA 3.2 | Tipografia: conceitos


Classificao de Tipos por
Robert Bringhurst (1996)

1. Romana
2. Renascentistas (sc. XV e XVI)
3. Barrocas (sc. XVII)
4. Neo-Clssicas (sc. XVIII)
5. Romnticas (sc. XVIII e XIX)
6. Realistas (sc. XIX e XX)
7. Modernistas Geomtricas (sc. XX)
8. Modernistas Lricas (sc. XX)
9. Ps-Modernistas (fins sc. XX)
10.Ps-Modernistas geomtricos (fins sc.XX)

BRINGHURST, Robert. Elementos do Estilo Tipogrfico.


So Paulo: Ed. Cosac & Naify. 2005

191 UA 3 | BCA 3.2 | Tipografia: conceitos


1- Romana

Caractersticas Perodo Romano:


a) Sistematizao das propores e do desenho das letras;
b) Abertura modesta;
c) Trao modulado (a grossura do trao varia com a
direo);
d) Serifas como elemento formal que termina o trao.

Trajan, fonte desenhada por Carol


Twombly, 1988, baseada nas
inscries da Coluna de Trajano
(Roma), gravadas em 113 d.c.

192 UA 3 | BCA 3.2 | Tipografia: conceitos


2 - Renascentistas (sc. XV/XVI)

Caractersticas Letra Renascentista Redonda (sc. XV


e XVI):
Letra com muita luz e espao;
Fuste vertical;
Trao modulado com contraste moderado (variao entre
zona + grossa e a + fina do trao);
Eixo humanista (direo do brao humano, semelhana do
trao produzido por cana cortada);
Altura de x modesta;
Serifa de cabea oblqua e encrespada, em bico (letras b e r);
Serifa de p: bilateral, abrupta ou ligeiramente espraiada
(cunha suave) (letras l e p);
Terminal: abrupto e em bico, formado a partir de pena
cortada (a, c, f e r)
Barra de e perpendicular ao eixo do trao;
A verso redonda ou Romana solitria (no possui itlico ou
bold)

193 UA 3 | BCA 3.2 | Tipografia: conceitos


2 - Renascentistas (sc. XV/XVI)

Caractersticas Letra Renascentista tardia (aps 1500):

O desenho mais suave e contido)


Serifas de cabea tornaram-se mais prximas da forma
da cunha;
Serifas de p tornaram-se adjacentes ao trao principal
(transio suave em vez de abrupta);
Terminal de a, c, f e r torna-se menos abrupto e mais
lacrimal;
Barra de e torna-se horizontal.

194 UA 3 | BCA 3.2 | Tipografia: conceitos


2 - Renascentistas (sc. XV/XVI)

Caractersticas Letra Itlica Renascentista:


O Itlico uma criao Renascentista. Deve-se ao estudioso e editor Aldus
Manutius ter sentido necessidade de um tipo mais estreito que, assemelhando-se
ao cursivo, possibilitava poupar espao na composio da pgina.
Encomendado a Francesco Griffo que o desenhou em 1499, em Veneza. Os
primeiros itlicos so conhecidos como Aldine.

Trao principal vertical ou com inclinao no excedendo


os 10;
Curvaturas (a, c, e, d, b) geralmente elpticas;
Trao fino e modulado;
Eixo humanista;
Pouco contraste;
Altura de x modesta;
Formas cursivas com serifas encrespadas e oblquas;
Descendentes serifadas bilateralmente ou sem serifas;
Terminais abruptos ou lacrimais;
Itlico completamente independente do redondo.

195 UA 3 | BCA 3.2 | Tipografia: conceitos


3 - Barrocas (sc. XVII)

Caractersticas Letra Barroca (sc. XVII):


Desenho mais dramtico, com formas
contraditrias;
Uma das caractersticas mais marcantes da
letra Barroca a grande variao no eixo de
uma letra para a seguinte;
O itlico Barroco ambidestro (orientao
para a esquerda e para a direita);
Foi no Barroco que surgiu o hbito de juntar
letra redonda e itlica na mesma frase;

196 UA 3 | BCA 3.2 | Tipografia: conceitos


3 - Barrocas (sc. XVII)

Caractersticas que as diferenciam das Renascentistas:

Eixo do trao na caixa baixa redonda e itlica varia


muito dentro do alfabeto;
A inclinao do itlico varia entre 15 a 20 (dentro do
alfabeto);
Aumenta o contraste;
Aumenta a altura de x;
A abertura reduz-se de forma geral;
Os terminais suavizam-se (tornam-se menos abruptos e
mais lacrimais);
Serifas de cabea (na letra redonda) tornam-se esquinas
angulosas;
Serifas de cabea nas ascendentes itlicas tornam-se
niveladas e mais rigorosas.

197 UA 3 | BCA 3.2 | Tipografia: conceitos


4 - Neo-Clssicas (sc. XVIII)

Caractersticas Letra Neoclssica (sc. XVIII):

Desenho mais esttico e mais rigoroso;


Afastamento do efeito do instrumento (cana
cortada): o eixo deixa de ser humanista e torna-se
vertical (eixo ditado pela idia e no pela
anatomia humana);
Abertura moderada;
Enquanto as Barrocas eram ambidestras, estas
no so de nenhuma mo;
Terminal lacrimal;
O primeiro tipo Neoclssico: Romain du Roi
(Frana, 1690);

198 UA 3 | BCA 3.2 | Tipografia: conceitos


4 - Neo-Clssicas (sc. XVIII)

Caractersticas que a diferenciam da Barroca:


Eixo predominantemente vertical, tanto
na redonda como na itlica;
Inclinao do itlico mais uniforme
(entre 14 e 16);
Serifas geralmente adjacentes ao trao
principal, mas mais finas, mais achatas
e niveladas.

199 UA 3 | BCA 3.2 | Tipografia: conceitos


5 - Romnticas (sc. XVIII e XIX)

Caractersticas Letra Romntica (sc. XVIII e XIX):

As caractersticas da letra Romntica refletem o


desaparecimento da cana cortada da escrita. No sc.
XVIII introduzida a pena cortada, instrumento de
desenho mais flexvel. O trao muito diferente, com
variaes mais abruptas (varia conforme a foras que se
empregue).

Tanto a Neoclssica como a Romntica


possuem eixo Racionalista;
Ambas parecem mais desenhadas que
escritas.

200 UA 3 | BCA 3.2 | Tipografia: conceitos


5 - Romnticas (sc. XVIII e XIX)

Caractersticas que a diferenciam da Neoclssica:

A mais evidente o contraste:


abrupta modulao do trao;
Eixo vertical intensificado atravs
do exagerar do contraste;
Terminal torna-se menos suave: de
lacrimal passa a redondo;
Serifas mais finas e de transio
abrupta;
A abertura reduzida.

201 UA 3 | BCA 3.2 | Tipografia: conceitos


6 - Realistas (sc. XIX e XX)

Caractersticas Letra Realista (fins sc. XIX e incio


sc. XX):

Procura a simplicidade para possibilitar a


leitura a um grupo mais vasto de pessoas;
Na maioria das vezes a letra Realista tem a
mesma forma base da Neoclssica ou da
Romntica, contudo tem serifas mais pesadas
(em bloco), de igual peso ao trao principal da
letra ou no as tem de todo.

202 UA 3 | BCA 3.2 | Tipografia: conceitos


6 - Realistas (sc. XIX e XX)

Caractersticas que a diferenciam da Romntica:

Serifas pesadas, em bloco ou ausncia de serifas;


Trao uniforme (ausncia de contraste ou
contraste reduzido): ausncia de modulao;
Abertura reduzida (cada vez mais);
Ausncia de itlico ou sua substituio por
oblquo;
As Small Caps (small capitals), elementos de
decorao ou figuras e outros sinais de
sofisticao,
cessam de existir.

203 UA 3 | BCA 3.2 | Tipografia: conceitos


7 - Modernistas Geomtricas (sc. XX)

Caractersticas Letra do Modernismo Geomtrico (sc. XX):

Caracterstica marcante do incio do sc. XX: geometrismo


(caracterstica do modernismo)
No tm distino de trao: no h modulao (tal fora
iniciado na letra Realista);
As serifas possuem o mesmo peso do trao, ou no
existem;
Abertura moderada;
No h eixo: os traos curvos so geralmente circulares;
Ausncia de itlico ou sua substituio por oblquo;
Procuram a pureza e no a popularidade, como tal, o seu
desenho deve-se mais a formas puras como o crculo e a
linha, que tradio que a antecede (a forma antes da
funo).

204 UA 3 | BCA 3.2 | Tipografia: conceitos


7 - Modernistas Lricas (sc. XX)

Caractersticas Letra do Modernismo Lrico (sc. XX):

Para alm do movimento pr-geometrismo, existiram outros que lhe


foram contemporneos. Movimentos como o
Expressionismo procuravam aproximar-se de uma vertente mais
orgnica, fsica e sensorial. Desenvolvimento do
orgnico enquanto oposio ao mecnico. O Modernismo Lrico
fundamentalmente um reinventar da forma
Renascentista.
Redescoberta dos prazeres da escrita da letra em vez do desenho:
redescoberta da caligrafia;
Redescoberta do eixo humanista;
Redescoberta da escala humanista das letras Renascentistas;
Trao modulado;
Grande abertura;
Relativamente forma renascentista, as serifas abruptas de cabea
e os terminais so mais assumidos (mais evidentes).

205 UA 3 | BCA 3.2 | Tipografia: conceitos


8 - Ps-Modernistas (fins sc.XX)

Caractersticas Letra do Ps-Modernismo (fins sc. XX):

Este perodo tem a suas bases no estudo da histria, das


propores da anatomia humana e nos prazeres da
caligrafia;
a) O desenho tipogrfico Ps-moderno baseia-se no revisitar
e reciclar das idias e formas Neoclssicas,
b) Romnticas e de outros perodos pr-modernos, sempre
com um toque de leveza e humor;
c) Ps-modernismo: atitude auto-consciente mas pouco
sria;
d) Mistura de eixo racionalista com energia caligrfica;
e) H muitos tipos de letra neste perodo: no h uma
nica regra.

206 UA 3 | BCA 3.2 | Tipografia: conceitos


8 - Ps-Modernistas
geomtricos (fins sc.XX)

Caractersticas Letra do Ps-Modernismo Geomtrico (fins


sc. XX):

Como as suas predecessoras do Modernismo


Geomtrico, so normalmente no serifadas ou
desenhadas
com trao contnuo (sem modulao);
Baseadas no crculo e linha, contudo assimtricas;
Ricas de nostalgia, reciclam valores e referncias
estticas as idias Realistas;
O desenho da letra inclui o humor ps-moderno;
H muitos tipos de letra neste perodo: no h
uma nica regra;
Ps-Modernismo: tal como o Neoclssico, uma
arte da superfcie, mais da viso do que da
reflexo.

207 UA 3 | BCA 3.2 | Tipografia: conceitos


Classificao de
Tipos Ps-Modernos F.V.Cauduro (2002)

Se refere a uma classificao dos principais estilos que


informam o imaginrio dos designers contemporneos,
profissionais e amadores, na criao de fonts.

1. Fontes Bitmap ou Pixelizadas


2. Fontes Techno
3. Fontes Revival ou Retro
4. Fontes Vernaculares ou Pop
5. Fontes Personalizadas
6. Fontes Grunge
7. Fontes Randmicas
8. Fontes Hbridas ou Esquizofrnicas
9. Fontes de Artifcio
10. Fontes Dingbats

208 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
1- Fontes Bitmap ou Pixelizadas

Formas tipogrficas inspiradas numa opo que


anteriormente era uma limitao; resultam de tipos
alfanumricos gerados obedecendo a uma matriz retangular
de pixels (bitmap) de baixa resoluo, caracterstica das
primeiras fontes digitais produzidas para impressoras de
agulha e para uso nas telas de videogames, de monitores de
computadores, displays eletrnicos em geral e em displays de
cristal lquido de relgios e calculadoras digitais.

209 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
2 - Fontes Techno

Fontes promovidas principalmente por estdios de design


grfico ingleses, alemes e japoneses; caracterizadas pelas
formas baseadas em ngulos retos, de espessura
geralmente uniforme, visual simplificado, emulando estilos
de letterings vistos em plantas e desenhos tcnicos de
engenharia, arquitetura, quadrinhos e filmes de fico
cientfica; parecem ser produzidas por instrumentos de
desenho, por normgrafos e plotters de canetas,
parodiando o estilo de escrita tecnicista analgico, pr-
digital; so muito utilizadas em flyers de raves.

210 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
3 - Fontes Revival ou Retro

Fontes que so releituras ou simplesmente cpias digitais


de fontes populares em outras pocas; so geralmente
pastiches que no se levam muito a srio nem se
preocupam muito com a exatido da citao. Exploram a
nostalgia e o saudosismo, sem privilegiar nenhuma poca
em particular.

211 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
4 - Fontes Vernaculares ou Pop

Fontes que se inspiram em elementos grficos


anedticos da literatura e da arte popular, do folklore,
assim como em mtodos de escrita de baixa qualidade
tipogrfica produzidos por dispositivos grficos
populares (como rotuladores, xeroxes, faxes, carimbos,
tipos xilogravados, tipos de antigas mquinas de
datilografia, tipos pintados, escritos a giz, caligrafados,
etc.)

212 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
5 - Fontes Personalizadas

Fontes baseadas na escrita mo-livre de uma


pessoa ou num estilo grfico idiosincrtico,
geralmente expressando um gosto ou estilo muito
singular e especfico.

213 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
6 - Fontes Grunge

Fontes sujas, trash, que se caracterizam por um


design imperfeito, desleixado, algumas vezes ilegvel,
e que geralmente se inspiram em graffitis, pichaes,
deterioraes, rudos, colagens, raspagens, etc.

214 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
7 - Fontes Randmicas

Fontes cujas outlines ou background so variveis cada


impresso em funo de irregularidades aleatrias
introduzidas atravs da linguagem PostScript nas curvas
matemticas que descrevem a figura (e o fundo,
conforme o caso) de cada tipo. Cada impresso nica,
sem nunca repetir a mesma forma.

215 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
8 - Fontes Hbridas ou Esquizofrnicas

Fontes que resultam de uma mistura fragmentada de


estilos de diversos tipos, de resultados imprevisveis,
apresentando uma lgica complexa de gerao de seus
tipos; enfatizam a desordem, a fragmentao, a
esquizofrenia, a mistura de estilos ou princpios
contraditrios de escrita.

216 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
9 - Fontes de Artifcio

So geralmente produzidas atravs de processo de


aplicao uniforme de um ou mais efeitos especiais de
Photoshop, ou resultam de outros algortmos analgicos
ou matemticos de deformao ou transformao de
forma; esses recursos exploram efeitos de
transformao coletivos, mudando fontes j existentes,
sem o designer se preocupar em inventar novas formas
de tipos from scratch.

217 UA 3 | BCA 3.2 | Tipografia: conceitos


Tipos Ps-Modernos
10 - Fontes Dingbats

Fontes no-alfanumricas, pictricas ou de sinais


grficos arbitrrios, e que exploram temas derivados de
cartoons, smbolos cientficos e comerciais, elementos
decorativos, pictogramas de sinalizao, marcas e logos
comerciais, sinais, molduras, fios, linhas, etc.

218 UA 3 | BCA 3.2 | Tipografia: conceitos


Alguns tipgrafos renomados
e seus tipos
CLAUDE GARAMOND Paris, Frana: 1480-1561
Fundidor de tipos, designer de tipos, editor.
Berthold Garamond BQ, Adobe Garamond, Stempel Garamond,
Typoart Garamond, LTC Garamont, Granjon, Sabon

JOHN BASKERVILLE Inglaterra: 1706-1775


Designer de tipos, mestre em redao, impressor.
TS Baskerville, Baskerville, Baskerville, John Baskerville, TS Old
Baskerville

GIAMBATTISTA BODONI Parma, Itlia: 1740-1813


Designer de tipos, impressor de livros, gravador e editor.
Bodoni, Bodoni, LTC Bodoni 26, Bodoni Classico, Bodoni Stencil,
Bauer Bodoni, ITC Bodoni Six, ITC Bodoni Twelve, ITC Bodoni
Seventy-Two, Linotype Gianotten

219 UA 3 | BCA 3.2 | Tipografia: conceitos


Alguns tipgrafos renomados
e seus tipos
MORRIS FULLER BENTON EUA: 1872-194
Engenheiro, designer de tipos.
Bodoni-Antiqua, Broadway, Century, Franklin Gothic, Clearface,
Cheltenham, Souvenir, Stymie

RUDOLF KOCH Nuremberg, Alemanha: 1876-1934


Designer de livros e de tipos, calgrafo e professor.
Kabel, Koch-Antiqua, Claudius, Wilhelm-Klingspor-Gotisch, Wallau

STANLEY MORISON Inglaterra: 1889-1967


Designer de tipos.
Times New Roman, Bembo (redesenho), Blado

PAUL RENNER Wernigerode, Inglaterra: 1878-1956


Designer de tipos, artista grfico, pintor, autor e professor.
Futura, Renner Antiqua

ED (EDWARD) BENGUIAT EUA: 1927


Designer de tipos, calgrafo e msico de jazz.
Bauhaus, Benguiat, Benguiat Gothic, Bookman, Tiffany
220 UA 3 | BCA 3.2 | Tipografia: conceitos
UNIDADE DE APRENDIZADO 3

Tipografia
BCA 3.1 - Origem e tecnologias BCA 3.3 - Composio com tipos
Mapa A escolha dos tipos
Evoluo das letras latinas Intervenes na Aplicao de Tipos
4 Revolues que modificaram Recursos de Composio para Destaque de
o modo de reproduo da escrita Elementos
Relao entre tipos
BCA 3.2 - Conceitos Contrastes entre tipos
Espcies de caracteres: Critrios para uso de fontes
Partes do tipo
Variaes estruturais BCA 3.4 - Tipografia Digital
Sistema de medidas Arquivos de fontes digitais
Classificao das famlias Formatos de fontes
tipogrficas Fontes personalizadas
a) ATypI - Association (1954) Caractersticas dos Textos na web
Typographique International Restries para o uso trabalho com
b) Robert Bringhurst (1996) tipografia na web
c) Tipos Ps-Modernos (2002) Apresentando textos por intermdio de
Alguns tipgrafos renomados e seus imagens
tipos
BCA 3.5 - Dicas para a seleo de tipos

221 UA 3 | BCA 3.3 | Composio com tipos


BCA 3.3 - Composio com tipos

INTERVENES NA APLICAO DE TIPOS

Espacejamento
Alinhamento

ESPAO ENTRE LETRAS: Espacejamento

Comando pr-determinado de espacejamento para os


elementos das fontes.

222 UA 3 | BCA 3.3 | Composio com tipos


ESPAO HORIZONTAL

Kerning
Ajustamento de espaos horizontais entre pares de
Variao de entre W e A
caracteres especficos em um texto.
Muito utilizado quando necessrio o ajuste de espao
entre letra devido a composio com tipos diferentes,
visando criar uma espao igual entre as letras. (olho do
leitor deve passar uniformemente pelo texto).

Tracking
Controle do espao mdio entre os caracteres num
bloco de texto definidos por nveis de variao.

tracking

223 UA 3 | BCA 3.3 | Composio com tipos


ESPAO HORIZONTAL

Espao entre Linhas


Freqentemente chamado de leading no ramo grfico.
Espao da entrelinha = distncia entre uma linha de base e sua
subseqente.
Por experimentos e pesquisas, especifica-se como tima para
condio de leitura a entrelinha que corresponde a 125% do
tamanho do tipo.

leading

224 UA 3 | BCA 3.3 | Composio com tipos


ESPAO VERTICAL

Entrelinha muito fechado:


Embaralha a leitura.

Entrelinha muito aberto:


Aumento da dificuldade de leitura e do
tempo de leitura.

225 UA 3 | BCA 3.3 | Composio com tipos


ALINHAMENTO DO TEXTO

Posicionamento do texto entre as margens da pgina:

Alinhado a esquerda;
Alinhado a direita;
Centralizado;
Justificado;
Justificado forado (quando cria espao
entre letras e palavras muito acentuado,
prejudica a leitura).

226 UA 3 | BCA 3.3 | Composio com tipos


ALINHAMENTO DO TEXTO

Observar o efeito dos caminhos brancos no pargrafo:

Texto hifenizado permite uma leitura e um visual


mais agradvel.
Ateno ao alinhamento da ltima linha do
pargrafo.

227 UA 3 | BCA 3.3 | Composio com tipos


Recursos de composio
para destaque de elementos
Capitular
Versalete
Indentao
Recuo

228 UA 3 | BCA 3.3 | Composio com tipos


CAPITULAR
Aumento do corpo da primeira letra de um pargrafo.
Capitular descendente: a capitular entra no corpo do texto,
sendo alinhada a linha das ascendentes do texto.
Capitular ascendente: a capitular fica fora do corpo do
texto, sendo alinhada a linha de base da primeira linha do
corpo do texto.

VERSALETE
Composio em que todas os caracteres ficam em caixa alta,
sendo que os, correspondentes a minsculos ficam da altura-
X (olho mdio) do corpo do texto.

229 UA 3 | BCA 3.3 | Composio com tipos


1.

2. INDENTAO OU ENTRADA
1. Indentao esquerda na primeira linha do pargrafo.
2. Indentao esquerda.
3. Indentao direita.
3. 4. Indentao diagonal (primeiras linhas a esquerda,
ltimas linhas a direita)

RECUO (INVERSO DA INDENTAO)


Alinhamento a esquerda da primeira linha do pargrafo e
4.
alinhamento a direita das linhas seguintes.

Recuo

230 UA 3 | BCA 3.3 | Composio com tipos


Relao entre tipos

Quando compomos layouts com tipos costuma haver


mais de um elemento por pgina. Mesmo um
documento com simples texto corrido, tem ttulos,
subttulos, ou no mximo suas pginas numeradas.

Nesta situao dinmica da pgina, estabelecida uma


relao que pode ser concordante, conflitante ou
contrastante. A maioria dos designs concordantes
tende a ser mais calma e formal.

231 UA 3 | BCA 3.3 | Composio com tipos


Relao entre tipos: Concordncia

tipos da mesma famlia com peso,


largura, tamanho ou estilo diferentes

232 UA 3 | BCA 3.3 | Composio com tipos


Relao entre tipos: Conflitos

Semelhanas
Estruturas conflitantes

233 UA 3 | BCA 3.3 | Composio com tipos


Relao entre tipos: Contrastes

Contraste de estrutura
Contraste conceitual

234 UA 3 | BCA 3.3 | Composio com tipos


Contrastes entre tipos

Tamanho
Peso
Estrutura
Forma
Direo
Cor

235 UA 3 | BCA 3.3 | Composio com tipos


Tamanho: definido em pontos.

236 UA 3 | BCA 3.3 | Composio com tipos


Peso: espessura dos traos:
fino (light), mdio (regular, normal, semibold) ou
grosso (bold, extrabold);

237 UA 3 | BCA 3.3 | Composio com tipos


Estrutura: maneira como a fonte foi
construda, a distribuio dos traos
(grosso-fino) - relaciona-se com a
categoria;

238 UA 3 | BCA 3.3 | Composio com tipos


Forma: refere-se ao seu formato e tambm
relaciona-se com a categoria;

239 UA 3 | BCA 3.3 | Composio com tipos


Direo: refere-se a inclinao no da estrutura
do fonte mas do texto como um todo.

240 UA 3 | BCA 3.3 | Composio com tipos


cor

241 UA 3 | BCA 3.3 | Composio com tipos


Critrios para uso de TIPO

O nvel de atendimento dos requisitos de


usabilidade so determinados por trs critrios
ergonmicos: legibilidade, leiturabilidade
(readability) e pregnncia.
(Lucy Niemeyer, 2001)

O designer deve considerar tambm outros


critrios para a utilizao de tipos, tais como, a
esttica, a significao e a adequao ao
processo produtivo; e no somente os critrios
da usabilidade.

242 UA 3 | BCA 3.3 | Composio com tipos


Legibilidade

Este atributo nos confere a capacidade de diferenciar com


rapidez letras de um mesmo tipo, sendo considerado um tipo
altamente legvel todo aquele no qual se identifica este
atributo.

A legibilidade de um texto se refere facilidade com que


grupos de caracteres so identificados corretamente como uma
palavra, resultando que o leitor (...) essa caracterstica vai
afetar de modo determinante a velocidade com que o texto
lido.
(Lucy Niemeyer, 2001)

Se no for legvel aumenta o esforo mental para se identificar


corretamente as letras e a compreenso do texto.

243 UA 3 | BCA 3.3 | Composio com tipos


Leiturabilidade (readability)

Leiturabilidade (readability) [] a qualidade que torna


possvel o reconhecimento do contedo da informao em
um suporte quando ela est representada por caracteres
alfanumricos em grupamentos com significao, como
palavras, frase ou texto corrido.
(Sanders e McCormick, 1993)

Leiturabilidade no depende da configurao do caractere


em si. Alto nvel de leiturabilidade = fcil acesso
informao continuada nas palavras gerado pela
composio do texto.

Um certo desenho de tipo pode ser chamado de legvel, ele,


por definio, no pode ser categorizado como leiturvel
(readble).(...) Um texto pode no ter boa leiturabilidade e,
entretanto, ser altamente legvel.
(Lucy Niemeyer, 2001)

244 UA 3 | BCA 3.3 | Composio com tipos


Pregnncia

a qualidade de um caractere ou smbolo que faz com que ele seja


visvel separadamente do seu entorno.
(Sanders e McCormick, 1993)

Ex.: quando uma linha de texto se destaca entre outras informaes


dispostas, ela tem mais pregnncia para informao.

Esta a qualidade prioritria que se persegue no design de


mensagens de advertncia de cartazes.
(Lucy Niemeyer, 2001)

As diversas pesquisas sobre legibilidade, construram um conjunto de


recomendaes quanto a tamanhos e propores de letras, nmeros e
smbolos para torn-los mais legvel.

245 UA 3 | BCA 3.3 | Composio com tipos


Pregnncia

O tamanho de letras e nmeros depende da distncia


de leitura. Recomenda-se que a altura de letras e
nmeros seja 1/200 da distncia em milmetros.

246 UA 3 | BCA 3.3 | Composio com tipos


UNIDADE DE APRENDIZADO 3

Tipografia
BCA 3.1 - Origem e tecnologias BCA 3.3 - Composio com tipos
Mapa A escolha dos tipos
Evoluo das letras latinas Intervenes na Aplicao de Tipos
4 Revolues que modificaram Recursos de Composio para Destaque de
o modo de reproduo da escrita Elementos
Relao entre tipos
BCA 3.2 - Conceitos Contrastes entre tipos
Espcies de caracteres: Critrios para uso de fontes
Partes do tipo
Variaes estruturais BCA 3.4 - Tipografia Digital
Sistema de medidas Arquivos de fontes digitais
Classificao das famlias Formatos de fontes
tipogrficas Fontes personalizadas
a) ATypI - Association (1954) Caractersticas dos Textos na web
Typographique International Restries para o uso trabalho com
b) Robert Bringhurst (1996) tipografia na web
c) Tipos Ps-Modernos (2002) Apresentando textos por intermdio de
Alguns tipgrafos renomados e seus imagens
tipos
BCA 3.5 - Dicas para a seleo de tipos

247 UA 3 | BCA 3.4 | Tipografia Digital


BCA 3.4 - Tipografia Digital

Arquivos de fontes digitais

A reproduo de caracteres no sistema digital feita a partir


do armazenamento das informaes Bitmap e outline.

Bitmap: o registro do conjunto de informaes de cada um


dos pontos de um caractere tipogrfico a ser mostrado no na
tela do computador.
Outline: a descrio de linhas retas e curvas que formam o
contorno do caractere. a informao usada pelas
impressoras na impresso dos tipos.

Formatos de fontes
True Type, PostScript e Open Type.

248 UA 3 | BCA 3.4 | Tipografia Digital


True Type

Foi desenvolvido pela Apple mas hoje serve


principalmente os usurios do Windows.
Arquivo representado por um nico cone.
Rene em um nico arquivo as informaes necessrias
para ampliar caracteres em qualquer tamanho, tanto em
tela quanto em sada de impresso.

249 UA 3 | BCA 3.4 | Tipografia Digital


PostScript

H dois tipos: Type1 e Type3, sendo que quase todas


so Type1.
Alm de ser marca registrada da Adobe mais que um
formato de fonte, uma linguagem que gerencia texto
e imagem.
Cada arquivo de fonte possui dois cones, um para
fonte que aparece na tela (.PFB em fontes Type1) e
outro para fonte de impresso (.PFM).
At pouco tempo necessitavam do gerenciador de
fontes ATM (Adobe Type Manager) para converter em
pixels as informaes outline nos diferentes tamanhos,
garantindo melhor visualizao em tela.

250 UA 3 | BCA 3.4 | Tipografia Digital


OpenType

Formato universal, desenvolvido em conjunto pela


Adobe e pela Microsoft.
Assim como os arquivos TrueType concentra em um s
arquivo as informaes para impresso e visualizao
em tela. Alm de ser multiplataforma (PC e Mac).
Pode incluir mais de 65.000 glifos (diferentes desenhos
de caracteres e sinais), aumentando o suporte a
diferentes lnguas.
Suporte a caracteres no standards, como swasshes,
ligaturas, numerais de texto, etc.

Veja: http://www.adobe.com/type/opentype/index.html

251 UA 3 | BCA 3.4 | Tipografia Digital


Fontes personalizadas

Utilizando a ferramenta correta possvel se criar uma


fonte personalizada para o projeto. Nesse caso
necessrio ter habilidade com desenho vetorial, j que
todas as letras disponveis devem ser especialmente
desenhadas. Apesar de trabalhoso, este processo no
nenhum bicho de sete cabeas.

Confira algumas ferramentas que vo auxiliar na criao


de fontes personalizadas:

ScanFont
FontLab
The Font Creator Program

252 UA 3 | BCA 3.4 | Tipografia Digital


Caractersticas dos Textos na web

O principal propsito da web comunicar. Para isso o uso


bem planejado da tipografia nas palavras, frases e
pargrafos - fundamental.

Uma vez que a tipografia tambm compreende transmitir


impresses atravs da escrita cada detalhe importante e
interfere no processo de entendimento da mensagem pelo
leitor do web site.

Trabalhar com tipografia para web significa no s escolher o


tipo mais apropriado para cada caso mas tambm os espaos
entre as letras, os espaos entre os blocos de texto e o
prprio tamanho de cada tipo de texto.

253 UA 3 | BCA 3.4 | Tipografia Digital


Restries para o uso trabalho com
tipografia na web

Durante a escolha das fontes de texto que sero


exibidas num browser no importa se voc tem uma
amostra de 5 ou 5.000 fontes de onde voc escolher
a tipografia final: necessrio pensar na viabilidade
da apresentao das fontes escolhidas nos browsers
dos usurios do site.

O nmero das famlias de fontes toleradas, por


default pela maioria dos sistemas operacionais bem
reduzido. importante sempre levar em considerao
a lista segura de fontes que em geral so:

Arial, Courier New, Georgia, Times New Roman,


Websafe fonts por www.sitepoint.com
Verdana, Trebuchet MS, Comic Sans

254 UA 3 | BCA 3.4 | Tipografia Digital


Como voc pode notar no h muita possibilidade de escolha. Se
pensa-se em utilizar uma fonte sem serifa a escolha deve ficar entre
Arial, Trebuchet MS e Verdana.

Porm, a propriedade font-family do CSS permite a escolha de


mltiplas fontes em ordem de preferncia. Se a primeira fonte no
est disponvel a segunda ser utilizada, se a segunda no puder ser
usada, existe uma terceira opo e assim por diante.

Em ltimo caso pode-se optar pelo que a W3C - World Wide Web
Consortium - chama de Generic font family. As famlias de fontes
genricas so: serif, sans-serif, cursive (fontes manuscritas),
fantasy (fontes display), e monospace (fontes monoespaadas).

Exemplo de font-family no CSS:

font-family: Calisto MT, Gergia, Times New Roman, serif;


255 UA 3 | BCA 3.4 | Tipografia Digital
Apresentando textos
como imagens
Para contornar esta limitao pode-se
apresentar textos como logotipos, top
navigation, ttulos e subttulos atravs de
imagens, como no exemplo ao lado.

256 UA 3 | BCA 3.4 | Tipografia Digital


A escolha dos tipos

Deve-se levar em conta:

Aspectos Histricos
A histria do tipo desde sua criao;
Autor;
Contexto histrico de sua criao.

Aspectos Conceituais
Objetivos do projeto
Pblico alvo
Relao entre tipos

Aspectos Tcnicos
Disponibilidade (licena de uso, copyright)
Viabilidade de exibio em tela (web)
Legibilidade;
Acabamento p/tela p/impresso;

257 UA 3 | BCA 3.4 | Tipografia Digital


Laboratrio: etapa 3
Depois de tudo que foi estudado nesta Unidade voc deve escolher a tipografia mais
adequada para cada uma das duas marcas respeitando as caractersticas j abordadas.
Relembrando:

1 RESTAURANTE LA PASTA 2 ACADEMIA POWER BODY

Caractersticas: Caractersticas:
Restaurante tradicional especializado Especializada em tcnicas avanadas de
em alta culinria e vinhos italianos
musculao, running e bike indoor
Aconchegante, envolvente, clima
familiar Estmulo ao movimento, energia,
dinamismo e vigor
Decorao tradicional, mobilirio
rstico Visual hi-tech, clima jovem, casual,
O dono faz questo de recepcionar atraente, sensual
todos os clientes Enfatiza a limpeza, sade, agilidade e
segurana
Pblico:
Sofisticado, exigente, conhecedor de Pblico:
timos restaurantes internacionais
Jovem, dinmico, vaidoso, exigente.
Classe AA
Classe: B e C
Idade: majoritariamente entre 35 e
60 anos Idade: majoritariamente entre 15 e 40
anos

258
UNIDADE DE APRENDIZADO 4

Design & Percepo

BCA 4.1 - Percepo

BCA 3.2 - Conceituao da forma

BCA 3.3 - Conceitos da Gestalt

Leis da Gestalt

BCA 3.4 - Sistema de leitura visual

Categorias conceituais fundamentais

nfases visuais

BCA 3.5 - Exerccios prticos

259 UA 4 | BCA 4.1 | Percepo


UA4 - Design & Percepo

OBJETIVOS

Avaliar a relao entre Design e Percepo


Estudar como o design trabalha a percepo
Discutir conceitos relacionados percepo

260 UA 2 | BCA 2.1 | Psicologia das cores


UNIDADE DE APRENDIZADO 4

Design & Percepo

BCA 4.1 - Percepo

BCA 4.2 - Conceituao da forma

BCA 4.3 - Conceitos da Gestalt

Leis da Gestalt

BCA 4.4 - Sistema de leitura visual

Categorias conceituais fundamentais

nfases visuais

BCA 4.5 - Exerccios prticos

261 UA 2 | BCA 2.1 | Psicologia das cores


BCA 4.1 - Percepo

PERCEPO

Origem na palavra grega aisthesis


Essa palavra tambm deu origem esttica -
o que sensvel ou que se relaciona com a
sensibilidade

262
Complexo processo de recepo e produo de sentido de qualquer
informao recebida.

ato ou efeito de perceber;


combinao dos sentidos no reconhecimento de um objeto;
recepo de um estmulo;
faculdade de conhecer independentemente dos sentidos;
sensao;
intuio;ato ou operao da inteligcia;
representao intelectual;

QuickTime and a
TIFF (Uncompressed) decompressor
are needed to see this picture.

263
Percepo
Fase 1: reconhecimento

Olho e crebro tendem a compreender e organizar o


que vemos impondo um sentido racional pela
experincia individual.

QuickTime and a
TIFF (Uncompressed) decompressor
are needed to see this picture.

264
Percepo
Fase 2: anlise

Interpretao e organizao do estmulo percebido.


Estruturao dos elementos da informao. Distino
entre fundo e figura, contornos, tamanhos, contrastes,
cores, grupos, etc.

QuickTime and a
TIFF (Uncompressed) decompressor
are needed to see this picture.

265
Percepo
Fase 3: complementao de sentido

Produo de sentido dos elementos que possam dar


definio, simetria, continuidade, unificao e boa
forma informao visual.

QuickTime and a
TIFF (Uncompressed) decompressor
are needed to see this picture.

266
A construo do significado da informao visual vai
depender tambm da experincia pessoal e intelectual do
indivduo - aspecto puramente subjetivo.

Experincia intelectual do sujeito:


Subjetiva
Seletiva
Temporal

Nveis da Percepo:
Instintivo
Descritivo
Simblico

Pato ou coelho?

267
Curiosidades
Livro As portas da percepo de Adoux Huxley
Influncia das drogas e funo dos filtros perceptivos
Nome da banda The Doors

Alice in Wonderland

268
Estudar a percepo importante porque o
comportamento das pessoas baseado na produo de
sentido que fazem da realidade e no na realidade em si.

Estudos que baseiam sua teoria na percepo:

Gestalt
Fenomenologia
Existencialismo

QuickTime and a
TIFF (Uncompressed) decompressor
are needed to see this picture.

269
Fatores que influenciam a percepo

A ateno, que pode ser influenciada por agentes:

EXTERNOS
Intensidade Sirene de ambulncia
Contraste cores vivas
Movimento - crianas e os gatos reagem mais
facilmente a brinquedos em movimento
Incongruncia - ateno s coisas absurdas e
bizarras do que ao que normal

270
Fatores que influenciam a percepo

INTERNOS
Motivao valorizao do que motiva e d prazer em
contraposio s coisas que no interessam
Experincia - a fora do hbito faz com que prestemos
mais ateno ao que j conhecemos e entendemos

QuickTime and a
TIFF (Uncompressed) decompressor
are needed to see this picture.

271
Tipos de percepo

1. Visual
2. Auditiva
3. Gustativa
4. Olfativa
5. Ttil
6. Tempo/movimento
7. Espacial

272
1 - Percepo Visual

Formas
Relaes espaciais
Cores
Intensidade luminosa

273
2 - Percepo Auditiva

Timbres
Alturas e freqncias
Intensidade sonora (volume)
Percepo rtmica
Localizao auditiva (origem do som)

274
3 - Percepo Olfativa

Discriminao de odores(diferenciao e
efeito da combinao)
Alcance olfativo

275
4 - Percepo Gustativa

Doce
Salgado
Amargo
Azedo

276
A pele o maior rgo humano
O tato no uniforme por todo o corpo
O tato distingue:
Objetos pequenos
Calor
Dor

277
2 - Percepo Auditiva

278
2 - Percepo Auditiva

279