Tipografia para Web - Plau Branding, Type & Design.

2,134 views

Published on

Palestra sobre tipografia para web e meios digitais ministrada no espaço de Co-Working Pto de Contato, no Rio de Janeiro, 10/04/2014.

Inscreva-se no nosso workshop - 26 e 27 de Abril de 2014, no Rio.
http://plau.co/type-workshop.

Keynote about web typography presented at Pto de Contato, a co-working space in Rio de Janeiro.

Published in: Design
1 Comment
17 Likes
Statistics
Notes
No Downloads
Views
Total views
2,134
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
60
Comments
1
Likes
17
Embeds 0
No embeds

No notes for slide

Tipografia para Web - Plau Branding, Type & Design.

  1. 1. p PTO DE CONTATO CO-WORKING · 10/04
  2. 2. <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> <title>BOA NOITE</title> <link rel=“stylesheet” href=“tipografia-para-web.css”> </head> <body> <h1>BOA NOITE</h1> </body> </html>
  3. 3. pRODRIGO SAIANI
  4. 4. TIPOGRAFIA Fontes Fontes Custom Lettering Workshops BRANDING Design estratégico Identidade Visual Embalagem Sinalização SITES Apps E-commerce Sites
  5. 5. Plau Niramekko Selulloid AG CLIENTES Avos, Babycub, Pagpop, City Shoes, Cultura Inglesa, Fecomércio, Festa das Comadres, Fnac, Forever Living, Globoesporte.com, Grendene, Grupo Foco, IMX, Joj TV (Slovakia), Lush Motel São Paulo, Penguin Group, Natura, Novartis, O Reino, Oi, Pagpop, Parquet Nobre, Pinakotheke Cultural, PNM Advogados, Ponto de Referência, Ponto Frio, Prudential, Saravah, SRCom, TIM, Treselle, Vale, Valve Software, Via Mia, Vudoo Vídeos Espertos, XBA Advogados P
  6. 6. MOTIVA SANS Um pequeno jabuti xereta viu dez cegonhas felizes.
  7. 7. <ol> <li>Tipografia</li> <li>Princípios</li> <li>Webfonts</li> <li>Ferramentas</li> <li>Cases</li> </ol>
  8. 8. Elemento básico da comunicação. Impressa, digital ou qualquer meio visual.
  9. 9. Type design Composição Lettering Caligrafia
  10. 10. Design de interação é como a engenharia: o importante não é achar o design perfeito, mas equilibrar melhor as limitações. information architects
  11. 11. Leitura Ritmo Contraste Proporção
  12. 12. Ninguém lê letra por letra, e sim por blocos gráficos. LEITURA
  13. 13. RITMO A quantidade de informação e hiperlinks em meios digitais dificulta e torna mais relevante a busca por ritmo.
  14. 14. CONTRASTE Título Lou temquatur simus a al dolorporenes ratisci tib ero odio quodis dolori num fugitat proreri not, nonsedist quisciate erro bero cum iliquid ut as nonseque cum audan. Veja Mais
  15. 15. CONTRASTE A hierarquia de um documento é definida por contrastes. TÍTULO Lou temquatur simus a al dolorporenes ratisci tib ero odio quodis dolori num fugitat proreri not, nonsedist quisciate erro bero cum iliquid ut as nonseque cum audan. » VEJA MAISa p h1
  16. 16. PROPORÇÃO Relação entre margem e coluna de texto, tamanho da fonte e entrelinha é constante e ainda mais dinâmica na web. (17/22pt) Ic temquatur simus a renes ratisci tibero odio quodis dolori num fugitat proreri nobist, nonsedist quisciate corerro bero cum iliquid ut as nonseque cum audandit utet perum que ditia audae cupiet, aut eum reperum quiatur, ut raeptatur modisi corit as rest, tem dolupta dolore platiore natia suntem harias exped quodistrum. (10/14pt) <25> Ic temquatur simus a dolorporenes ratisci tibero odio quodis dolori num fugitat proreri nobist, nonsedist quisciate corerro bero cum iliquid ut as nonseque cum audandit utet perum que ditia audae cupiet, aut eum reperum quiatur, ut raeptatur modisi corit as rest, tem dolupta dolore platiore natia suntem harias exped quodistrum. Arum ent ventur sitateceaqui ut qui voluptatem eum eatem autectiur, non prat licid qui amus, odi venis ellatincta etur aut volupit, volestiusam assi tet, et ullab iliquia con re rehendi amusamus, ut exerciis et quo dollaut aut reria si inveliaturia pa con repro eic te prae cum quis debis volor aut quam latum sequos eum aut aut re excepta tiustin non plis et TÍTULO (23/36pt) -10 Ic temquatur simus a dolorporenes ratisci tibero odio quodis dolori num fugitat proreri nobist, nonsedist quisciate corerro bero cum iliquid ut as nonseque cum audandit utet perum que ditia audae cupiet, aut eum reperum quiatur, ut raeptatur modisi corit as rest, tem dolupta dolore platiore natia suntem harias exped quodistrum.
  17. 17. REFERÊNCIA Os princípios clássicos da tipografia são ainda mais importantes nos meios digitais
  18. 18. MOBILE PRIMEIRO CONTEÚDO PRIMEIRO TIPOGRAFIA PRIMEIRO
  19. 19. FONTE Plau-Regular.otf WEBFONT Plau-Regular.ttf Plau-Regular.woff Plau-Regular.eot Plau-Regular.svg
  20. 20. Chamada @font-face (CSS) @font-face { font-family: “SSSocialRegular”; src: url(‘ss-social-regular.eot’); src: url(‘ss-social-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘ss-social-regular.woff’) format(‘woff’), url(‘ss-social-regular.ttf’) format(‘truetype’), url(‘ss-social-regular.svg#SSSocialRegular’) format(‘svg’); font-weight: normal; font-style: normal; }
  21. 21. Compatibilidade para todos os dispositivos
  22. 22. facebook = facebook SS SOCIAL CIRCLE
  23. 23. FORÇA DA MARCA VARIEDADE FLEXIBILIDADE ICONES/IMAGENS RESPONSIVAS PERFORMANCE FORMATOS NAVEGADORES QUALIDADE* + –
  24. 24. Um a um. Assinatura. Self-host/Cloud-host. LICENCIAMENTO
  25. 25. ! SERVIÇOS
  26. 26. ScreenSmart e Reading Edge - Feitas especificamente para tela.
  27. 27. ScreenSmart e Reading Edge - Feitas especificamente para tela.
  28. 28. TYPECAST Teste webfonts no navegador.
  29. 29. TESTE DE FONTES Arraste e teste qualquer fonte para features opentype, hinting etc. http://www.impallari.com/testing/
  30. 30. LETTERING.JS Controle letra por letra em elementos HTML.
  31. 31. WHATFONTTOOL Descubra quais webfonts os sites estão usando. whatfonttool.com
  32. 32. GUIA DE ESTILOS Facilita a criação de novas seções para um determinado site e padroniza a linguagem visual dos elementos.
  33. 33. exemplo MEDIUM Tipografia impecável e foco na leitura. Comentários feitos parágrafo por parágrafo. medium.com
  34. 34. iA WRITER Tipografia responsiva. Foco em escrever, não em formatar a página. Fonte: Nitti (Bold Monday).
  35. 35. CRYSTIAN CRUZ E MARINA CHACCUR
  36. 36. CRYSTIAN CRUZ E MARINA CHACCUR
  37. 37. www.plau.co/type-workshop Aprenda os fundamentos do desenho tipográfico em um workshop que mistura tipografia, branding e futebol. www.plau.co/type-workshop INSCRIÇÕES ABERTAS 26 E 27 de Abril • 10-18h realização apoio TIPOSDA COPA2 ª E D I Ç Ã O W O R K S H O P http://plau.co/type-workshop
  38. 38. email rodrigo@plau.co behance behance.net/plau twitter PlauStudio facebook facebook.com/plaudesign créditos design: Rodrigo Saiani, Lucas Campoi, Lucas Anelli, Gustavo Saiani (Poema Software), Luisa Borja, Juliana Valverde, Eduardo Mattos.
  39. 39. FONTES E FONTES Básicos da tipografia responsiva: http://ia.net/blog/responsive-typography-the-basics Details in Typography, Jost Hochuli – Hyphen Press: http://goo.gl/Vbrs4H Os elementos do estilo tipográfico, Robert Bringhurst – Cosac Naify: http://goo.gl/sAAxZ Typographie, Emil Ruder – Verlag Niggli AG: http://goo.gl/AaP4v Tipografia mais relevante para web (Tipografia Modular): http://goo.gl/YaEgTV Calculadora de módulos tipográficos: http://modularscale.com/ Normalize CSS: http://nicolasgallagher.com/about-normalize-css/ Elementos do estilo tiopgráfico para Web: http://webtypography.net/ Ótima apresentação sobre web type em inglês: http://www.slideshare.net/tomlewek Tipografia, Ritmo Vertical: http://typecast.com/blog/4-simple-steps-to-vertical-rhythm Ícones feitos com Webfonts: http://symbolset.com/icons Abordagem “Type First”: http://goo.gl/y0DrjF Jason Santa Maria on Web typography: https://vimeo.com/34178417 Apresentação composta com a fonte Plau (Plau) e Parmigiano Typewriter (Jonathan Pierini, Riccardo Olocco, Rodrigo Saiani). Ícones SS Icons: http://symbolset.com/icons

×