Tipografia na WebUma breve introdução
Evandro Manara Miletto IFRS – Campus Porto Alegre
Baseado no material de Pedro Couto e Santos
mundo sem tipografia?
conceitoA 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
O que significaTipografia 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.
Objetivo da tipografiaFazer 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.
Tipos de tipografia
Leitura contínua ou Longa durabilidade
- Livros- Jornais- Revistas- Manuais- Hipertexto
Efêmera ouDe impacto
- Pôster- Capas- Logotipos- Embalagens- Anúncios- Sinalética
História
Classificação das fontes4 grupos
básicos:
Elementos das fontesToda 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)
Anatomia das Letras
Times New Roman, 200 pt
Anatomia das Letras
Garamond, 200 pt
Anatomia das letras
Garamond, 200 pt.
b l T K Q rBojo
Haste
BarraBraço
Cauda
Gancho
PernaSerifa
Wednesday, May 20, 2009
Anatomia das Letras
Primeiro e terceiro exemplos: Stone Sans; segundo: Georgia.
As letras são de três tipos consoante o seu desenho e tamanho relativo:
Família de letras
Famílias de letrasAs letras classificam-se de acordo com elementos gráficos marcantes que as distinguem. Assim:
Famílias de letras
Famílias de letras
Famílias de letras
AlinhamentosJustificadotodas 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 esquerdaas linhas têm diferentes comprimentos e são todas alinhadas á esquerda e irregulares a direita.
Centralizadaas linhas têm tamanho desigual, com
ambos os lados irregulares.Assimétricaum arranjo
sem padrão previsível na colocação das linhas
Arranjo dos tiposseleçã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
MedidaÉ largura de uma coluna de texto
As linhas criadas dentro da coluna ajudam o
olho a seguir o texto e a sua largura deve ser
combinada com o corpo de letra e a entrelinha de forma a facilitar a
viagem do olho de linha para linha.
Medida
À largura de uma coluna de texto chama!se ‘medida’. As linhas criadas dentro da coluna ajudam o olho a seguir o texto e a sua largura deve ser combinada com o corpo de letra e a entrelinha de forma a facilitar a viagem do olho de linha para linha.
As armas e os Barões assinalados que da ocidental praia Lusitana, por mares nunca dantes navegados, passaram ainda além da Taprobana.
Medida
Wednesday, May 20, 2009
Medida
À largura de uma coluna de texto chama!se ‘medida’. As linhas criadas dentro da coluna ajudam o olho a seguir o texto e a sua largura deve ser combinada com o corpo de letra e a entrelinha de forma a facilitar a viagem do olho de linha para linha.
As armas e os Barões assinalados que da ocidental praia Lusitana, por mares nunca dantes navegados, passaram ainda além da Taprobana.
Medida
Wednesday, May 20, 2009
Kern Parte das letras que ‘sai’ do bloco
Permite o encaixe de outras letras que caso contrário ficariam demasiado afastadas visualmente
KernParte das letras que ‘sai fora’ do bloco para permitir o encaixe de outras letras que caso contrário ficariam demasiado afastadas, opticamente.
fWednesday, May 20, 2009
KernCada par de letras tem o seu kerning definido na fonte digital, mas por vezes são necessários ajustes manuais, sobretudo em tamanhos grandes.
fo foCorrecto Incorrecto
Wednesday, May 20, 2009
KernCada par de letras tem o seu kerning definido na fonte digital, mas por vezes são necessários ajustes manuais, sobretudo em tamanhos grandes.
fo foCorrecto Incorrecto
Wednesday, May 20, 2009
Cada par de letras tem o seu kerning definido na fonte digital, mas por vezes são necessários ajustes manuais, sobretudo em tamanhos grandes.
correto incorreto
Espaçamento (1/2)
ou ‘Tracking’, é de dois tipos: entre letras (kerning): “normal, solto ou apertado”; entre palavras.
S o l t oNormalApertado
Espaçamento (2/2)
Deve ser o menor possível e sobretudo consistente.
Exemplo retirado de http://www.poa.ifrs.edu.br/?page_id=5210
Espaço inconsistente (‘dentes de cavalo’) cria ‘rios’ no texto, dificultando a leitura.
NÃO JUSTIFIQUE TEXTO NA WEB!
NUNCA!
Espaçamento entrelinhaou ‘Leading’, é o espaço colocado entre duas linhas de
texto. ‘Leading’ vem das tiras de chumbo (‘lead’) que eram usadas para este efeito.
Entrelinha ou ‘leading’A entrelinha é o espaço colocado entre duas linhas de texto. O inglês ‘leading’ vem das tiras de chumbo (‘lead’) que eram usadas para este efeito.
A medida da entrelinha é igual ao corpo mais o espaço ou, mais correctamente, de linha de base a linha de base.
A Alemanha é um país Europeu.A Coreia do Sul é um país Asiático.
42 pt
9 pt
Entrelinha 51 pt:
Ou seja, este texto está em Futura Medium 42/51 pt.
51 pt
Wednesday, May 20, 2009
A medida da entrelinha é igual ao corpo mais o espaço ou, de linha de base à linha de base.
espaço linha x palavras
O espaço entre linhas deve ser opticamente maior do que o espaço entre palavras. Isto não significa uma entrelinha enorme, opticamente é a palavra chave.
12px 24px
Relações
O espaço entre linhas deve ser opticamente maior do que o espaço entre palavras. Isto não significa uma entrelinha enorme, opticamente é a palavra chave.
Fontes com altura de x menor, requerem menos entrelinha, como é 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.
Linhas curtas requerem uma entrelinha menor e tambémum corpo de letra menor. O objectivo é manter o movimentodo olho horizontal, não o deixando torna!se vertical.
13 px 24 px
(medida com 57 caracteres)
(medida com 54 caracteres)
Wednesday, May 20, 2009
10 regras básicas
Não usar mais que três fontes num documento
Regra 1
Simplicidade é mais importante que exibicionismo
Poster por Shaun Morrison ! http://www.picturesandwriting.com/
Um só tipo de letraé muitas vezes suficiente.
Wednesday, May 20, 2009
Poster por Fabiano Hikaru ! http://fabianohikaru.deviantart.com/art/Typography!80428966
Embora por vezes,armar confusão sejao melhor remédio,não se compreendesobre o que é esteposter.
Wednesday, May 20, 2009
Os títulos devem ser maiores que o corpo do texto e estar acima deste
Regra 2
hierarquia visual é importante para comunicar claramente
O texto principal deve ser legível para o meio em que é aplicado
Regra 3
A distância de leitura é um dos fatores mais importantes
Utilize um tipo padrão de letra
Regra 4
Letras decorativas e de pobre legibilidade devem ser evitadas
Usar o espaço entre letras e palavras de forma consistente
Regra 5
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
Elementos de ênfase devem ser discretos
Regra 6
O itálico é o preferencial, pois não quebra o ritmo de leitura e não deixa
de enfatizar
Não escreva texto corrido em maiúsculas
Regra 7
Elas são muito menos legíveis, em bloco, do que as minúsculas
O texto deve ser alinhado na horizontal
Regra 8
Lemos da esquerda para a direita, texto ‘empilhado’ na vertical é ilegível
Justificado: quando tiver controle de Kerning, tracking e hifenização
Regra 9
Sem este controle os espaços perdem a consistência
As linhas não devem ser curtas, nem longas demais
Regra 10
A linha ideal tem 66 caracteres* (com espaços), pois ajuda a leitura rápida e
permite eficiente mudança de linha
Recomendações
Evitar alinhamento centralizado em textos longos. O excesso de espaço branco nas laterais tende a fazer a pessoa se perder.
Alinhamento
ContrasteEvitar 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.
SerifasÚltimas dicas
Serifas para impressão, sem serifas para écrã String theory is a developing branch of theoretical physics that
combines quantum mechanics and general relativity into a quantum
theory of gravity. The strings of string theory are one-dimensional
oscillating lines, but they are no longer considered fundamental to the
theory, which can be formulated in terms of points or surfaces too.
Since its birth as the dual resonance model which described the
strongly interacting hadrons as strings, the term string theory has
changed to include any of a group of related superstring theories which
unite them. One shared property of all these theories is the holographic
principle. String theory itself comes in many different formulations,
each one with a different mathematical structure, and each best
describing different physical circumstances. But the principles shared
by these approaches, their mutual logical consistency, and the fact that
some of them easily include the standard model of particle physics, has
led many physicists to believe that the theory is the correct
fundamental description of nature. In particular, string theory is the first
candidate for the theory of everything, a way to describe all the known
natural forces (gravitational, electromagnetic, weak and strong
interactions) and matter (quarks and leptons) in a mathematically
complete system.
Many detractors criticize string theory because it has not yet
provided quantitative experimental predictions. Like any other
quantum theory of gravity, it is widely believed that testing the theory
directly by experiment would require prohibitively expensive feats of
engineering. Whether there are stringent indirect tests of the theory is
not yet known.
String theory is a developing branch of theoretical physics
that combines quantum mechanics and general relativity into
a quantum theory of gravity. The strings of string theory are
one-dimensional oscillating lines, but they are no longer
considered fundamental to the theory, which can be
formulated in terms of points or surfaces too.
Since its birth as the dual resonance model which
described the strongly interacting hadrons as strings, the
term string theory has changed to include any of a group of
related superstring theories which unite them. One shared
property of all these theories is the holographic principle.
String theory itself comes in many different formulations,
each one with a different mathematical structure, and each
best describing different physical circumstances. But the
principles shared by these approaches, their mutual logical
consistency, and the fact that some of them easily include the
standard model of particle physics, has led many physicists to
believe that the theory is the correct fundamental
description of nature. In particular, string theory is the first
candidate for the theory of everything, a way to describe all
the known natural forces (gravitational, electromagnetic,
weak and strong interactions) and matter (quarks and
leptons) in a mathematically complete system.
Many detractors criticize string theory because it has not
yet provided quantitative experimental predictions. Like any
other quantum theory of gravity, it is widely believed that
testing the theory directly by experiment would require
prohibitively expensive feats of engineering. Whether there
are stringent indirect tests of the theory is not yet known.
Ideal para livros, material impresso. Melhor para web, écrã.
Texto retirado da Wikipedia.
Wednesday, May 20, 2009
Últimas dicasSerifas para impressão, sem serifas para écrã
String theory is a developing branch of theoretical physics that
combines quantum mechanics and general relativity into a quantum
theory of gravity. The strings of string theory are one-dimensional
oscillating lines, but they are no longer considered fundamental to the
theory, which can be formulated in terms of points or surfaces too.
Since its birth as the dual resonance model which described the
strongly interacting hadrons as strings, the term string theory has
changed to include any of a group of related superstring theories which
unite them. One shared property of all these theories is the holographic
principle. String theory itself comes in many different formulations,
each one with a different mathematical structure, and each best
describing different physical circumstances. But the principles shared
by these approaches, their mutual logical consistency, and the fact that
some of them easily include the standard model of particle physics, has
led many physicists to believe that the theory is the correct
fundamental description of nature. In particular, string theory is the first
candidate for the theory of everything, a way to describe all the known
natural forces (gravitational, electromagnetic, weak and strong
interactions) and matter (quarks and leptons) in a mathematically
complete system.
Many detractors criticize string theory because it has not yet
provided quantitative experimental predictions. Like any other
quantum theory of gravity, it is widely believed that testing the theory
directly by experiment would require prohibitively expensive feats of
engineering. Whether there are stringent indirect tests of the theory is
not yet known.
String theory is a developing branch of theoretical physics
that combines quantum mechanics and general relativity into
a quantum theory of gravity. The strings of string theory are
one-dimensional oscillating lines, but they are no longer
considered fundamental to the theory, which can be
formulated in terms of points or surfaces too.
Since its birth as the dual resonance model which
described the strongly interacting hadrons as strings, the
term string theory has changed to include any of a group of
related superstring theories which unite them. One shared
property of all these theories is the holographic principle.
String theory itself comes in many different formulations,
each one with a different mathematical structure, and each
best describing different physical circumstances. But the
principles shared by these approaches, their mutual logical
consistency, and the fact that some of them easily include the
standard model of particle physics, has led many physicists to
believe that the theory is the correct fundamental
description of nature. In particular, string theory is the first
candidate for the theory of everything, a way to describe all
the known natural forces (gravitational, electromagnetic,
weak and strong interactions) and matter (quarks and
leptons) in a mathematically complete system.
Many detractors criticize string theory because it has not
yet provided quantitative experimental predictions. Like any
other quantum theory of gravity, it is widely believed that
testing the theory directly by experiment would require
prohibitively expensive feats of engineering. Whether there
are stringent indirect tests of the theory is not yet known.
Ideal para livros, material impresso. Melhor para web, écrã.
Texto retirado da Wikipedia.
Wednesday, May 20, 2009
ideal para livros, material impresso Melhor para Web, monitor
Serifas
Existem 3 unidades de media em tipografia
UnidadesEm tipografia utilizam!se três unidades de medida*:
*não exclusivamente; o DTP e a Web acrescentaram o mm e o px.
Ponto Usado sobretudo para medir corpo de letra e entrelinha.
Pica Usado sobretudo para medir comprimento de linha, margens, grelhas.
Em Medida relativa usada sobretudo para medir espaços e indentações.
1 pt = 1/72’’
1 p = 12 pt
1 em = tamanhodo corpo
Para ser tecnicamente correcto:Uma pica escreve!se 1p0 (1 pica e 0 pontos); 1 ponto escreve!se 0p1. Etc.
Wednesday, May 20, 2009
dafont.com
Referências e linksBaseado no material do Prof Pedro Couto e Santoshttp://www.nitrodesign.com/designforlife
http://design.blog.br/design-grafico/o-que-e-tipografiahttp://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=399http://www.webdesignerdepot.com/2011/02/30-of-the-best-font-
foundries/ http://www.dafont.com/ http://developers.blogs.sapo.pt/40461.html
Top Related