Você está na página 1de 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 Mapa Evoluo das letras latinas 4 Revolues que modificaram o modo de reproduo da escrita BCA 3.2 - Conceitos Espcies de caracteres: Partes do tipo Variaes estruturais Sistema de medidas Classificao das famlias tipogrficas
a) ATypI - Association (1954) Typographique International b) Robert Bringhurst (1996) c) Tipos Ps-Modernos (2002)

BCA 3.3 - Composio com tipos A escolha dos tipos Intervenes na Aplicao de Tipos Recursos de Composio para Destaque de Elementos Relao entre tipos Contrastes entre tipos Critrios para uso de fontes BCA 3.4 - Tipografia Digital Arquivos de fontes digitais Formatos de fontes Fontes personalizadas Caractersticas dos Textos na web
Restries para o uso trabalho com tipografia na web Apresentando textos por intermdio de imagens

Alguns tipgrafos renomados e seus 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. 2. 3. 4. Gutenberg - inveno da prensa tipogrfica Revoluo Industrial Fotocomposio 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 Mapa Evoluo das letras latinas 4 Revolues que modificaram o modo de reproduo da escrita BCA 3.2 - Conceitos Espcies de caracteres: Partes do tipo Variaes estruturais Sistema de medidas Classificao das famlias tipogrficas
a) b) c) ATypI - Association (1954) Typographique International Robert Bringhurst (1996) Tipos Ps-Modernos (2002)

BCA 3.3 - Composio com tipos A escolha dos tipos Intervenes na Aplicao de Tipos Recursos de Composio para Destaque de Elementos Relao entre tipos Contrastes entre tipos Critrios para uso de fontes BCA 3.4 - Tipografia Digital Arquivos de fontes digitais Formatos de fontes Fontes personalizadas Caractersticas dos Textos na web
Restries para o uso trabalho com tipografia na web Apresentando textos por intermdio de imagens

Alguns tipgrafos renomados e seus 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). 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. Uma fonte para uso internacional costuma ter 256 caracteres, entre letras e sinais no alfabticos. UA 3
| BCA 3.2 | Tipografia: conceitos

Memphis

Snell

141

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.


Herb Lubalin um designer que utiliza a tipografia como um elemento plstico com grande habilidade. Ao lado, ttulo para o LadiesHome Journal

(FARIAS, 2004)

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 para ttulos com vrias ligaturas, de Hermann Zapf

Frases compostas com Mrs Eaves Ligatures.

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 um tipo de uma mesma famlia. Os nveis de variao podem ser: extra-negrito (extra-black), negrito (bold), normal (medium), claro (light), e extraclaro (extralight)

negrito, bold, black

normal, regular, medium

claro, light

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 Optima roman itlico, inclinado Optima itlic

Quanto estrutura

Garamond,

Helvtica,

Zapfino

Quanto largura do tipo


Condensado, apertado Optima condensed Expandido, wide Optima Wide

165

UA 3

| BCA 3.2 | Tipografia: conceitos

Sistema de medidas:
CCERO

CCERO E PAICA

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) pt (pontos) 1

mm (milmetro) 0,3759 1 25,4 4,23

in (polegada) 1/72 1/25,4 1 1/6

p (paica) 1/12 1/4,23 6 1

mm (milmetro) 2,83 in (polegada) p (paica) 72 12

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 a) Humanistas (ou venezianos) b) Geraldos (garaldinos) c) Transicionais (barrocos ou old style) d) Didines (modernos) e) Mecanizados 2 Lineares (sem serifa) a) Grotescos b) Geomtricos c) Neogrotescos d) Humansticos 3 Incisos

4 Manuais a) Decorativos (display ou fantasia) b) Brush 5 Manuscritos (ou script) 6 - Gticos a) Texturados b) Rotundos c) Bastardos d) Franktur 7 No latinos

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) b) c) d) O desenho tipogrfico Ps-moderno baseia-se no revisitar e reciclar das idias e formas Neoclssicas, Romnticas e de outros perodos pr-modernos, sempre com um toque de leveza e humor; Ps-modernismo: atitude auto-consciente mas pouco sria; Mistura de eixo racionalista com energia caligrfica; H muitos tipos de letra neste perodo: no h uma nica regra.

e)

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. UA 3
| BCA 3.2 | Tipografia: conceitos

207

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. 2. 3. 4. 5. 6. 7. 8. 9. 10. Fontes Bitmap ou Pixelizadas Fontes Techno Fontes Revival ou Retro Fontes Vernaculares ou Pop Fontes Personalizadas Fontes Grunge Fontes Randmicas Fontes Hbridas ou Esquizofrnicas Fontes de Artifcio 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, prdigital; 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 Mapa Evoluo das letras latinas 4 Revolues que modificaram o modo de reproduo da escrita BCA 3.2 - Conceitos Espcies de caracteres: Partes do tipo Variaes estruturais Sistema de medidas Classificao das famlias tipogrficas
a) b) c) ATypI - Association (1954) Typographique International Robert Bringhurst (1996) Tipos Ps-Modernos (2002)

BCA 3.3 - Composio com tipos A escolha dos tipos Intervenes na Aplicao de Tipos Recursos de Composio para Destaque de Elementos Relao entre tipos Contrastes entre tipos Critrios para uso de fontes BCA 3.4 - Tipografia Digital Arquivos de fontes digitais Formatos de fontes Fontes personalizadas Caractersticas dos Textos na web
Restries para o uso trabalho com tipografia na web Apresentando textos por intermdio de imagens

Alguns tipgrafos renomados e seus 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 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

Variao de

entre W e A

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 alturaX (olho mdio) do corpo do texto.

229

UA 3

| BCA 3.3 | Composio com tipos

1.

2.

3.

INDENTAO OU ENTRADA 1. Indentao esquerda na primeira linha do pargrafo. 2. Indentao esquerda. 3. Indentao direita. 4. Indentao diagonal (primeiras linhas a esquerda, ltimas linhas a direita) RECUO (INVERSO DA INDENTAO) Alinhamento a esquerda da primeira linha do pargrafo e alinhamento a direita das linhas seguintes.

4.

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 Mapa Evoluo das letras latinas 4 Revolues que modificaram o modo de reproduo da escrita BCA 3.2 - Conceitos Espcies de caracteres: Partes do tipo Variaes estruturais Sistema de medidas Classificao das famlias tipogrficas
a) b) c) ATypI - Association (1954) Typographique International Robert Bringhurst (1996) Tipos Ps-Modernos (2002)

BCA 3.3 - Composio com tipos A escolha dos tipos Intervenes na Aplicao de Tipos Recursos de Composio para Destaque de Elementos Relao entre tipos Contrastes entre tipos Critrios para uso de fontes BCA 3.4 - Tipografia Digital Arquivos de fontes digitais Formatos de fontes Fontes personalizadas Caractersticas dos Textos na web
Restries para o uso trabalho com tipografia na web Apresentando textos por intermdio de imagens

Alguns tipgrafos renomados e seus 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, Verdana, Trebuchet MS, Comic Sans

Websafe fonts por www.sitepoint.com

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

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. 2. 3. 4. 5. 6. 7. Visual Auditiva Gustativa Olfativa Ttil Tempo/movimento 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