02/09/16

1

Aula04Tipografia

FATEC–ITU–CursoSuperiordeTecnologiaemEventosDisciplinaDesignGráficoProf.Ms.LucianePanisson

Tipografia

AKpografia(dogregostypos—"forma"—egraphein—"escrita")éaarteeoprocessodecriaçãonacomposiçãodeumtexto,Wsicaoudigitalmente.Assimcomonodesigngráficoemgeral,oobjeKvoprincipaldaKpografiaédarordemestruturaleformaàcomunicaçãoescrita.

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

02/09/16

2

Escolhendoafontecerta

1.  NãouKlizefontesfantasia

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

Usodefontes

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Hojetemosfontesparatextose^tulos;paraleituraemtelaouimpressa;ideiasparausoemcorpopt6,8,12;desenhadasespecialmenteparajornais,livros,dicionários,cartazes;entreoutras.AescolhadoKpodeletraecomofazê-lafuncionardeacordocomoseulayout,grid,esquemadecores,temadoprojetoeassimpordiantefarátodadiferençanoresultadofinal.

02/09/16

3

Glifos(letras/caracteres)

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  SãosignosalfabéKcosprojetadosparareproduçãomecânica.

Glifos(letras/caracteres)

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  ÉoconjuntodecaracteresquepossuemasmesmascaracterísKcasdedesenhoindependentementedassuasvariações(peso,inclinação,corpo).

02/09/16

4

FamíliaTipográfica

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  ÉoconjuntodecaracteresquepossuemasmesmascaracterísKcasdedesenhoindependentementedassuasvariações(peso,inclinação,corpo).

Fonte

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  ÉconjuntodeglifosquecompõemumafamíliaKpográfica

02/09/16

5

Fonte

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  OsKpossãocompostosporumconjuntodeelementos.Confiraabaixo:

ElementosdasFontes

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

02/09/16

6

Ligaduras

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Sãoasconexõesdedoisoumaiscaracteres.Emportuguês,amaisfuncionaléaFI,masexistemváriasligaduras(st,ae,oe,ff,ij,etc).

Comousemserifa

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Oelemento,dessaanatomiadosKpos,quevocêvaimaisouvirfalar,omaisimportanteequevocêDEVEsaberoqueéasechamaSerifa.

•  ExistemKposcomesemserifa(ousans-serif,dofrancês)eaclassificaçãodosKpos,emserifadosesemserifa,éaprincipalformadediferenciaçãodasletras.

•  Serifassãoospequenostraços,ouprolongamentos,queexistemnofinaldashastesdosglifos.

02/09/16

7

Comousemserifa

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

Corpo

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  OcorpoéotamanhodoKpoquecomeçadopontomaisalto(versalouascendente)atéopontomaisbaixo(descendente).

02/09/16

8

Corpo

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Ascendentes:

•  Éapartedasletrasb,d,f,k,h,letqueseestendemacimadaalturadex.

•  Descendentes:

•  Éapartedasletrasg,j,p,q,yeporvezesaletraJ(caixaalta),queseestendemabaixodaalturadex.

Corpo

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Éaangulaçãodotraço.Dizrespeitoaoeixodeinclinaçãoprincipalmentedasletrasb,c,e,g,o,peq.

•  Eixohumanista:éoeixooblíquoequecondizcomainclinaçãodaescritamanual.

•  Eixoracionalista:éoeixoverKcal.CondizcomasformasneoclássicaseromânKcas↓.

02/09/16

9

CaixadeTipos

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  CaixaBaixa•  Éoconjuntodecaracteresemletrasminúsculas.

CaixadeTipos

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  CaixaAlta•  Éoconjuntodecaracteresemletrasmaiúsculas.

02/09/16

10

CaixadeTipos

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Versalete•  Éoconjuntodecaracteresemletrasmaiúsculascomaalturademinúsculas

(alturadex).

Algarismos

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Osalgarismos(ounumerais)tambémsãoclassificadosem3grupos:oldstyle,liningesmallcaps.

•  Oldstyle:Sãoosnumeraisalinhadospelotexto.Porissoelesultrapassamalinhadexe,consequentemente,possuemascendentesedescendentes.

02/09/16

11

Algarismos

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Lining:

•  Sãoosnumeraiscomomesmotamanhodeumaversal(caixaalta)enãopossuemascendentesedescendentes.

Algarismos

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  SmallCaps:

•  Sãoosnumeraiscomomesmotamanhodeumaversaleteenãopossuemascendentesedescendentes.

02/09/16

12

UnidadesdeMedidas

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Asunidadesdemedidasservemparadeterminardesdeotamanhodocorpo,otamanhodoscaracteresatéotamanhodasentrelinhas.

•  Asmedidas“primárias”(ireichamá-lasassim)sãoopontoecíceroeapaica.Hojeemdia,graçasaodigital,temosoutrascomoemmilímetros(mm)empixel(px),etc.Porora,eporquestãomaisdeconhecimento,falaremosdasprimeiras:oponto,aPaica(eminglêspica),usadonaInglaterraenospaísesdelínguainglesa,eoCíceroempregadonaEuropaconKnental.

•  Pontos:éamedidaKpográficaestabelecidapelofrancêsFranciscoAmbrósioDidot.Umpontoequivaleaproximadamentede0,376mm.(ou2,6pontos=1mm).

•  Cícero:tambéméumamedidadosistemaDidotequecorrespondea12pontos.•  Paica(pica):éumaunidadedemedidaanglo-saxãousadanaInglaterraenospaísesdelínguainglesa.

Correspondeaumsextodepolegada.

•  Divide-seambasmedidasem12partes.Eexisteumadiferençapequenaentreostamanhos,sendoapaicaumpoucomenorqueocícero:

•  1paica(4,22mm)=12pontos(Inglaterra).•  1cícero(4,52mm)=12pontos(EuropaConKnental).

UnidadesdeMedidas

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

02/09/16

13

Fontescomserifa

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  HUMANISTAS•  Simulamacaligrafiaclássica

feitaamãoefazempartedosprimeirosKposdemetalproduzidosnaItáliaeFrançaentreosséculosXVeXVI.

•  TRANSICIONAIS•  Possuemserifasmaisfinase

planascomacabamentoagudo.

•  SeueixoverKcalélevementeinclinado.

Fontescomserifa

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  MODERNAS•  EsseesKlopossueserifasretas

eumaltoecontrastenaespessurasdashastes.

•  EixonaverKcal.

•  MECANICAS•  Traçoeserifasretangulares.

SãodoséculoXIXevieramparausoempropagandas.

02/09/16

14

Fontessemserifa

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  GROTESCO•  Umavariaçãodasletras

mecânicassemasserifa.•  OriundasdofinaldosécXIX.

•  GOTHIC•  Possuemumavariação

espessuradosseustraços.•  Éumavariaçãodasgrotescas

gravadasnosEUAnofinaldosécXIX.

Fontessemserifa

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  HUMANISTAS•  Poussemlevevariaçãono

traçoeresquíciosdetraçoscaligráficos.

•  Temcomoorigemaestruturadasletrasserifadas.

•  GEOMÉTRICO•  Usamformasgeométricas

básicasparaasuasestruturação.

02/09/16

15

Fontessemserifa

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  NEOGROTESCO•  Évariaçãodasgrotescaque

surgiunadécadade1950.

OutrosEsFlosdeFontes

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  CURSIVA•  SãoKposqueusamcomoreferênciaa

escritamanual,logoprocuramreproduzirascaracterísKcasdaescritamanual.Costumeiramente,possuemumalegibilidadecomplicada,emboramuitouKlizadaemconvitesdeeventos.

•  FANTASIA•  SãoKposdiversos,comdiversas

inspirações,padrõesecaracterísKcas.•  OobjeKvodessesKposéumpassarum

forteimpactovisual.Sãobemirregularesevãode“8à80”:algumaspossuemboalegibilidadeenquantoqueoutrasquasenenhumalegibilidade.

•  Normalmentefuncionammelhorsóemtamanhosgrandes.

02/09/16

16

OutrosEsFlosdeFontes

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  GÓTICA•  ÉumKpocomcaracterísKcasdos

manuscritosanKgos.Procuramreproduziraescritadosmongescopistasdaidademédia(anterioràinvençãodaKpografia).Normalmentesãomaisdensasecombaixalegibilidade.

•  HISTÓRICOS•  SãoKposinspiradosnasescritasgreco

romanas.•  Tambémpossuemmuitasirregularidades

epoucalegibilidade.

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

02/09/16

17

EsFlosdosTipos

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  COR(TONALIDADE)•  Dizrespeitoaespessura(ouo

peso)dosKpos:light,,thin,medium,roman,bold,black,etc.

EsFlosdosTipos

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  LARGURA•  Serefereàrelaçãoentrea

baseealturadaletra.Existeminúmerasfamíliasquejávemcomessasvariações.Evite”condensar”ou“expandir”umKpoporcontaprópria.Issoirádeformá-loeprejudicaráasuaestrutura.

02/09/16

18

EsFlosdosTipos

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  POSTURA•  Trata-sedainclinaçãodoeixocentraldas

letras.Aposturabásicadoscaractereséregular(comoeixocentralverKcal).

•  Oscaracteresregulares“inclinados”recebemonomede“oblíquos”.Otermoitálicoéaplicadoerradamente.ItálicodizrespeitoaosKposcursivos.

•  Eoscaracteresinclinados(cursivos)recebemonomede“itálico”ou“grifo”,emreferênciaaoKpógrafoitalianodoséc.XV,FrancescoGriffo,percursorcomotrabalhodeKposinclinados.

Kerning,TrackingeLeading

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  KERN•  Trata-sedoespaçamentoentreoscaracteres.Existem

partesdasletrasqueultrapassamoblocoparapermiKrumencaixecomoutrasletras,paraquenãofiquemmuitoafastaseassimprejudicarovisual.

•  KERNING•  Éoprocessodeajustarosespaçosentreparesde

caracteres,ouseja,somenteemalgumasletras.•  OKerningdafonteédefinidopelotypedesigner

quandoestácriando-a.Hojeemdiaosso|waresdecomputadortambémoferecemumopçãodeKerning(ópKco)definidoparaamenizardefeitosdefontesmalproduzidas.Porém,quandoesseskerningsnãoatendemnossasnecessidades,énecessárioajustá-lomanualmente.

02/09/16

19

Kerning,TrackingeLeading

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  TRACKING•  Éoespaçamentoentreletraseentreaspalavras

detodoumblocodetexto.Issosignificaquealteramosoespaçamentodetodooconjuntodecaracteres(palavra,frase,parágrafo)porinteiro.

•  LEADING(ENTRELINHAS)•  Aentrelinhaéoespaçoentreduaslinhasdetexto.

AmedidaéadistânciadalinhadebasedeumalinhaKpográficaparaoutra.NormalmenteoleadingautomaKzadoestácercade20%amaisqueotamanhodoKpouKlizado.Ex:tamanho10ptleading12pt.

•  Quantomaisaumentamosaentrelinha,maisabertoelevesetornaoblocodetextoequantomaisdiminuímosaentrelinha(entrelinhanegaKva)maisapertadosetornaotexto.

Leading

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

02/09/16

20

Alinhamento

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

Alinhamento

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  CAPITULAR•  Éoênfasequesedáaletrainicialnocomeçode

umcapítuloaumentandootamanhodocorpodessaletra,ainicial,noparágrafo.

•  INDENTAÇÃOOUENTRADA•  Serefereaoespaçoembranco,um“avançodo

texto”,noiníciodoparágrafo.Normalmenteaindentaçãoéàesquerdaenaprimeiralinhadoparágrafo.

02/09/16

21

Alinhamento

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  RECUO•  ÉpraKcamenteoinversodaindentação.A

primeiralinhaficaalinhadaàesquerdaenquantoqueasdemaislinhassãoalinhadasumpoucoàdireita.

DICASIMPORTANTES

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  UmaboatáKcaaseusarnaestruturaçãodostextoséusaromínimodesetepalavrasenomáximodezenovepalavrasporlinha.ClaroqueissovariadeacordocomascaracterísKcasdaKpografia,dosuporteedecadaprojeto,logonãodeveserencaradocomoumdogma(quevocêvaiparainfernocasonãouKlize),mascomcertezaumamédiaentreseteequatorzepalavrasporlinhaébemúKlnahoraquevocêpensarnadiagramaçãodosseustextos.

•  Alinhamento:Evitealinhamentocentralizadoemtextoslongos.Oexcessodeespaçobranconaslateraistendeafazerapessoaseperder.Opteportextosalinhadosaesquerda,semjusKficaKva(casoaspalavrasfiquemcomespaçamentograndedemaisentreelas)

02/09/16

22

DICASIMPORTANTES

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Contraste:NuncauKlizeKpoclaroemfundoclaro,ouKpoescuroemfundoescuro.Optesemprepelocontraste.Afinaldecontas,textoéparaserlido!Paraimpressos,omelhorésempreletrapretanopapelbranco.Jáparaoscomputadores,hámuitadivergênciadeopiniões:paramuitos,letrabrancaemfundopretoémenorpoisnatelaobrancoéumaluzemiKda,enquantoopretoéausente(oquesupostamentedeveriafacilitaraleituraalémdenãoconsumirtantaenergiaelétrica).

•  Useapenasumacategoriadefonte:Sevocêfizerumtextotodocomumafonteserifada,uKlizeapenasfontesserifadasnorestodotexto.Nãomudenomeiodocaminho,poisissopodetrazerumaconfusãovisualaoleitor.

DICASIMPORTANTES

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  Seformudardefonte,deixeóbvioamudança;Dápracriarumtextocom^tuloemGeorgiaecorpodotextoemHelveKca(serifadaesem-serifa,respecKvamente).Masdeixeóbvioamudança–useumacordiferente,umfundodiferente,ouumtamanhodeletradiferente.Alémdecriarumimpactovisualmelhor,apessoanãoficaachandoqueodesignererrounahoradeuKlizarsuasfontes.

02/09/16

23

APLICANDOOSCONCEITOS

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  1.ESCOLHAA“VOZ”DOPROJETO–paraquemsedesKna,quelinguagemvisualdeveapresentar

•  2.LEGIBILIDADE–diferencieprojetosparaLERdeprojetosparaVER•  3.HIERARQUIA–separeoconteúdoempartesecoloqueumahierarquia

entreeles•  4.REPETIÇÃO–agrupeassuntospararepeKrelementosgráficosecriar

umaidenKdadeaoprojeto•  5.CONTRASTE–estabeleçacontrastedecoretamanhoscomrelaçãoao

fundo•  6.ESTABELEÇATAMANHOSDEFONTES:Evitandoasmuitopequenas,

muitograndeemuitasemcaixaalta•  7.CRIEÁREASDERESPIRO–ondeoespaçoirácontrabalancearopesodas

fontes

EXERCÍCIO

•  FATEC–ITU–CursoSuperiordeTecnologiaemEventos•  DisciplinaDesignGráfico•  Prof.Ms.LucianePanisson

•  COMBASENAPESQUISADAAULAANTERIORSOBREOTEMA:FESTAMARROQUINA,

•  PESQUISETIPOSDEFONTESQUEIRÃOSEADEQUARAOPROJETOESELECIONESUASRESPECTIVASIMAGENS.