Tipograa na Web

Uma breve introduo

Evandro Manara Miletto

IFRS Campus Porto Alegre

Baseado no material de Pedro Couto e Santos

mundo sem tipograa?

conceito
Atipograa(do gregotypos "forma" egraphein "escrita") aartee oprocessode criao na composio de umtexto, fsica ou digitalmente.

Fonte: http://pt.wikipedia.org/wiki/Tipograa

O que signica
Tipograa trata da impresso dos tipos. Tipologia o estudo da formao dos tipos.
O termo tipo o desenho de uma determinada famlia de letras como por exemplo: verdana, futura, arial, etc.

Objetivo da tipograa
Fazer com que o layout nal tenha uma atmosfera ou ressonncia apropriada ao contedo apresentado.

Alguns fatores que despertam o interesse visual escolha adequada de fontes tipogrcas; composio (ou layout) de texto; sensibilidade para o tom do texto; e relao entre texto e os elementos grcos na pgina.

Tipos de tipograa
Leitura contnua ou Longa durabilidade Efmera ou De impacto

Livros Jornais Revistas Manuais Hipertexto

Pster Capas Logotipos Embalagens Anncios Sinaltica

Histria

Classicao das fontes

4 grupos bsicos:

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) Cabea ou pice (apex) Serifa (serif) Barriga ou Pana (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

Anatomia das letras
Brao

blTKQr
Haste Bojo Serifa Perna Cauda Garamond, 200 pt.
Wednesday, May 20, 2009

Barra

Gancho

Garamond, 200 pt

Anatomia das Letras

As letras so de trs tipos consoante o seu desenho e tamanho relativo:

Primeiro e terceiro exemplos: Stone Sans; segundo: Georgia.

Famlia de letras

Famlias de letras
As letras classicam-se de acordo com elementos grcos marcantes que as distinguem. Assim:

Famlias de letras

Famlias de letras

Famlias de letras

Alinhamentos
Justicado
todas as linhas tm o mesmo comprimento e so alinhadas tanto a esquerda quanto a direita. as linhas tm diferentes comprimentos e so todas alinhadas direita e irregulares a esquerda. as linhas tm diferentes comprimentos e so todas alinhadas esquerda e irregulares a direita.

Alinhado a direita

Alinhado a esquerda

Assimtrica

as linhas tm tamanho desigual, com ambos os lados irregulares.

Centralizada

um arranjo sem padro previsvel na colocao das linhas

Arranjo dos tipos

seleo de fonte; altura da letra (point size); largura da linha; espaamento entre-letras (kerning), espaamento entre-linha (leading).
A nalidade melhorar a legibilidade do texto a ser escrito, facilitando o seu entendimento, alm de proporcionar conforto aos olhos do leitor

 largura de uma coluna de texto chama!se medi largura de uma coluna de texto chama!se med 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 o corpo de letra e a entrelinha de forma a facilita viagem largura uma coluna de texto dode olho de linha para linha. viagem do olho de linha para linha.

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 Bares assinalados As armas e os Bares assinalados que da ocidental praia Lusitana, que da ocidental praia Lusitana, por mares nunca dantes por mares nunca dantes navegados, passaram ainda alm navegados, passaram ainda alm da Taprobana. da Taprobana. Medida Medida

Wednesday, May 20, 2009

Wednesday, May 20, 2009

oc osac euq sartel sartuo ed exiacne .etnemacitpo ,sadatsafa odaisamed

f fo fo fo fo
Permite o encaixe de outras letras que caso contrrio cariam demasiado afastadas visualmente

Kern

Parte das letras que sai do bloco

Kern Kern

par depar letras tem o seu kerning definido na fonte Cada Cada par de letras tem o seu kerning definido na fonte Cada de letras tem o seu kerning denido na fonte digital, mas por vezes necessrios ajustes manuais, digital, mas por vezes so so necessrios ajustes manuais, digital, mas por vezes so necessrios ajustes manuais, sobretudo em tamanhos grandes. sobretudo em tamanhos grandes. sobretudo em tamanhos grandes.
correto incorreto

CorrectoCorrecto

Incorrecto Incorrecto

9002 ,02 yaM ,yadsendeW

Wednesday, May 20, 2009

Espaamento
entre palavras.

(1/2)

ou Tracking, de dois tipos: entre letras (kerning): normal, solto ou apertado;

Solto Normal Apertado

Espaamento

(2/2)

Deve ser o menor possvel e sobretudo consistente.

Espao inconsistente (dentes de cavalo) cria rios no texto, dicultando a leitura.

Exemplo retirado de http://www.poa.ifrs.edu.br/?page_id=5210

NUNCA!

NO JUSTIFIQUE TEXTO NA WEB!

Entrelinha ou leading

A entrelinha o espao colocado entre duas linhas de texto. O ingls leading vem das tiras de chumbo (lead) que eram usadas para este efeito.

Espaamento entrelinha

A ou, mais correctamente, de linha de base a linha de bas

Entrelinha 51 pt: 42 pt 9 pt

ou Leading, o espao colocado entre duas linhas de texto. vem tiras de chumbo (lead) que medida da Leading entrelinha das igual ao corpo mais o espao eram usadas para este efeito.

A Alemanha um pas Europeu. 51 pt A Coreia do Sul um pas Asitico.

A medida da entrelinha igual ao corpo mais o espao ou, de Ou seja, este texto em Futura Medium 42/51 pt. linha de base linhaest de base.

espao linha x palavras

13 px 24 px

Relaes

O espao entre linhas deve ser opticamente maior do 12px 24px que o espao entre palavras. Isto no significa uma entrelinha enorme, opticamente a palavra chave. O espao entre linhas deve ser opticamente maior do que o espao entre palavras. Isto no signica uma Fontes com altura de x menor, requerem entrelinha, como entrelinha enorme, opticamente menos a palavra chave. o caso da maioria das fontes serifadas. Georgia uma clara excepo: 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 tambm um corpo de letra menor. O objectivo manter o movimento do olho horizontal, no o deixando torna!se vertical.

(medida com 57 caracteres)

Wednesday, May 20, 2009

10 regras bsicas

Regra 1 No usar mais que trs fontes num documento

Simplicidade mais importante que exibicionismo

Um s tipo de letra muitas vezes suficiente.

Embor armar o melh no 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

Regra 2 Os ttulos devem ser maiores que o corpo do texto e estar acima deste
hierarquia visual importante para comunicar claramente

Regra 3 O texto principal deve ser legvel para o meio em que aplicado
A distncia de leitura um dos fatores mais importantes

Regra 4 Utilize um tipo padro de letra

Letras decorativas e de pobre legibilidade devem ser evitadas

Regra 5 Usar o espao entre letras e palavras de forma consistente

O texto deve criar linhas fceis de seguir pelo olhar, letras ou palavras demasiado juntas ou afastadas criam distrao e impedem a leitura

Regra 6 Elementos de nfase devem ser discretos

O itlico o preferencial, pois no quebra o ritmo de leitura e no deixa de enfatizar

Regra 7 No escreva texto corrido em maisculas

Elas so muito menos legveis, em bloco, do que as minsculas

Regra 8 O texto deve ser alinhado na horizontal

Lemos da esquerda para a direita, texto empilhado na vertical ilegvel

Regra 9 Justicado: quando tiver controle de Kerning, tracking e hifenizao

Sem este controle os espaos perdem a consistncia

Regra 10 As linhas no devem ser curtas, nem longas demais

A linha ideal tem 66 caracteres* (com espaos), pois ajuda a leitura rpida e permite eciente mudana de linha

Recomendaes

Alinhamento
Evitar alinhamento centralizado em textos longos. O excesso de espao branco nas laterais tende a fazer a pessoa se perder.

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.

Serifas
ltimas dicas ltimas dicas ideal para livros, material impresso Melhor para Web, monitor
theory is abranch developing branch of theoretical String theoryString is a developing of theoretical physics that physics that combines quantum mechanics and general relativity into a quantum combines quantum mechanics and general relativity into a quantum theory of strings gravity.of The strings of string theory are one-dimensional theory of gravity. The string theory are one-dimensional oscillating lines, but they are no longer considered fundamental to the oscillating lines, but they are no longer considered fundamental to the theory, can be formulated in terms of points or surfaces too. theory, which can bewhich formulated in terms of points or surfaces too. Since its birth as the dual resonance model which Since its birth as the dual resonance model which described thedescribed the strongly interacting hadrons as strings, the term string strongly interacting hadrons as strings, the term string theory has theory has changed toof include any a group of relatedtheories superstring theories which changed to include any a group ofof related superstring which unite them. One shared property of all these theories is the unite them. One shared property of all these theories is the holographic holographic principle. theory in itself comes in many different formulations, principle. String theoryString itself comes many different formulations, each one with a different mathematical structure, and each best each one with a different mathematical structure, and each best describing different physical circumstances. But the principles shared describing different physical circumstances. But the principles shared by these their approaches, their mutual logical and consistency, and the fact that by these approaches, mutual logical consistency, the fact that some of them easily include the standard model of particle some of them easily include the standard model of particle physics, has physics, has led many tothe believe that led many physicists to physicists believe that theory is the theory correctis the correct fundamental description of nature. In particular, fundamental description of nature. In particular, string theory string is the theory rst is the rst for theory ofaeverything, a way tothe describe all the known candidate forcandidate the theory ofthe everything, way to describe all known natural forces (gravitational, electromagnetic, weak and strong natural forces (gravitational, electromagnetic, weak and strong interactions) and matter (quarks and leptons) in a mathematically interactions) and matter (quarks and leptons) in a mathematically complete system. complete system. Many detractors criticize theory because Many detractors criticize string theory string because it has not yetit has not yet provided experimental quantitative experimental predictions. Like any other provided quantitative predictions. Like any other quantum theory gravity,believed it is widely that testing the theory quantum theory of gravity, it of is widely thatbelieved testing the theory directly by experiment would require prohibitively expensive feats of directly by experiment would require prohibitively expensive feats of Whether there are stringent tests of engineering. engineering. Whether there are stringent indirect tests indirect of the theory is the theory is not yet known. not yet known.

Serifas impresso, serifas Serifas parapara impresso, sem sem serifas parapara cr cr
String theory is a developing branch of theoretical physics String theory is a developing branch of theoretical physics that combines quantum mechanics and general relativity into that combines quantum mechanics and general relativity into quantum theory The of gravity. strings of string a quantuma theory of gravity. strings The of string theory are theory are one-dimensional oscillating lines, but they are no longer one-dimensional oscillating lines, but they are no longer fundamental to the theory, which can be considered considered fundamental to the theory, which can be terms of points or surfaces too. formulatedformulated in terms of in points or surfaces too. Since its birth the dual model resonance model which Since its birth as the dualas resonance which described the strongly interacting hadrons as strings, the described the strongly interacting hadrons as strings, the term string theory has changed to include any term string theory has changed to include any of a group of a group of related superstring theories which unite One shared related superstring theories which unite them. One them. shared property all these theories is the holographic property of all theseof theories is the holographic principle. principle. String theory itself comes in many different formulations, String theory itself comes in many different formulations, each with a different mathematical structure, each one with a one different mathematical structure, and each and each best different describing different physical circumstances. But the best describing physical circumstances. But the principles shared by these approaches, their mutual logical principles shared by these approaches, their mutual logical consistency, and the fact that some of them easily include the consistency, and the fact that some of them easily include the standard model physics, of particle physics, has led many physicists to standard model of particle has led many physicists to believe that the theory is the correct fundamental believe that the theory is the correct fundamental ofparticular, nature. In string particular, string theory descriptiondescription of nature. In theory is the first is the first candidate for the theory of everything, a way to candidate for the theory of everything, a way to describe alldescribe all known natural forces (gravitational, electromagnetic, the known the natural forces (gravitational, electromagnetic, weak and strong interactions) matter (quarks and weak and strong interactions) and matterand (quarks and leptons) in a mathematically complete system. leptons) in a mathematically complete system. Many criticize detractors criticize string theory because Many detractors string theory because it has not it has not yet provided quantitative experimental predictions. yet provided quantitative experimental predictions. Like any Like any other quantum theory it ofisgravity, is widely believed that other quantum theory of gravity, widely it believed that testing the theory directly by experiment would require testing the theory directly by experiment would require prohibitively expensive feats of engineering. Whether there prohibitively expensive feats of engineering. Whether there are stringent indirect of the theory is not yet known. are stringent indirect tests of thetests theory is not yet known.

Ideal paramaterial livros, material impresso. Ideal para livros, impresso.

para web, cr. MelhorMelhor para web, cr.

Texto retirado da Wikipedia. Texto retirado da Wikipedia.

Wednesday, Wednesday, May 20, 2009May 20, 2009

Serifas Unidades
Em tipografia utilizam!se trs unidades de medida*: Existem 3 unidades de media em tipograa Ponto Pica Em
Usado sobretudo para medir corpo de letra e entrelinha. Usado sobretudo para medir comprimento de linha, margens, grelhas. Medida relativa usada sobretudo para medir espaos e indentaes.

1 pt = 1/72 1 p = 12 pt 1 em = tamanho do corpo

Para ser tecnicamente correcto: Uma pica escreve!se 1p0 (1 pica e 0 pontos); 1 ponto escreve!se 0p1. Etc.

dafont.com

www.fontsquirrel.com

Referncias e links
http://www.nitrodesign.com/designforlife

Baseado no material do Prof Pedro Couto e Santos

http://design.blog.br/design-graco/o-que-e-tipograa http://www.webmaster.pt/principios-tipograa-web-4214.html http://ilovetypography.com/2008/02/28/a-guide-to-webtypography/ http://www.giuliano.eti.br/css/melhorando-a-tipograa-deinterfaces-web-com-o-google-font-directory/ http://aulas.pro.br/blog4/?p=399 http://www.webdesignerdepot.com/2011/02/30-of-the-best-fontfoundries/ http://www.dafont.com/ http://developers.blogs.sapo.pt/40461.html