colabora,ao de linguagem grdfica Ricardo Artur P Carvalho projeto basico Contexto & Conceito 2010.

2

Tipos com Serifa

Os tipos serifados surgiram no Renascimento como uma alternativa as letras g6ticas, de modo a criar composicoes mais leves. 0 frances Nicolas Jenson inspirou-se nas letras da antiguidade gravadas na pedra, cujo acabamento formava a serifa. Depois descobriu-se que as hastes facilitam a leitura de textos, pois ajudam 0 leitor a nao perder a sequencia das linhas.

Fragmento da biblia de Gutenberg Fragmento de texto da Coluna de Trajano feita com tipos g6ticas.

Tipos com Serifa

[Adobe] Caslon [Linotype] Didot [Adobe] Garamond

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

~ [Microsoft] Georgia ~. · ... · · .. [ante para tela

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

[Adobe] Jenson

[Adobe] Minion Pro [Monotype] Times New Roman

Tipos sem Serifa

Os tipos sem serifa (sans serif) apareceram no seculo XIX e eram conhecidos tarnbern como grotescos ou gothic. A princlpio eles eram extremamente geometricos e nao tinham muito contraste nas espessuras, 0 que dificultava a leitura. A partir da Franklin Gothic, em 1902, as fontes sem serifa cornecararn a se tornar populares e a serem utilizadas em textos.

Go" NI "ALDE ,.QUJi&'l eL.Lt=.

SKY

Cartaz da exposicao da KAN Bauhaus do aniversario I do artista plastico Vassily Kandinsky. I l

Tipos sem Serifa

[Monotype] Arial

[ITe] Franklin Gothic

[Neufvillel Futuro [Monotype] Gill Sans

[Linotype] Helvetica

[Li notype] Un ivers

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

: [M icrosoft] Verda na :- ..... - fonte para tela

• •

• • • • • • • • • • • • • • • • • • • • • • •• • • • • • • • • • • • • • • • • •

Tipos Fantasia ou Displav Os tipos fantasia, ou tipos displav sao todos aqueles cujos desenhos so funcionam em tamanhos grandes.

Nao sao recomendados para textos longos, mas podem, as vezes, ser usados nos titulos.

Muitas das fontes disponfveis na web sao tipos fantasia.

Phatron

$3 S;~$148. 50

famil¥ of 5 fonts rro m Fonnon

Erehwoll Roman NF $17."5

Fami[~ of 1. font; FrQ m Nick', Font,

Would you pledse eXd

Szte m pel''' $.l9. \IS

family.If L rent From, URW ......

Packing 'Ive d

ID'«:U~T"

Family "r 5 fon!:s Fr~ m TY'Po.thetical,

:$10

new job: fiH mr. Glu

Arsenique, $15

F. mil.,. ,,·f 2~ fom:< Fwm P'j>.""o u d". ~k

'~R\(~~"! ~ ~LM;Nf

D~~lU~en miII

Family"r L fom: Fro m Typadermic

:$30

Six 'ig devils from

Tipos Fantasia ou Displav

~J g'utd SC'U{tt?ln [Adobe] (alcite Pro [Monotupe] Pap~rus

HIERARQUIA

Uma hierarquia tipografica indica urn sistema que organiza conteudo, enfatizando alguns dados e preterindo outros. A hierarquia ajuda os leitores a localizarem-se no texto, sabendo onde entrar e sair e como selecionar algumas ofertas. Varies recursos podem ser utilizados para hierarquizar 0 texto:

Recuo. muito empregado para diferenciar paragrafos e citacoes, 0 recuo e uma forma de separar textos.

Entrelinha. outra forma de separar os fragmentos de texto eo usa de diferentes entrelinhas. Uma alternativa ao recuo de paragrafo e atribuir uma entrelinha maior de urn paragrafo para outro.

alern dos recursos fisicos (recuo, entrelinha ou posicao a

Recursos graficos. pagina), a hierarquia tambern pode ser estabelecida por recursos graficos como tamanho, estilo, cor ou fonte).

HIERARQUIA

Uma hierarquia tipografica indica urn sistema que organiza conteudo, enfatizando alguns dados e preterindo outros. A hierarquia ajuda os leitores a localizarem-se no texto, sabendo onde entrar e sair e como selecionar algumas ofertas. Varies recursos podem ser utilizados para hierarquizar 0 texto:

REcuo: muito empregado para diferenciar paragrafos e citacoes, 0 recuo e uma forma de separar textos.

ENTRELINHA: outra forma de separar os fragmentos de texto e 0 usa de diferentes entrelinhas. Uma alternativa ao recuo de paragrafo e atribuir uma entrelinha maior de urn paragrafo para outro.

RECURSOS GRAFICOS: Alern dos recursos fisicos (recuo, entrelinha ou posicao a pagina), a hierarquia tarnbern pode ser estabelecida por recursos graficos como tamanho, estilo, cor ou fonte).

HIERARQUIA

Uma hierarquia tipografica indica urn sistema que organiza conteudo, enfatizando alguns dados e preterindo outros. A hierarquia ajuda os leitores a localizarem-se no texto, sabendo onde entrar e sair e como selecionar algumas ofertas. Varios recursos podem ser utilizados para hierarquizar 0 texto:

Recuo: muito empregado para diferenciar paragrafos e citacoes, 0 recuo e uma forma de separar textos.

Entrelinha: outra forma de separar os fragmentos de texto e o usa de diferentes entrelinhas. Uma alternativa ao recuo de paragrafo e atribuir uma entrelinha maior de urn paragrafo para outro.

Recursos graficos: Alern dos recursos fisicos (recuo, entrelinha ou posicao a pagina), a hierarquia tambern pode ser estabelecida por recursos graficos como tamanho, estilo, cor ou fonte).

Alinhamentos

J USTIFICADO

As margens esquerda e direita sao regula res.

Quando e born: 0 texto justificado produz uma forma limpa na pagina. Seu uso eficiente do espac;o faz com que ele seja a norma para jornais e livros de texto longo.

Quando e mau: Vazios feios podem aparecer quando 0 texto for forcado a caber em colunas com 0 mesmo comprimento. Evite-os certificando-se de que a linha e grande 0 suficiente em relacao ao corpo do tipo. Fontes menores perrnitirao que mais tipos caibam por linha.

Justificado it esquerda

Justificado (todas as linhas)

Justificado centralizado

Alinhamentos

ALINHAMENTO A ESQUERDA

A margem esquerda e dura, a direita e suave.

Quando e bom: Os designers usam esse alinhamento quando querem respeitar 0 fluxo organico da linguagem e evitar 0 espacejamento irregular que infesta as colunas estrei tas do texto j ustificado.

Quando e mau: A col una alinhada a esquerda

perde sua aparencia organica quando e desgracada pelo mau desalinhamen to. Batalhe firme

para criar margens aleat6rias e naturais sem cair na tentacao dos hffens.

Alinhamentos

ALINHAMENTO A DIREITA A margem direita e dura, a esquerda e suave.

Quando e bom: 0 alinhamento a direita pode ser bem-vindo como urn desvio do familiar. Ele produz boas legendas, barras laterais e notas marginais, sugerindo afinidades entre os elementos da pagina.

Quando e mau: Ele tarnbem pode nao ser urn desvio bem-vindo, enervando leitores cautelosos. o mau desalinhamento 0 ameas:a tanto quanto aos textos alinhados a esquerda, com uma dificuldade adicional: a pon tuacao nos finais de linha pode enfraquecer a margem a esquerda.

Alinhamentos

CENTRALIZAD0

Linhas irregulares sao centralizadas entre as margens esquerda e direita.

Quando e born: 0 texto centralizado e classico e formal, trazendo ricas associacoes com a hist6ria e a tradicao.

Ele convida 0 designer a quebra-lo de acordo com 0 seu sen tido e a criar uma forma organica em resposta ao fluxo de conteudo.

Quando e mau: 0 texto centralizado e cstatico e convencional.

Empregado sem cuidado, pode parecer tedioso, estatico e melanc6lico

como uma

lapidc.

Grids sao recursos empregados para auxiliar na diagramacdo, pois permitem preyer as margens eas possibilidades de ocupacao dos espacros das paginas.

Grids

Dois exemplos das grids utilizadas nesta apresentacdo. A pre-dejinifdo dos espafos auxiliam a posicionar imagens e legendas.

No caso de diagramardo com pdginas impressas emfrente e verso) conuem diagramar no modo de pdginas duplas (spread).

Cynt ia Macedo Oi s

",,£:, .. 005 jiw:c . didatLc05 sO G base ([.[I' t,abalh

doc ' IE, mild:! /Do no nc 'C'IJI't~i!!ti D fntru1ar (~xtl.llJJ),

El'I:~l..Ia use, Ullja )S.so~ o-,:.~ I ee livm djdd"f@

d~ .ruG5Itmllg~f'L!i' COf.i ~~m.,l)"GM L1 .onjug~1i) (k duru i"",a ddinguog< - ftj>"l<lre " ..,f", (fmog<!tiJ:o) ""'. "'<iii"''' ,moo. ec.nec >f«ad< d. _"1'00 dos P'""! ~$$O;r.es II;Ii;iT.I a ~Ffi~.5: ~ ceres ~ !eieurn d

Relat6rio e urn impresso!

Diferente de uma midia digital, os impressos possuem peculiaridades, como 0 Formato e 0 tipo de papel.

Pensar nestas escolhas faz parte do trabalho dos designers e ajuda a valorizar 0 trabalho que csta sendo relatado.

Outro aspecto diferente da midia impressa diz respeito a aplicacao de imagens e cores de fundo que, na maioria das vezes, atrapalham mais do que ajudam na leitura.

Relatorio e uma coisa e cumpre uma funcao,

a apresentacao de slides e outra coisa com outra funcao!

Bibliografia recomendada

LUPTON, Ellen. Pensar com tipos: guia para designers, editores e estudantes. [trad. Andre Storlaski]. Sao Paulo:

Cosac Naify. 2004

ROCHA, Claudio. Projeto tipografico: analise e producao de Fontes digitais. [2a edicao] Sao Paulo:

Rosari. 2003

Esta apresentacao foi diagramada numa grid de 6x6 utilizando 0 InDesign CS5 e publicada em PDF.

As familias tipogrificas utilizadas foram:

Adobe Garamond Pro (Regular, Italic, Bold e VERSAL) (desenhada por Robert Slimbach baseada nos tipos

de Claude Garamond e italicos de Robert Granjon)

ITe Franklin Gothic (Book)

(desenhada por Morris F. Benton e expandida por David Berlow e Victor Caruso)

Adobe (alcite Pro (Regular) (desenhada por Akira Kobavashi)

Para a proxima aula

Cada dupla devera fazer 0 projeto grafico do relatorio, diagramando duas paginas do relatorio, sendo:

Uma pdgina somente com texto Uma pdgina com texto e imagem

No exercicio os alunos deverao definir a hierarquia por meio dos cstilos de titulo, textos, listas (sc houver), legendas, margens, diagrama.

Para trazer impresso:

2 pdginas diagramadas + Malha de construcdo (grid)

Proximas aulas:

Turma Andre & Luiza: 17/11 (17h) Turma Luciana & Vicente: 19/11 (15h)