5. conceito
A tipografia (do grego ‘typos’ —
"forma" — e ‘graphein’ — "escrita")
é a arte e o processo de criação na
composição de um texto, física ou
digitalmente.
Fonte: http://pt.wikipedia.org/wiki/Tipografia
6. O que significa
Tipografia trata da impressão dos
tipos.
Tipologia é o estudo da formação
dos tipos.
O termo tipo é o desenho de uma determinada família
de letras como por exemplo: verdana, futura, arial,
etc.
7. Objetivo da tipografia
Fazer com que o layout final tenha
uma “atmosfera” ou “ressonância”
apropriada ao conteúdo apresentado.
Alguns fatores que despertam o interesse visual
• escolha adequada de fontes tipográficas;
• composição (ou layout) de texto;
• sensibilidade para o tom do texto; e
• relação entre texto e os elementos gráficos na página.
8. Tipos de tipografia
Leitura contínua ou Efêmera ou
Longa durabilidade De impacto
- Livros - Pôster
- Jornais - Capas
- Revistas - Logotipos
- Manuais - Embalagens
- Hipertexto - Anúncios
- Sinalética
11. Elementos das fontes
Toda a fonte é composta por:
• Linha de Base (baseline)
• Linha Central (meanline ou midline)
• Ascendente (ascender)
• Descendente (descender)
• Letra Caixa Alta (upper-case)
• Letra Caixa-baixa (lower-case)
• Altura de x (x-height)
• Cabeça ou Ápice (apex)
• Serifa (serif)
• Barriga ou Pança (bowl)
• Haste ou Fuste (stem)
• Montante ou Trave (diagonal stroke)
• Base ou Pé (foot)
• Barra (bar)
• Bojo (counter)
13. Anatomia das Letras
Anatomia das letras
Braço Gancho
Barra
blTKQr Haste
Bojo Serifa Perna
Cauda
Garamond, 200 pt. Garamond, 200 pt
Wednesday, May 20, 2009
14. Anatomia das Letras
As letras são de três tipos consoante o seu desenho e tamanho
relativo:
Primeiro e terceiro exemplos: Stone Sans; segundo: Georgia.
20. Alinhamentos
Justificado
todas as linhas têm o mesmo
comprimento e são alinhadas tanto a
esquerda quanto a direita.
Alinhado a direita
as linhas têm diferentes comprimentos e
são todas alinhadas á direita e irregulares
a esquerda.
Alinhado a esquerda
as linhas têm diferentes comprimentos e
são todas alinhadas á esquerda e
irregulares a direita.
Centralizada
as linhas têm tamanho desigual, com
ambos os lados irregulares.
Assimétrica
um arranjo
sem padrão previsível
na colocação das linhas
21. Arranjo dos tipos
seleção de fonte;
altura da letra (point size);
largura da linha;
espaçamento entre-letras (kerning),
espaçamento entre-linha (leading).
A finalidade é melhorar a legibilidade do texto a ser
escrito, facilitando o seu entendimento, além de
proporcionar conforto aos olhos do leitor
22. À largura de uma coluna de texto chama!se ‘medi
À largura de uma coluna de texto chama!se ‘med
Medida
As linhas criadas dentro da coluna ajudam o olho
As linhas criadas dentro da coluna ajudam o olho
seguir o texto e a sua largura deve ser combinada
seguir o texto e a sua largura deve ser combinada
o corpo de letra e a entrelinha de forma a facilita
olargura de uma coluna dede forma a facilita
corpo de letra e a entrelinha texto
Éviagem do olho de linha para linha.
viagem do olho de linha para linha.
As linhas criadas dentro As armas e os Barões assinalados
da coluna ajudam o As armas e os Barões assinalados
que da ocidental praia Lusitana,
olho a seguir o texto e a que mares nunca dantesLusitana,
sua largura deve ser por da ocidental praia
combinada com o corpo por mares nunca dantes
navegados, passaram ainda além
de letra e a entrelinha navegados, passaram ainda além
da Taprobana.
de forma a facilitar a da Taprobana.
viagem do olho de linha
para linha.
Medida
Medida
Wednesday, May 20, 2009
Wednesday, May 20, 2009
23. oc osac euq sartel sartuo ed exiacne
.etnemacitpo ,sadatsafa odaisamed
Kern Parte das letras que ‘sai’ do bloco
f fo fo
Permite o encaixe de outras letras que caso contrário
ficariam demasiado afastadas visualmente
Kern
Kern
Cada Cada par depar de letras tem o seu kerningdefinido na fonte
par de letrasletraso seuo seu kerning definido fonte
Cada tem tem kerning definido na na fonte
digital, mas por vezesvezes são são necessários ajustes manuais,
digital, digital, massão vezes necessários ajustes manuais,
mas por por necessários ajustes manuais,
sobretudo em tamanhos grandes.
sobretudo em tamanhos grandes.
sobretudo em tamanhos grandes.
fo fo
correto incorreto
CorrectoCorrecto Incorrecto
Incorrecto
9002 ,02 yaM ,yadsendeW
Wednesday, May 20, 2009
24. Espaçamento (1/2)
ou ‘Tracking’, é de dois tipos:
entre letras (kerning): “normal, solto ou apertado”;
entre palavras.
Solto
Normal
Apertado
25. Espaçamento (2/2)
Deve ser o menor possível e sobretudo consistente.
Espaço inconsistente (‘dentes de cavalo’) cria ‘rios’ no texto,
dificultando a leitura.
Exemplo retirado de http://www.poa.ifrs.edu.br/?page_id=5210
27. Entrelinha ou ‘leading’
A entrelinha é o espaço colocado entre duas linhas de
Espaçamento entrelinha
texto. O inglês ‘leading’ vem das tiras de chumbo
(‘lead’) que eram usadas para este efeito.
ou ‘Leading’, é o espaço colocado entre duas linhas de
A medida da ‘Leading’ vem das tiras decorpo mais o espaço
texto. entrelinha é igual ao chumbo (‘lead’) que
eram usadas para este efeito.
ou, mais correctamente, de linha de base a linha de bas
Entrelinha 51 pt:
42 pt
A Alemanha é um país Europeu.
9 pt
A Coreia do Sul é um país Asiático.51 pt
A medida da entrelinha é igual ao corpo mais o espaço ou, de
Ou seja, base à linhaestábase.Futura Medium 42/51 pt.
linha de este texto de em
28. Relações
espaço linha x palavras
13 px 24 px
O espaço entre linhas deve ser opticamente maior do
que o espaço24px
12px entre palavras. Isto não significa uma
entrelinha enorme, opticamente é a palavra chave.
O espaço entre linhas deve ser opticamente maior do
que o espaço entre palavras. Isto não significa uma
entrelinhaaltura de x menor, requerem menos entrelinha, como
Fontes com enorme, opticamente é a palavra chave.
é o caso da maioria das fontes serifadas. Georgia é uma clara
excepção: apesar de serifada, tem uma altura de x grande.
Linhas compridas requerem maior entrelinha e um corpo
de letra maior. (medida com 54 caracteres)
Linhas curtas requerem uma entrelinha menor e também
um corpo de letra menor. O objectivo é manter o movimento (medida com 57 caracteres)
do olho horizontal, não o deixando torna!se vertical.
Wednesday, May 20, 2009
30. Regra 1
Não usar mais que três
fontes num documento
Simplicidade é mais importante
que exibicionismo
31. Um só tipo de letra Embor
é muitas vezes armar
suficiente. o melh
não se
sobre
poster
Poster por Fabiano Hikaru ! http://fabianohikaru.deviantart.com/art/Typogra
er por Shaun Morrison ! http://www.picturesandwriting.com/
Wednesday, May 20, 2009
32. Regra 2
Os títulos devem ser
maiores que o corpo do
texto e estar acima deste
hierarquia visual é importante
para comunicar claramente
33. Regra 3
O texto principal deve
ser legível para o meio
em que é aplicado
A distância de leitura é um dos
fatores mais importantes
34. Regra 4
Utilize um tipo padrão
de letra
Letras decorativas e de pobre
legibilidade devem ser evitadas
35. Regra 5
Usar o espaço entre
letras e palavras de
forma consistente
O texto deve criar linhas fáceis de
seguir pelo olhar, letras ou palavras
demasiado juntas ou afastadas criam
distração e impedem a leitura
36. Regra 6
Elementos de ênfase
devem ser discretos
O itálico é o preferencial, pois não
quebra o ritmo de leitura e não deixa
de enfatizar
37. Regra 7
Não escreva texto
corrido em maiúsculas
Elas são muito menos legíveis, em
bloco, do que as minúsculas
38. Regra 8
O texto deve ser
alinhado na horizontal
Lemos da esquerda para a direita,
texto ‘empilhado’ na vertical é ilegível
40. Regra 10
As linhas não devem
ser curtas, nem longas
demais
A linha ideal tem 66 caracteres* (com
espaços), pois ajuda a leitura rápida e
permite eficiente mudança de linha
43. Contraste
Evitar tipo claro em fundo claro, ou
tipo escuro em fundo escuro.
Texto é para ser lido! Para impressos,
o melhor é sempre letra preta no
papel branco.
De qualquer maneira, contraste
sempre.
44. Serifas
ÚltimasMelhor para
dicas
Últimas dicas Web, monitor
ideal para livros, material impresso
Serifas parapara impressão, sem serifas para écrã
Serifas impressão, sem serifas para écrã
String theoryString theory is abranch of theoreticalof theoretical physics that
is a developing developing branch physics that String theory is a developingdevelopingtheoretical theoretical physics
String theory is a branch of branch of physics
that combines combines quantum mechanics and general relativity into
thatquantum mechanics and general relativity into
combines quantum mechanics and general relativity into a quantum a quantum
combines quantum mechanics and general relativity into
a quantuma quantum theory The strings The strings of string theory are
theory of gravity. of gravity. of string theory are
theory of gravity. The strings of string theory string theory are one-dimensional
theory of gravity. The strings of are one-dimensional
one-dimensional oscillating lines, but they are no longer no longer
one-dimensional oscillating lines, but they are
oscillating lines, but they are no longerare no longer considered fundamental to the
oscillating lines, but they considered fundamental to the
considered considered fundamental to the theory, be
fundamental to the theory, which can which can be
theory, which can bewhich can be formulated in termssurfaces too. surfaces too.
theory, formulated in terms of points or of points or formulatedformulated in terms of points or surfaces too.
in terms of points or surfaces too.
Since its birth as the dual resonance model whichmodel which described the
Since its birth as the dual resonance described the Since its birth as the dualas the dual model which
Since its birth resonance resonance model which
strongly interacting hadrons as strings, the term string theory string theory has
strongly interacting hadrons as strings, the term has described the strongly interacting hadrons as strings, as
described the strongly interacting hadronsthestrings, the
changed to include any of a group ofof a group of relatedtheories which
changed to include any related superstring superstring theories which term stringterm string theory has changed any of a group of a group of
theory has changed to include to include any
unite them. One shared property of all these theories is the holographic holographic
unite them. One shared property of all these theories is the related superstringsuperstring theories which unite them. One shared
related theories which unite them. One shared
principle. String theoryString comes in many different formulations,
principle. itself theory itself comes in many different formulations, property of all theseof all these the holographic principle. principle.
property theories is theories is the holographic
String theory itself comes in many different formulations,
String theory itself comes in many different formulations,
each one with a different mathematical structure, and each best each best
each one with a different mathematical structure, and
describing different physical circumstances. But the principles shared each one with a one with a different mathematicaland each and each
each different mathematical structure, structure,
describing different physical circumstances. But the principles shared best describing different physical circumstances. But the
best describing different physical circumstances. But the
by these approaches, their mutual logical consistency, and the fact that the fact that
by these approaches, their mutual logical consistency, and
principles shared by these approaches, their mutual logical
principles shared by these approaches, their mutual logical
some of them easily include the standard model of particle physics, has physics, has
some of them easily include the standard model of particle
consistency, and the fact that some of them easilythem easily include the
consistency, and the fact that some of include the
led many physicists to physicists tothe theory is the theory is the correct
led many believe that believe that correct standard model of particle physics, has led many physicists to
standard model of particle physics, has led many physicists to
fundamentalof nature. In of nature. In particular, string theory is the first
fundamental description description particular, string theory is the first believe that the theory the theory is the correct fundamental
believe that is the correct fundamental
candidate forcandidate for the theory ofaeverything, a way tothe known the known
the theory of everything, way to describe all describe all descriptiondescription In particular, string theory is the first is the first
of nature. of nature. In particular, string theory
natural forces (gravitational, electromagnetic, weak and strong and strong
natural forces (gravitational, electromagnetic, weak candidate for the theory the theory of everything, a way to describe all
candidate for of everything, a way to describe all
interactions) interactions) and matter leptons) and leptons) in a mathematically
and matter (quarks and (quarks in a mathematically the known the known natural forces (gravitational, electromagnetic,
natural forces (gravitational, electromagnetic,
complete system.
complete system. weak and strong and strong interactions) and matter (quarks and
weak interactions) and matter (quarks and
Many detractors criticize string theory string theory because it has not yet
Many detractors criticize because it has not yet leptons) in leptons) in a mathematically complete system.
a mathematically complete system.
Many detractors criticize string theory because it has not it has not
Many detractors criticize string theory because
provided quantitative experimentalexperimental Like any other any other
provided quantitative predictions. predictions. Like
yet provided quantitative experimental predictions. Like any Like any
yet provided quantitative experimental predictions.
quantum theory of gravity, it of widely believed thatbelieved that testing the theory
quantum theory is gravity, it is widely testing the theory
other quantum theory of gravity, it isgravity, it is widely believed that
other quantum theory of widely believed that
directly by experiment would require prohibitivelyprohibitively expensive feats of
directly by experiment would require expensive feats of testing the testing the theory experiment would require
theory directly by directly by experiment would require
engineering. engineering. Whether there are stringent indirect tests of the theory is
Whether there are stringent indirect tests of the theory is prohibitively expensive feats of engineering. Whether there
prohibitively expensive feats of engineering. Whether there
not yet known. yet known.
not are stringent indirect tests of thetests of the theory is not yet known.
are stringent indirect theory is not yet known.
Ideal para livros, material impresso.
Ideal para livros, material impresso. MelhorMelhor para web, écrã.
para web, écrã.
Texto retirado da Wikipedia.
Texto retirado da Wikipedia.
Wednesday, May 20, 2009May 20, 2009
Wednesday,
45. Serifas Unidades
Em tipografia utilizam!se três unidades de medida*:
Existem 3 unidades de media em tipografia
Ponto Usado sobretudo para medir 1 pt = 1/72’’
corpo de letra e entrelinha.
Pica Usado sobretudo para medir 1 p = 12 pt
comprimento de linha, margens,
grelhas.
Em Medida relativa usada sobretudo 1 em = tamanho
para medir espaços e do corpo
indentações.
Para ser tecnicamente correcto:
Uma pica escreve!se 1p0 (1 pica e 0 pontos); 1 ponto escreve!se 0p1. Etc.
48. Referências e links
Baseado no material do Prof Pedro Couto e Santos
http://www.nitrodesign.com/designforlife
http://design.blog.br/design-grafico/o-que-e-tipografia
http://www.webmaster.pt/principios-tipografia-web-4214.html
http://ilovetypography.com/2008/02/28/a-guide-to-web-
typography/
http://www.giuliano.eti.br/css/melhorando-a-tipografia-de-
interfaces-web-com-o-google-font-directory/
http://aulas.pro.br/blog4/?p=399
http://www.webdesignerdepot.com/2011/02/30-of-the-best-font-
foundries/
http://www.dafont.com/
http://developers.blogs.sapo.pt/40461.html
