princípios básicos
Tipografia anatomia das letras
estrutura
Hfgx
estrutura
Hfgx
estrutura
a l u c s ú i a m a r u t l a
Hfgx
ascendente
altura x descendente
linha média
linha de base
anatomia
vértice vérti ce carte cartela la
orelha
serifa
anel
braço
inclinação
AfghbkQ haste
barra ou trave
serifa
abertura
branco interno
cauda
cauda curva
grupos
Mr Mr com serifa (serif)
sem serifa (sans-serif)
As serifas, que são os arremates nas terminações das hastes, provavelmente datam de início de Roma. Padre Edward Catich propôs em seu trabalho «A Origem da Serifa», que a serifa era é um artifício usado para esculpir as letras sobre as pedras antes de cortá-las.
As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês "sem serifa"), também chamadas grotescas. Esse detalhe é considerado o principal sistema de diferenciação das famílias tipográficas.
características
T
ipicamente, os textos serifados são 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 títulos e chamadas, pois valorizam cada palavra individualmente e tendem a ter maior peso e presença para os olhos (chamando à atenção), já que parecem mais limpas.
“
classificação
com serifa Romana Antiga (estilo antigo)
Romana Moderna (estilo moderno)
Egípcia (serifa grossa)
sem serifa Lapidária ou bastão
expressivas Caligráfica ou Script (estilo manuscrito)
Fantasia ou ornamental (estilo decorativo)
estilo antigo
Times
Garamond
Baskerville
características estilo antigo
N
este grupo estão classificadas as famílias de tipografias que possuem como características as serifas com desenho triangular e as hastes, traves e curvas com um suave contraste .
Estas tipografias são de boa legibilidade e por seu design harmonioso são indicadas para longos blocos de textos impressos . São tipografias consideradas clássicas por terem sido originadas do desenho das letras dos monumentos romanos (como a Coluna de Trajano, por exemplo), passam uma imagem que reflete seriedade, equilíbrio, cultura e longevidade, podendo mesmo ser encaradas como tipografias antigas, sem os aspectos pejorativos desse tipo de designação.
“
Funcionam muito bem em jornais, livros e revistas (observe que a maioria deles são impressos com tipografias desse grupo) e em trabalhos semelhantes.
exemplo estilo antigo
estilo moderno
Bodoni Didot
características estilo moderno
N
este grupo estão classificadas as famílias de tipografias que possuem como características as serifas lineares e um grande contraste entre as hastes traves e curvas.
Estas tipografias são delicadas e geralmente apresentam problemas de legibilidade nos textos compostos por caracteres de pequenos tamanhos, somente possuindo boa ou razoável legibilidade até um tamanho médio. São de forte presença em um impresso, muito utilizadas para títulos ou chamadas de
maior tamanho, seu uso é indicado em situações nas quais se queira obter impacto visual com o texto. São tipografias pesadas, passam impacto e solidez. Como exemplo maior temos a Bodoni, que nomeia o grupo.
“
exemplo estilo moderno
serifa grossa
Chaparral Gungsuhche
A a c h e n d e e m e d
características serifa grossa
N
este grupo estão classificadas as famílias de tipografias que possuem como características serifas com desenho retangular e as hastes, traves e curvas com suave ou nenhum contraste .
Estas tipografias têm sua legibilidade prejudicada quando utilizadas em tamanho reduzido ou com o espaço entre letras muito fechado, o que ocasiona a junção de suas serifas, e a conseqüente formação de uma “linha” que atrapalha a leitura . São assim chamadas por terem seu primeiro registro histórico encontrado nas marcações das caixas do espólio de guerra do exército de Napoleão na campanha do Egito. Por seu design muito marcante possuem um bom impacto visual sendo indicadas para uso em chamadas, títulos e outras situações onde seja necessário expressar força, equilíbrio e uma certa dose de modernidade. Entre seus exemplos podemos citar a Lubalim, a Serifa BT e a Egyptian.
“
exemplo serifa grossa
exemplo serifa grossa
sans-serif
Franklin
Futura
Trebuchet
características sem sefifa
A
usência de serifas. Hastes, traves e curvas com pouco ou nenhum contraste. Em geral, alto grau de legibilidade. Indicadas para uso em situações onde a leitura seja difícil e deva ser feita rapidamente.
Por não possuírem contrastes entre seus elementos se tornam cansativas em uma leitura prolongada, devido a tonalidade monótona que assumem os textos compostos por tipografias sem contrastes. São indicadas mais para textos curtos, não sendo seu uso em livros, revistas e outras peças impressas de todo desaconselhável.
Nos meios digitais são as de uso mais indicado , pois seu desenho favorece a conformação por pixel (menor unidade de formação da imagem digital). São tipos que passam uma impressão de precisão matemática, tecnologia, objetividade e dureza entre outras significações. Boas para peças publicitárias de leitura rápida (outdoors ou Outbus) e projetos de sinalização.
“
exemplo sem sefifa
manuscrito
Freestyle Script French Script
Comic Sans
características caligráficas
N
este grupo estão classificadas as famílias de tipografias que possuem como características básicas de seu design a aparência de letras manuscritas com penas caligráficas ou outros objetos
tradicionais de escrita, procuram imitar as características das letras escritas livremente. Estas tipografias geralmente apresentam uma legibilidade complicada e sua utilização em trabalhos deve ser tomada de cuidados. São geralmente aplicadas em peças que queriam passar lirismo, romantismo ou uma certa ligação com o passado, ou ainda um pouco de infantilidade, são tipografias para “Era uma vez...”, convites de casamento ou textos do tipo “meloso”.
São tipos que imitam a caligrafia cursiva. Se bem que hoje ninguém escreva à mão documentos maiores que uma breve nota, a assinatura caligrafada continua a ser considerada uma expressão da personalidade do seu autor.
“
características caligráficas
características manuscrita
fantasia
R o s e w o o d
S t e n c i l Burnstown
características fantasia
N
e s t e g r u p o e s t ã o c l a s s i f i c a d a s t o d a s a s f a m í l i a s d e t i p o g r a f i a s q u e n ã o s e e n q u a d r a m n a s . d e s c r i ç õ e s a n t e r i o r e s
N e l e e x i s t e m t i p o g r a f i a s d e s d e a q u e l a s c o m l e g i b i l i d a d e e x c e l e n t e a t é o u t r a s c o m u m a p é s s i m a q u a l i d a d e d e l e i t u r a , p o r s e u d e s i g n i r r e g u l a r .S e u e m p r e g o d e v e r á s e r f e i t o c o m e x t r e m o s c u i d a d o s p a r a q u e o t r a b a l h o n ã o s e t o r n e i l e g í v e l .E m g e r a l s ã o t r a b a l h a d a s e m s i t u a ç õ e s o n d e q u e r e m o s u m e f e i t o b e m e s p e c í f i c o q u e s e u e s p e c i a i s “ d e s i g n ” p o d e n o s p r o p o r c i o n a r .
“
U m a t i p o g r a f i a q u e p o d e s e r a p o n t a d a c o m o e x e m p l o s d e s s e g r u p o a B e d r o c k .
exemplos fantasia
exemplos fantasia
estilo
tonalidade
largura
Bold
Regular
Light
inclinação
Regular Condensada Estendida
preenchimento
Regular ou normal
Itálica ou cursiva
Regular Outline Vasada
estilo tonalidade
Regular Bold
Light
estilo inclinação
Regular Itálica
estilo largura
Normal Condensada
Estendida
estilo preenchimento
N o r m a l
V a s a d a
legibilidade
principais fundamentos Presença ou não de serifa
Características particulares do design da fonte
Composição em maiúsculas e minúsculas ou maiúsculas/minúsculas
Entreletras (kerning)
Entrepalavras
Entrelinhas (leading)
Extensão da linha (largura da coluna)
Alinhamento dos parágrafos
Relação figura (elemento tipográfico) e fundo
legibilidade serif ou sans-serif
Serifa
Sem serifa
legibilidade design da face do tipo
Aa
Aa
Aa
Aa Aa Aa Aa
A aA a
legibilidade caixa alta, baixa, alta/baixa, versal/versalete
minúscula MAIÚSCULA Inicial Maiúscula VERSALETE
legibilidade kerning X
X
X
X
mecânico y
z
x
k
AVOID
ótico
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, por ttitor 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 Etiamaegestasnunc.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.
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 v itaemagnaadipiscings agittis. Etiam a egestas nunc. Ut lobortis erat et nuncbibendumquisconvallistellusadipiscing. Integer blandit massa vitae ipsum viverra sit amet tempus nunc ultrices. Etiam ut tortor id sapien suscipit co nvallis eu vitae lectus. Ut a urna erat, sed aliquet lorem.Inultricesporttitor nunc,asollicitudin massa tempor vel. Mauris viverra interdum hendrerit. Ut posuere, massa vitaefeugiattincidunt,nequediamconsecteturnulla,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, por ttitor 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. Etiamaegestasnunc.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.
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 porttitorposuere nequeac 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 con vallis eu vitae lect us. 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 nuncegetmi.
L o r e m ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi vitae purus gravida vehicula sit amet in dui. Ali qua m arcu velit, molestie a porttitor id, porttitor ut n e q u e . Ae ne an porttitor posuere neque ac placerat. Mauris nibh enim, posuere ac volutp a t u t , 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, por ttitor 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. Etiamaegestasnunc.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.
legibilidade alinhamento Loremipsumdolorsit amet, consectetur adipiscing elit.Uteu mi vitae purus gravida vehiculasit amet indui. Aliquamarcuvelit, molestieaporttitor id,porttitor utneque.Aeneanporttitor posuereneque ac placerat. Maurisnibhenim,posuereac volutpatut,aliquetacfelis. Aenean urna massa, mattis ut dapibus sed,fringillaa urna. Aeneanutfelissedmiviverra mattis.Praesent eleifend massa id liberoplacerattristique. Suspendisse potenti. In nonest vitae magna adipiscing sagittis.
Loremipsumdolorsitamet, consectetur adipiscing elit.Uteu mi vitaepurusgravida vehiculasit ametindui.A liquamarcuvelit, molestie a porttitor id, porttitor utneque.Aeneanporttitor posuerenequeacplacerat. Maurisnibhenim,posuere ac v olutpatut, aliquetacfelis. Aenean urna massa, mattis ut dapibus sed,fringillaaurna. A eneanutfelis sedmiviverra mattis.Praesenteleifend massa idliberoplacerat tristique. Suspendisse potenti. Innonest vitaemagnaadipiscingsagittis.
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.
Loremipsumdolorsitamet, consecteturadipiscingelit.Uteu mi vitae purus gravida vehiculasit ametindui.Aliquamarcu velit, molestie a porttitor id, porttitor utneque. Aenean porttitor posuerenequeac placerat. Maurisnibhenim,posuereac volutpatut,aliquetac felis. Aenean urna massa, mattisut dapibus sed,fringillaaurna. Aeneanutfelissedmi viverra mattis.Praesenteleifendmassa idliberoplacerattristique. Suspendisse potenti. In nonest vitaemagna adipiscing sagittis.
Etiamaegestasnunc.Ut lobortis eratetnuncbibendumquis convallistellusadipiscing. Integerblanditmassa vitae ipsumviverrasitamet tempus nuncultrices.Etiamut tortor id sapiensuscipit convalliseuvitae lectus.Utaurna erat, sed aliquet lorem.Inultricesporttitornunc, asollicitudinmassatempor vel. Mauris viverra interdum hendrerit.Utposuere,massa vitaefeugiattincidunt, neque diamconsecteturnulla,vel imperdietarcununcegetmi.
Etiamaegestasnunc.Utlobortis eratetnuncbibendumquis convallistellusadipiscing. Integerblanditmassa vitae ipsum viverrasitamet tempus nuncultrices.Etiamuttortorid sapiensuscipitconvalliseuvitae lectus.Utaurnaerat, sed aliquet lorem.Inultricesporttitornunc, asollicitudinmassatempor vel. Maurisviverrainterdumhendrerit.Utposuere,massavitae feugiattincidunt,nequediam consecteturnulla,velimperdiet arcununcegetmi.
Etiam a egestas nunc. Ut lobortis Etiamaegestasnunc.Ut lobortis erat et nunc bibendum quis eratetnuncbibendumquis convallis tellus adipiscing. convallistellusadipiscing. Integer blandit massa vitae Integer blandit massa vitae ipsum viverra sit amet tempus ipsumviverrasitamet tempus nunc ultrices. Etiam ut tortor id nuncultrices.Etiamuttortorid sapien suscipit convallis eu vitae sapiensuscipitconvalliseuvitae lectus. Ut a urna erat, sed aliquet lectus.Utaurna erat,sed aliquet lorem. In ultrices porttitor nunc, lorem.Inultricesporttitornunc, a sollicitudin massa tempor vel. asollicitudinmassatemporvel. Mauris viverra interdum hendre- Maurisviverrainterdumhendrerit. Ut posuere, massa vitae rit.Utposuere,massa vitae feugiat tincidunt, neque diam feugiat tincidunt,neque diam consectetur nulla, vel imperdiet consecteturnulla,velimperdiet arcununcegetmi. arcununcegetmi.
