Tipografia na Web

3,059 views

Published on

Tipografia na Web

  1. 1. Tipografia na WebUma breve introdução Evandro Manara Miletto IFRS – Campus Porto Alegre Baseado no material de Pedro Couto e Santos
  2. 2. mundo sem tipografia?
  3. 3. 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
  4. 4. O que significaTipografia trata da impressão dostipos.Tipologia é o estudo da formaçãodos tipos. O termo tipo é o desenho de uma determinada família de letras como por exemplo: verdana, futura, arial, etc.
  5. 5. Objetivo da tipografiaFazer com que o layout final tenhauma “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.
  6. 6. Tipos de tipografiaLeitura contínua ou Efêmera ouLonga durabilidade De impacto- Livros - Pôster- Jornais - Capas- Revistas - Logotipos- Manuais - Embalagens- Hipertexto - Anúncios - Sinalética
  7. 7. História
  8. 8. Classificação das fontes4 grupos básicos:
  9. 9. 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)
  10. 10. Anatomia das Letras Times New Roman, 200 pt
  11. 11. Anatomia das Letras Anatomia das letras Braço Gancho Barra blTKQr Haste Bojo Serifa Perna Cauda Garamond, 200 pt. Garamond, 200 ptWednesday, May 20, 2009
  12. 12. Anatomia das LetrasAs letras são de três tipos consoante o seu desenho e tamanhorelativo: Primeiro e terceiro exemplos: Stone Sans; segundo: Georgia.
  13. 13. Família de letras
  14. 14. Famílias de letrasAs letras classificam-se de acordo com elementos gráficosmarcantes que as distinguem. Assim:
  15. 15. Famílias de letras
  16. 16. Famílias de letras
  17. 17. Famílias de letras
  18. 18. AlinhamentosJustificadotodas as linhas têm o mesmocomprimento e são alinhadas tanto aesquerda 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 esão todas alinhadas á esquerda eirregulares a direita. Centralizada as linhas têm tamanho desigual, com ambos os lados irregulares.Assimétricaum arranjo sem padrão previsível na colocação das linhas
  19. 19. 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
  20. 20. À 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 MedidaWednesday, May 20, 2009Wednesday, May 20, 2009
  21. 21. 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
  22. 22. Espaçamento (1/2)ou ‘Tracking’, é de dois tipos: entre letras (kerning): “normal, solto ou apertado”; entre palavras. Solto Normal Apertado
  23. 23. 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
  24. 24. NÃO JUSTIFIQUE TEXTO NA WEB!NUNCA!
  25. 25. Entrelinha ou ‘leading’A entrelinha é o espaço colocado entre duas linhas de Espaçamento entrelinhatexto. 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 deA 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
  26. 26. 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
  27. 27. 10 regras básicas
  28. 28. Regra 1Não usar mais que trêsfontes num documento Simplicidade é mais importante que exibicionismo
  29. 29. 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/Typograer por Shaun Morrison ! http://www.picturesandwriting.com/ Wednesday, May 20, 2009
  30. 30. Regra 2Os títulos devem sermaiores que o corpo dotexto e estar acima deste hierarquia visual é importante para comunicar claramente
  31. 31. Regra 3O texto principal deveser legível para o meioem que é aplicado A distância de leitura é um dos fatores mais importantes
  32. 32. Regra 4Utilize um tipo padrãode letra Letras decorativas e de pobre legibilidade devem ser evitadas
  33. 33. Regra 5Usar o espaço entreletras e palavras deforma 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
  34. 34. Regra 6Elementos de ênfasedevem ser discretos O itálico é o preferencial, pois não quebra o ritmo de leitura e não deixa de enfatizar
  35. 35. Regra 7Não escreva textocorrido em maiúsculas Elas são muito menos legíveis, em bloco, do que as minúsculas
  36. 36. Regra 8O texto deve seralinhado na horizontal Lemos da esquerda para a direita,texto ‘empilhado’ na vertical é ilegível
  37. 37. Regra 9Justificado: quandotiver controle deKerning, tracking ehifenizaçãoSem este controle os espaços perdem a consistência
  38. 38. Regra 10As linhas não devemser curtas, nem longasdemaisA linha ideal tem 66 caracteres* (comespaços), pois ajuda a leitura rápida e permite eficiente mudança de linha
  39. 39. Recomendações
  40. 40. AlinhamentoEvitar alinhamento centralizado emtextos longos. O excesso de espaçobranco nas laterais tende a fazer apessoa se perder.
  41. 41. ContrasteEvitar tipo claro em fundo claro, outipo escuro em fundo escuro.Texto é para ser lido! Para impressos,o melhor é sempre letra preta nopapel branco.De qualquer maneira, contrastesempre.
  42. 42. 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,
  43. 43. Serifas UnidadesEm 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.
  44. 44. dafont.com
  45. 45. www.fontsquirrel.com
  46. 46. Referências e linksBaseado no material do Prof Pedro Couto e Santoshttp://www.nitrodesign.com/designforlifehttp://design.blog.br/design-grafico/o-que-e-tipografiahttp://www.webmaster.pt/principios-tipografia-web-4214.htmlhttp://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

×