TIPOGRAFIA - Anatomia Das Letras

8/3/2019 .TIPOGRAFIA - Anatomia Das Letras

1/43

princpios bsicos

anatomia das letrasTipografia

prof. Heraldo de Almeida ([email protected])


2/43

estrutura

Hfgx



3/43

estrutura

Hfgxalturamaiscula ascendente linha de basealtura x linha mdiadescendente



4/43

anatomia

barra ou trave

haste

vrtice cartela

serifa

orelha brao

branco interno

anel

cauda curva

inclinaoserifa

abertura cauda

AfghbkQ



5/43

Mr Mrcom serifa (serif) sem serifa (sans-serif)

As serifas, que so os arremates nas terminaes dashastes, provavelmente datam de incio de Roma. PadreEdward Catich props em seu trabalho A Origem daSerifa, que a serifa era um artifcio usado para esculpiras letras sobre as pedras antes de cort-las.

As famlias tipogrficas sem serifas so conhecidas comosans-serif (do francs "sem serifa"), tambm chamadasgrotescas. Esse detalhe considerado o principalsistema de diferenciao das famlias tipogrficas.

grupos



6/43

caractersticas

Tipicamente, os textos serifados so usados em blocos de

texto, pois as serifas tendem a guiar o olhar e ajudam a

distinguir os caracteres. As letras serifadas parecem juntar-

se devido aos seus prolongamentos, unindo as palavras.

Por outro lado, as fontes sem-serifa costumam ser usadas em

ttulos e chamadas, pois valorizam cada palavra individualmente e

tendem a ter maior peso e presena para os olhos (chamando

ateno), j que parecem mais limpas.



7/43

Romana Antiga (estilo antigo)

Romana Moderna (estilo moderno)

Egpcia (serifa grossa)

Lapidria ou basto

classificao

Caligrfica ou Script (estilo manuscrito)

Fantasia ou ornamental (estilo decorativo)

com serifa

sem serifa

expressivas



8/43

estilo antigo

Times

Garamond

Baskervilleprof. Heraldo de Almeida ([email protected])


9/43

caractersticas

estilo antigo

Neste grupo esto classificadas as famlias de tipografias que possuemcomo caractersticas as e as.Estas tipografias so de e por seu design harmonioso so

.

So tipografias consideradas clssicas por terem sido originadas do desenho das

letras dos monumentos romanos (como a Coluna de Trajano, por exemplo),

passam uma imagem que

, podendo mesmo ser encaradas como tipografias antigas, sem os

aspectos pejorativos desse tipo de designao.

(observe que a maioria

deles so impressos com tipografias desse grupo) e em trabalhos semelhantes.

serifas com desenho triangular

hastes, traves e curvas com um suave contraste

boa legibilidadeindicadas para longos blocos de textos impressos

reflete seriedade, equilbrio, cultura e

longevidade

Funcionam muito bem em jornais, livros e revistas



10/43

exemplo estilo antigo



11/43

estilo moderno

Didot

Bodoni



12/43

caractersticas

estilo moderno

Neste grupo esto classificadas as famlias de tipografias que possuem como

caractersticas as e um grande

.

Estas tipografias so e geralmente apresentam

nos textos compostos por caracteres de pequenos tamanhos, somente possuindo boa ourazovel legibilidade at um tamanho mdio.

So de forte presena em um impresso, muito

, seu uso indicado em situaes nas quais se queira obter

.

So tipografias , passam impacto e solidez.

Como exemplo maior temos a Bodoni, que nomeia o grupo.

serifas lineares contraste entre as hastes

traves e curvas

delicadas problemas de legibilidade

utilizadas para ttulos ou chamadas de

maior tamanho impacto

visual com o texto

pesadas



13/43

exemplo estilo moderno



14/43

serifa grossa

Chaparral

Gungsuhche

Aachendeemedprof. Heraldo de Almeida ([email protected])


15/43

caractersticas

serifa grossa

Neste grupo esto classificadas as famlias de tipografias que possuem comocaractersticas .Estas tipografias tm sua legibilidade prejudicada quando utilizadas em tamanho

reduzido ou com o , o que ocasiona a juno de suasserifas, e a conseqente formao de uma linha que .

So assim chamadas por terem seu primeiro registro histrico encontrado nas marcaesdas caixas do esplio de guerra do exrcito de Napoleo na campanha do Egito.

Por seu design muito marcante possuem um sendo

e outras situaes onde seja necessrio expressar

fora, equilbrio e uma certa dose de modernidade.

Entre seus exemplos podemos citar a Lubalim, a Serifa BT e a Egyptian.

serifas com desenho retangular e as hastes, traves e curvas

com suave ou nenhum contraste

espao entre letras muito fechadoatrapalha a leitura

bom impacto visual indicadas

para uso em chamadas, ttulos



16/43

exemplo serifa grossa



17/43

exemplo serifa grossa



18/43

sans-serif

Franklin

Futura

Trebuchetprof. Heraldo de Almeida ([email protected])


19/43

caractersticas

sem sefifa

Ausncia de serifas

alto grau de legibilidade

se tornam cansativas

indicadas mais para textos curtos

Nos meios digitais so as de uso mais indicado

Boas para peaspublicitrias

. Hastes, traves e curvas com pouco ou nenhum

contraste. Em geral, . Indicadas para uso emsituaes onde a leitura seja difcil e deva ser feita rapidamente.

Por no possurem contrastes entre seus elementos em

uma leitura prolongada, devido a tonalidade montona que assumem os textoscompostos por tipografias sem contrastes.

So , no sendo seu uso em livros,revistas e outras peas impressas de todo desaconselhvel.

, pois seu desenhofavorece a conformao por pixel (menor unidade de formao da imagemdigital).

So tipos que passam uma impresso de preciso matemtica, tecnologia,

objetividade e dureza entre outras significaes.

de leitura rpida (outdoors ou Outbus) e projetos de sinalizao.



20/43

exemplo sem sefifa



21/43

manuscrito

Freestyle ScriptFrench Script

Comic Sansprof. Heraldo de Almeida ([email protected])


22/43

caractersticas

caligrficas

Neste grupo esto classificadas as famlias de tipografias quepossuem como caractersticas bsicas de seu design acom penas caligrficas ou outros objetostradicionais de escrita, procuram imitar as caractersticas das letras escritas

livremente.

Estas tipografias geralmente apresentam uma e sua

utilizao em trabalhos deve ser tomada de cuidados. So geralmente aplicadas

em peas que queriam

, ou ainda um pouco de so

tipografias para Era uma vez..., convites de casamento ou textos do tipo

meloso.

. Se bem que hoje ningum

escreva mo documentos maiores que uma breve nota, a assinatura

caligrafada continua a ser considerada uma expresso da personalidade do seu

autor.

aparncia

de letras manuscritas

legibilidade complicada

passar lirismo, romantismo ou uma certaligao com o passado infantilidade,

So tipos que imitam a caligrafia cursiva



23/43

caractersticas caligrficas



24/43

caractersticas manuscrita



25/43

Rosewood

Stencil

fantasia

Burnstownprof. Heraldo de Almeida ([email protected])


26/43

caractersticas

fantasia

Nestegrupoestoclassificadastodasasfamliasdetipografiasque .Neleexistemtipografiasdesdeaquelascomlegibilidadeexcelenteatoutrascomumapssimaqualidadedeleitura,porseudesignirregular.Seuempregodeverserfeitocomextremoscuidadosparaqueotrabalhonosetorneilegvel.Emgeralsotrabalhadasem

ondequeremosumefeitobemespecficoqueseu design podenosproporcionar.

UmatipografiaquepodeserapontadacomoexemplosdessegrupoaBedrock.

noseenquadramnasdescriesanteriores

situaesespeciais



27/43

exemplos fantasia



28/43

exemplos fantasia



29/43

estilo

inclinao

Regular ou normal

Itlica ou cursiva

largura

Regular

Condensada

Estendida

tonalidade

Bold

Regular

Light

preenchimento

Regular

Outline

Vasada



30/43

RegularBold

estilo

Light

tonalidade



31/43

Regular

Itlica

estilo inclinao



32/43


33/43

NormalOuneVasada

estilo preenchimento



34/43

legibilidade

Presena ou no de serifa

Caractersticas particulares do design da fonte

Composio em maisculas e minsculas ou maisculas/minsculas

Entreletras (kerning)

Entrepalavras

Entrelinhas (leading)

Extenso da linha (largura da coluna)

Alinhamento dos pargrafos

Relao figura (elemento tipogrfico) e fundo

principais fundamentos



35/43

legibilidade serif ou sans-serif

Serifa

Sem serifa



36/43

Aa Aa AaAa Aa Aa

Aa AaAa

legibilidade design da face do tipo



37/43

MAISCULA

Inicial MaisculaVERSALETE

legibilidade caixa alta, baixa, alta/baixa, versal/versalete

minscula



38/43

AVOID

legibilidade kerning

X X X X

mecnico

tico

y z kx



39/43

legibilidade entrepalavras

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Ut eu mi vitae purusgravida vehicula sit amet in dui. Aliquam

arcu velit, molestie a porttitor id,

porttitor ut neque. Aenean porttitor

posuere neque ac placerat. Mauris nibh

enim, posuere ac volutpat ut, aliquet ac

felis. Aenean urna massa, mattis ut

dapibus sed, fringilla a urna. Aenean ut

felis sed mi viverra mattis. Praesent

eleifend massa id libero placerattristique. Suspendisse potenti. In non est

vitae magna adipiscing sagittis.

Etiam a egestas nunc. Ut lobortis erat et

nunc bibendum quis convallis tellus

adipiscing. Integer blandit massa vitae

ipsum viverra sit amet tempus nunc

ultrices. Etiam ut tortor id sapien suscipit

convallis eu vitae lectus. Ut a urna erat,sed aliquet lorem. In ultrices porttitor

nunc, a sollicitudin massa tempor vel.

Mauris viverra interdum hendrerit. Ut

posuere, massa vitae feugiat tincidunt,

neque diam consectetur nulla, vel

imperdiet arcu nunc eget mi.


adipiscing elit. Ut eu mi vitae purus gravidavehicula sit amet in dui. Aliquam arcu velit,

molestie a porttitor id, porttitor ut neque.

Aenean porttitor posuere neque ac placerat.

Mauris nibh enim, posuere ac volutpat ut,

aliquet ac felis. Aenean urna massa, mattis ut

dapibus sed, fringilla a urna. Aenean ut felis

sed mi viverra mattis. Praesent eleifend

massa id libero placerat tristique.

Suspendisse potenti. In non est vitae magnaadipiscingsagittis

Etiam a egestas nunc. Ut lobortis erat et nunc

bibendum quis convallis tellus adipiscing.

Integer blandit massa vitae ipsum viverra sit

amet tempus nunc ultrices. Etiam ut tortor id

sapien suscipit convallis eu vitae lectus. Ut a

urna erat, sed aliquet lorem. In ultrices

porttitor nunc, a sollicitudin massa temporvel. Mauris viverra interdum hendrerit. Ut


neque diam consectetur nulla, vel imperdiet

arcununcegetmi.



40/43

legibilidade leading


adipiscing elit. Ut eu mi vitae purus gravidavehicula sit amet in dui. Aliquam arcu velit,molestie a porttitor id, porttitor ut neque.

Aenean porttitor posuere neque ac place-rat. Mauris nibh enim, posuere ac volutpatut, aliquet ac felis. Aenean urna massa,mattis ut dapibus sed, fringilla a urna.

Aenean ut felis sed mi viverra mattis.Praesent eleifend massa id libero placerattristique. Suspendisse potenti. In non est

vitae magna adipiscing sagittis.

Etiam a egestas nunc. Ut lobortis erat etnunc bibendum quis convallis tellus adipis-cing. Integer blandit massa vitae ipsum

viverra sit amet tempus nunc ultrices.Etiam ut tortor id sapien suscipit convalliseu vitae lectus. Ut a urna erat, sed aliquetlorem. In ultrices porttitor nunc, a sollicitu-din massa tempor vel. Mauris viverrainterdum hendrerit. Ut posuere, massa

vitae feugiat tincidunt, neque diam consec-tetur nulla, vel imperdiet arcununc eget mi.









massa id libero placerat tristique. Suspendis-

se potenti. In non est vitae magna adipiscingsagittis.










arcununcegetmi.

120%100%



41/43

legibilidade largura da coluna

Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Ut

eu mi vitae purus gravida vehi-cula sit amet in dui. Aliquam

arcu velit, molestie a porttitor

id, porttitor ut neque. Aenean

porttitorposuere nequeac pla-

cerat. Mauris nibh enim, posu-

ere ac volutpat ut, aliquet ac fe-

lis. Aenean urna massa, mattis

ut dapibus sed, fringilla a urna.

Aenean ut felis sed mi viverra

mattis. Praesent eleifend

massa id libero placerat tristi-

que. Suspendisse potenti. In

non est vitae magna adipiscing

sagittis.

Etiam a egestas nunc. Ut lo-

bortis erat et nunc bibendum

quis convallis tellus adipis-

cing. Integer blandit massa

vitae ipsum viverra sit amet

tempus nunc ultrices. Etiam ut

tortor id sapien suscipit con-

vallis eu vitae lectus. Ut a urna

erat, sed aliquet lorem. In ultri-

ces porttitor nunc, a sollicitu-

din massa tempor vel. Mauris

viverra interdum hendrerit.

Ut posuere, massa vitae feugi-

at tincidunt, neque diam con-

sectetur nulla, vel imperdiet

arcu nunceget mi.









massa id libero placerat tristique. Suspendis-

se potenti. In non est vitae magna adipiscingsagittis.










arcununcegetmi.

L o r e m

ipsum dolors i t a m e t ,

consectetur

a d ip i sc ing

elit. Ut eu mi

vitae purus

g r a v i d a

vehicula sit

amet in dui.

A l i q u a marcu velit,

molestie a

porttitor id,

porttitor ut

n e q u e .

A e n e a n

p o r t t i t o r

p o s u e r e

n e q u e a c

p l a c e r a t .

Mauris nibh

enim, posu-

ere ac volut-

p a t u t ,

aliquetac



42/43

legibilidade alinhamento

Lorem ipsum dolor sitamet,

consectetur adipiscingelit. Ut eu

mi vitae purus gravidavehicula sit

amet indui. Aliquamarcu velit,

molestieaporttitor id,porttitor

ut neque. Aenean porttitor

posuereneque ac placerat.

Maurisnibh enim, posuere ac

volutpatut, aliquet ac felis.

Aenean urna massa, mattis ut

dapibus sed,fringillaa urna.


mattis.Praesent eleifend massa

id liberoplacerattristique.

Suspendisse potenti.In nonestvitae magna adipiscingsagittis.

Etiam aegestasnunc.Ut lobortis

erat et nunc bibendum quis

convallis tellus adipiscing.

Integerblanditmassa vitae

ipsum viverra sit amettempus

nunc ultrices. Etiam uttortor id

sapien suscipitconvalliseu vitae

lectus. Ut a urnaerat, sed aliquet

lorem.In ultrices porttitor nunc,

a sollicitudin massa temporvel.

Mauris viverra interdum

hendrerit.Ut posuere, massa

vitae feugiat tincidunt, neque

diam consectetur nulla, vel

imperdietarcu nunc egetmi.

Loremipsum dolor sit amet,

consectetur adipiscing elit. Ut eu

mi vitae purus gravidavehicula sit

amet in dui. Aliquam arcuvelit,

molestie a porttitorid, porttitor

ut neque.Aenean porttitor

posuere nequeac placerat.

Mauris nibh enim, posuere ac

volutpat ut, aliquet ac felis.

Aenean urna massa, mattisut

dapibus sed,fringillaa urna.

Aenean ut felis sed miviverra

mattis. Praesenteleifendmassa

id libero placerat tristique.

Suspendisse potenti.In nonestvitaemagna adipiscing sagittis.

Etiam aegestasnunc.Ut lobortis


convallistellus adipiscing.

Integer blandit massa vitae

ipsum viverra sit amettempus

nunc ultrices. Etiam ut tortor id

sapiensuscipitconvallis eu vitae

lectus. Utaurna erat,sed aliquet

lorem.In ultrices porttitor nunc,

asollicitudin massa tempor vel.

Mauris viverra interdum hendre-

rit. Utposuere,massa vitae

feugiat tincidunt,neque diam

consectetur nulla, vel imperdiet

arcu nunc egetmi.

Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Ut eu

mivitae purus gravida vehicula sit

amet in dui. Aliquam arcu velit,

molestie a porttitor id, porttitor


posuere neque ac placerat.

Mauris nibh enim, posuere ac

volutpat ut, aliquet ac felis.


dapibus sed, fringilla a urna.


mattis. Praesent eleifend massa

id libero placerat tristique.

Suspendisse potenti. In non estvitae magna adipiscing sagittis.

Etiam a egestas nunc. Ut lobortis



Integer blandit massa vitae

ipsum viverra sit amet tempus


sapien suscipit convallis eu vitae

lectus. Ut a urna erat, sed aliquet

lorem. In ultrices porttitor nunc,

a sollicitudin massa tempor vel.


rit. Ut posuere, massa vitae

feugiat tincidunt, neque diam

consectetur nulla, vel imperdiet

arcu nunc eget mi.

Loremipsum dolor sit amet,

consectetur adipiscingelit.Ut eu

mivitaepurusgravida vehiculasit

ametin dui.Aliquam arcu velit,

molestie a porttitorid, porttitor


posuereneque ac placerat.

Mauris nibh enim, posuereac

volutpat ut, aliquetacfelis.


dapibus sed,fringillaaurna.


mattis. Praesent eleifendmassa

id libero placerattristique.

Suspendisse potenti.Innon estvitae magna adipiscing sagittis.

Etiam a egestas nunc. Ut lobortis



Integerblanditmassa vitae

ipsumviverra sit amet tempus


sapiensuscipitconvallis eu vitae

lectus.Ut a urnaerat, sed aliquet

lorem. In ultrices porttitor nunc,

a sollicitudin massa temporvel.


rit.Ut posuere, massa vitae

feugiattincidunt, neque diam

consecteturnulla, velimperdiet

arcu nunc eget mi.



43/43

legibilidade figura/fundo

PRETO

VERDE

VERMELHO

AZUL

BRANCO

PRETO

AMARELO

BRANCO

BRANCO

VERMELHO

VERDE

VERMELHO

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

Documents

TIPOGRAFIA - Anatomia Das Letras