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

www.fontsquirrel.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