princpios bsicos

Tipografia
anatomia das letras
prof. Heraldo de Almeida (heraldoa@gmail.com)

estrutura

Hfgx
prof. Heraldo de Almeida (heraldoa@gmail.com)

estrutura

Hfgx

altura maiscula

ascendente altura x descendente

linha mdia linha de base

prof. Heraldo de Almeida (heraldoa@gmail.com)

anatomia

vrtice cartela

orelha

serifa

anel

brao

inclinao

haste

AfghbkQ
barra ou trave serifa abertura branco interno cauda cauda curva
prof. Heraldo de Almeida (heraldoa@gmail.com)

grupos

Mr Mr
com serifa (serif) sem serifa (sans-serif)
As serifas, que so os arremates nas terminaes das hastes, provavelmente datam de incio de Roma. Padre Edward Catich props em seu trabalho A Origem da Serifa, que a serifa era um artifcio usado para esculpir as letras sobre as pedras antes de cort-las. As famlias tipogrficas sem serifas so conhecidas como sans-serif (do francs "sem serifa"), tambm chamadas grotescas. Esse detalhe considerado o principal sistema de diferenciao das famlias tipogrficas.
prof. Heraldo de Almeida (heraldoa@gmail.com)

caractersticas

se devido aos seus prolongamentos, unindo as palavras.

ipicamente, 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-

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

tendem a ter maior peso e presena para os olhos (chamando ateno), j que parecem mais limpas.

prof. Heraldo de Almeida (heraldoa@gmail.com)

ttulos e chamadas, pois valorizam cada palavra individualmente e

classificao

com serifa
Romana Antiga (estilo antigo) Romana Moderna (estilo moderno) Egpcia (serifa grossa)

sem serifa
Lapidria ou basto

expressivas
Caligrfica ou Script (estilo manuscrito) Fantasia ou ornamental (estilo decorativo)

prof. Heraldo de Almeida (heraldoa@gmail.com)

estilo antigo

Times Garamond Baskerville

prof. Heraldo de Almeida (heraldoa@gmail.com)

caractersticas estilo antigo

este grupo esto classificadas as famlias de tipografias que possuem como caractersticas as serifas com desenho triangular e as hastes, traves e curvas com um suave contraste.

Estas tipografias so de boa legibilidade e por seu design harmonioso so

indicadas para longos blocos de textos impressos.

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 reflete seriedade, equilbrio, cultura e

longevidade, podendo mesmo ser encaradas como tipografias antigas, sem os

Funcionam muito bem em jornais, livros e revistas (observe que a maioria

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

prof. Heraldo de Almeida (heraldoa@gmail.com)

aspectos pejorativos desse tipo de designao.

exemplo estilo antigo

prof. Heraldo de Almeida (heraldoa@gmail.com)

estilo moderno

Bodoni Didot
prof. Heraldo de Almeida (heraldoa@gmail.com)

caractersticas estilo moderno

este grupo esto classificadas as famlias de tipografias que possuem como caractersticas as serifas lineares e um grande contraste entre as hastes traves e curvas.

Estas tipografias so delicadas e geralmente apresentam problemas de legibilidade nos textos compostos por caracteres de pequenos tamanhos, somente possuindo boa ou razovel legibilidade at um tamanho mdio. So de forte presena em um impresso, muito utilizadas para ttulos ou chamadas de maior tamanho, seu uso indicado em situaes nas quais se queira obter impacto visual com o texto. So tipografias pesadas, passam impacto e solidez. Como exemplo maior temos a Bodoni, que nomeia o grupo.

prof. Heraldo de Almeida (heraldoa@gmail.com)

exemplo estilo moderno

prof. Heraldo de Almeida (heraldoa@gmail.com)

serifa grossa

Chaparral Gungsuhche Ad ae ce h e e d n m
prof. Heraldo de Almeida (heraldoa@gmail.com)

caractersticas serifa grossa

este grupo esto classificadas as famlias de tipografias que possuem como

caractersticas serifas com desenho retangular e as hastes, traves e curvas com suave ou nenhum contraste.

Estas tipografias tm sua legibilidade prejudicada quando utilizadas em tamanho reduzido ou com o espao entre letras muito fechado, o que ocasiona a juno de suas serifas, e a conseqente formao de uma linha que atrapalha a leitura. So assim chamadas por terem seu primeiro registro histrico encontrado nas marcaes das caixas do esplio de guerra do exrcito de Napoleo na campanha do Egito. Por seu design muito marcante possuem um bom impacto visual sendo indicadas para uso em chamadas, ttulos 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.

prof. Heraldo de Almeida (heraldoa@gmail.com)

exemplo serifa grossa

prof. Heraldo de Almeida (heraldoa@gmail.com)

exemplo serifa grossa

prof. Heraldo de Almeida (heraldoa@gmail.com)

sans-serif

Franklin Futura Trebuchet

prof. Heraldo de Almeida (heraldoa@gmail.com)

caractersticas sem sefifa

usncia de serifas. Hastes, traves e curvas com pouco ou nenhum contraste. Em geral, alto grau de legibilidade. Indicadas para uso em
situaes onde a leitura seja difcil e deva ser feita rapidamente.

Por no possurem contrastes entre seus elementos se tornam cansativas em uma leitura prolongada, devido a tonalidade montona que assumem os textos compostos por tipografias sem contrastes. So indicadas mais para textos curtos, no sendo seu uso em livros, revistas e outras peas impressas de todo desaconselhvel.

Nos meios digitais so as de uso mais indicado, pois seu desenho

So tipos que passam uma impresso de preciso matemtica, tecnologia, objetividade e dureza entre outras significaes. Boas para peas publicitrias de leitura rpida (outdoors ou Outbus) e projetos de sinalizao.

prof. Heraldo de Almeida (heraldoa@gmail.com)

favorece a conformao por pixel (menor unidade de formao da imagem digital).

exemplo sem sefifa

prof. Heraldo de Almeida (heraldoa@gmail.com)

manuscrito

Freestyle Script French Script Comic Sans

prof. Heraldo de Almeida (heraldoa@gmail.com)

caractersticas caligrficas

tradicionais de escrita, procuram imitar as caractersticas das letras escritas livremente. Estas tipografias geralmente apresentam uma legibilidade complicada e sua utilizao em trabalhos deve ser tomada de cuidados. So geralmente aplicadas em peas que queriam passar lirismo, romantismo ou uma certa

este grupo esto classificadas as famlias de tipografias que possuem como caractersticas bsicas de seu design a aparncia de letras manuscritas com penas caligrficas ou outros objetos

ligao com o passado, ou ainda um pouco de infantilidade, so

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

escreva mo documentos maiores que uma breve nota, a assinatura caligrafada continua a ser considerada uma expresso da personalidade do seu autor.

prof. Heraldo de Almeida (heraldoa@gmail.com)

So tipos que imitam a caligrafia cursiva. Se bem que hoje ningum

caractersticas caligrficas

prof. Heraldo de Almeida (heraldoa@gmail.com)

caractersticas manuscrita

prof. Heraldo de Almeida (heraldoa@gmail.com)

fantasia

Rd o s e w o o Sl t e n c i Burnstown
prof. Heraldo de Almeida (heraldoa@gmail.com)

caractersticas fantasia

N
d p s o r e o pc. s d ro i g e o n n np a o r i

e u s a s m s p oi d aa d t o c i s a le e e l ct s i g s aa d rt s f o fa s er d s tau su n ir e ea a pi o s na g qo f n qm a d es e e r s s i . c ao rne i t r

Ni tae u m ie e sir s e l t o sel ll e e g d q cga e x pi d a e d m f a as ob i d i en o c amd l a xt uo p q d i , c e t ms u e t e a r us a d r l t a m a a e e s i l e i u p dig S p esi o o er rm v rc r s r .u g r e m s i eg u e o t u n le r e f e a e d eo e oa r t hee x s da r n o t co q a r ru p e b o n e i s u a m da o l s o t i v g as t s l l e o l eu e E at h s gm e r r d i . l a a s b a m e a us i os c s poe u eaeem b e q sid mf e c u p o e ut ef e e nr e m i c i sq o e

Uo q e pa e o e mr e s o cx s a a p ra o l s t f o ad i pi g u eno m s a d t m e d p e ga c re. u d p r o o B k

prof. Heraldo de Almeida (heraldoa@gmail.com)

exemplos fantasia

prof. Heraldo de Almeida (heraldoa@gmail.com)

exemplos fantasia

prof. Heraldo de Almeida (heraldoa@gmail.com)

estilo

tonalidade
Bold Regular Light

largura
Regular Condensada Estendida

inclinao
Regular ou normal ou cursiva Itlica

preenchimento
Regular Outline Vasada

prof. Heraldo de Almeida (heraldoa@gmail.com)

estilo tonalidade

Regular Bold Light

prof. Heraldo de Almeida (heraldoa@gmail.com)

estilo inclinao

Regular Itlica
prof. Heraldo de Almeida (heraldoa@gmail.com)

estilo largura

Normal Condensada Estendida

prof. Heraldo de Almeida (heraldoa@gmail.com)

estilo preenchimento

N o r m a l O u t l i n e V a s a d a
prof. Heraldo de Almeida (heraldoa@gmail.com)

legibilidade

principais fundamentos
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

prof. Heraldo de Almeida (heraldoa@gmail.com)

legibilidade serif ou sans-serif

Serifa Sem serifa

prof. Heraldo de Almeida (heraldoa@gmail.com)

legibilidade design da face do tipo

Aa Aa Aa Aa Aa Aa Aa AA aa
prof. Heraldo de Almeida (heraldoa@gmail.com)

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

minscula MAISCULA Inicial Maiscula VERSALETE

prof. Heraldo de Almeida (heraldoa@gmail.com)

legibilidade kerning
X X X X

mecnico
y z x k

AVOID

tico

prof. Heraldo de Almeida (heraldoa@gmail.com)

legibilidade entrepalavras
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi vitae purus gravida 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 placerat tristique. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi vitae purus gravida 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 placerat tristique. Suspendisse potenti. In non est vitae magna adipiscingsagittis Etiam a egestasnunc. Utlobortiseratetnunc bibendum quis convallis tellus adipiscing. Integer blandit massa vitae ipsum viverra sit amettempusnuncultrices.Etiamuttortorid 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 arcununcegetmi.

prof. Heraldo de Almeida (heraldoa@gmail.com)

legibilidade leading
100%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi vitae purus gravida 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 placerat tristique. Suspendisse potenti. In non est vitaemagnaadipiscingsagittis. 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 consecteturnulla,velimperdietarcununcegetmi.

120%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi vitae purus gravida 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 massaidliberoplacerattristique.Suspendisse potenti. In non est vitae magna adipiscing sagittis. Etiam a egestasnunc. Utlobortiseratetnunc bibendum quis convallis tellus adipiscing. Integer blandit massa vitae ipsum viverra sit amettempusnuncultrices.Etiamuttortorid 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 arcununcegetmi.

prof. Heraldo de Almeida (heraldoa@gmail.com)

legibilidade largura da coluna

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi vitae purus gravida vehicula sit amet in dui. Aliquam arcu velit, molestie a porttitor id, porttitor ut neque. Aenean porttitorposuerenequeacplacerat. 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 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 arcununcegetmi.

L o r e m ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi vitae purus gravida vehicula sit amet in dui. Aliquam arcu velit, molestie a porttitor id, porttitor ut n e q u e . Aenean porttitor posuere neque ac placerat. Mauris nibh enim, posuere ac volutpat ut, aliquetac

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi vitae purus gravida 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 massaidliberoplacerattristique.Suspendisse potenti. In non est vitae magna adipiscing sagittis. Etiam a egestasnunc. Utlobortiseratetnunc bibendum quis convallis tellus adipiscing. Integer blandit massa vitae ipsum viverra sit amettempusnuncultrices.Etiamuttortorid 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 arcununcegetmi.

prof. Heraldo de Almeida (heraldoa@gmail.com)

legibilidade alinhamento
Loremipsumdolorsitamet, Loremipsumdolorsitamet, consecteturadipiscingelit.Uteu consecteturadipiscingelit.Uteu mivitaepurusgravidavehiculasit mivitaepurusgravidavehiculasit ametindui.Aliquamarcuvelit, ametindui.Aliquamarcuvelit, molestieaporttitorid,porttitor molestieaporttitorid,porttitor utneque.Aeneanporttitor utneque.Aeneanporttitor posuerenequeacplacerat. posuerenequeacplacerat. Maurisnibhenim,posuereac Maurisnibhenim,posuereac volutpatut,aliquetacfelis. volutpatut,aliquetacfelis. Aeneanurnamassa,mattisut Aeneanurnamassa,mattisut dapibussed,fringillaaurna. dapibussed,fringillaaurna. Aeneanutfelissedmiviverra Aeneanutfelissedmiviverra mattis.Praesenteleifendmassa mattis.Praesenteleifendmassa idliberoplacerattristique. idliberoplacerattristique. Suspendissepotenti.Innonest Suspendissepotenti.Innonest vitaemagnaadipiscingsagittis. vitaemagnaadipiscingsagittis. Etiamaegestasnunc.Utlobortis eratetnuncbibendumquis convallistellusadipiscing. Integerblanditmassavitae ipsumviverrasitamettempus nuncultrices.Etiamuttortorid sapiensuscipitconvalliseuvitae lectus.Utaurnaerat,sedaliquet lorem.Inultricesporttitornunc, asollicitudinmassatemporvel. Maurisviverrainterdum hendrerit.Utposuere,massa vitaefeugiattincidunt,neque diamconsecteturnulla,vel imperdietarcununcegetmi. Etiamaegestasnunc.Utlobortis eratetnuncbibendumquis convallistellusadipiscing. Integerblanditmassavitae ipsumviverrasitamettempus nuncultrices.Etiamuttortorid sapiensuscipitconvalliseuvitae lectus.Utaurnaerat,sedaliquet lorem.Inultricesporttitornunc, asollicitudinmassatemporvel. Maurisviverrainterdumhendrerit.Utposuere,massavitae feugiattincidunt,nequediam consecteturnulla,velimperdiet arcununcegetmi. Lorem ipsum dolor sit amet, Loremipsumdolorsitamet, consectetur adipiscing elit. Ut eu consecteturadipiscingelit.Uteu mivitaepurusgravidavehiculasit mivitaepurusgravidavehiculasit amet in dui. Aliquam arcu velit, ametindui.Aliquamarcuvelit, molestie a porttitor id, porttitor molestieaporttitorid,porttitor ut neque. Aenean porttitor utneque.Aeneanporttitor posuere neque ac placerat. posuerenequeacplacerat. Mauris nibh enim, posuere ac Maurisnibhenim,posuereac volutpat ut, aliquet ac felis. volutpatut,aliquetacfelis. Aenean urna massa, mattis ut Aeneanurnamassa,mattisut dapibus sed, fringilla a urna. dapibussed,fringillaaurna. Aenean ut felis sed mi viverra Aeneanutfelissedmiviverra mattis. Praesent eleifend massa mattis.Praesenteleifendmassa id libero placerat tristique. idliberoplacerattristique. Suspendisse potenti. In non est Suspendissepotenti.Innonest vitaemagnaadipiscingsagittis. vitaemagnaadipiscingsagittis. Etiam a egestas nunc. Ut lobortis Etiamaegestasnunc.Utlobortis erat et nunc bibendum quis eratetnuncbibendumquis convallis tellus adipiscing. convallistellusadipiscing. Integer blandit massa vitae Integerblanditmassavitae ipsum viverra sit amet tempus ipsumviverrasitamettempus nunc ultrices. Etiam ut tortor id nuncultrices.Etiamuttortorid sapien suscipit convallis eu vitae sapiensuscipitconvalliseuvitae lectus. Ut a urna erat, sed aliquet lectus.Utaurnaerat,sedaliquet lorem. In ultrices porttitor nunc, lorem.Inultricesporttitornunc, a sollicitudin massa tempor vel. asollicitudinmassatemporvel. Mauris viverra interdum hendre- Maurisviverrainterdumhendrerit. Ut posuere, massa vitae rit.Utposuere,massavitae feugiat tincidunt, neque diam feugiattincidunt,nequediam consectetur nulla, vel imperdiet consecteturnulla,velimperdiet arcununcegetmi. arcununcegetmi.

prof. Heraldo de Almeida (heraldoa@gmail.com)

legibilidade figura/fundo

1.

PRETO

4.

AZUL

7.

AMARELO

10.

VERMELHO

2.

VERDE

5.

BRANCO

8.

BRANCO

11.

VERDE

3.

VERMELHO

6.

PRETO

9.

BRANCO

12.

VERMELHO

prof. Heraldo de Almeida (heraldoa@gmail.com)