tipografia para web - plau branding, type & design
DESCRIPTION
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.TRANSCRIPT
![Page 1: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/1.jpg)
p PTO DE CONTATO CO-WORKING · 10/04
![Page 2: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/2.jpg)
<!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>
![Page 3: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/3.jpg)
pRODRIGO SAIANI
![Page 4: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/4.jpg)
TIPOGRAFIA
Fontes
Fontes Custom
Lettering
Workshops
BRANDING
Design estratégico
Identidade Visual
Embalagem
Sinalização
SITES
Apps
E-commerce
Sites
![Page 5: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/5.jpg)
![Page 6: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/6.jpg)
Plau NiramekkoSelulloid 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
![Page 7: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/7.jpg)
![Page 8: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/8.jpg)
![Page 9: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/9.jpg)
![Page 10: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/10.jpg)
![Page 11: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/11.jpg)
MOTIVA SANS
Um pequeno jabuti xereta viu dez cegonhas felizes.
![Page 12: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/12.jpg)
![Page 13: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/13.jpg)
![Page 14: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/14.jpg)
![Page 15: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/15.jpg)
<ol> <li>Tipografia</li> <li>Princípios</li> <li>Webfonts</li> <li>Ferramentas</li> <li>Cases</li></ol>
![Page 16: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/16.jpg)
![Page 17: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/17.jpg)
Elemento básico da comunicação.
Impressa, digital ou qualquer meio visual.
![Page 18: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/18.jpg)
Type designComposição
LetteringCaligrafia
![Page 19: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/19.jpg)
Design de interação é como a engenharia: o importante não é achar o design perfeito, mas equilibrar melhor as limitações.
information architects
![Page 20: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/20.jpg)
![Page 21: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/21.jpg)
LeituraRitmo
ContrasteProporção
![Page 22: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/22.jpg)
Ninguém lê letra por letra, e sim por blocos gráficos.
LEITURA
![Page 23: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/23.jpg)
RITMOA quantidade de informação e hiperlinks em meios digitais dificulta e torna mais relevante a busca por ritmo.
![Page 24: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/24.jpg)
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
![Page 25: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/25.jpg)
CONTRASTEA 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
![Page 26: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/26.jpg)
PROPORÇÃORelaçã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) -10Ic 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.
![Page 27: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/27.jpg)
REFERÊNCIAOs princípios clássicos da tipografia são ainda mais importantes nos meios digitais
![Page 28: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/28.jpg)
MOBILE PRIMEIROCONTEÚDO PRIMEIRO
TIPOGRAFIA PRIMEIRO
![Page 29: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/29.jpg)
![Page 30: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/30.jpg)
FONTE
Plau-Regular.otf
WEBFONT
Plau-Regular.ttf
Plau-Regular.woff
Plau-Regular.eot
Plau-Regular.svg
![Page 31: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/31.jpg)
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;
}
![Page 32: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/32.jpg)
Compatibilidade para todos os dispositivos
![Page 33: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/33.jpg)
![Page 34: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/34.jpg)
=
SS SOCIAL CIRCLE
![Page 35: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/35.jpg)
FORÇA DA MARCA
VARIEDADE
FLEXIBILIDADE
ICONES/IMAGENS RESPONSIVAS
PERFORMANCE
FORMATOS
NAVEGADORES
QUALIDADE*
+ –
![Page 36: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/36.jpg)
Um a um.
Assinatura.
Self-host/Cloud-host.
LICENCIAMENTO
![Page 37: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/37.jpg)
!
SERVIÇOS
![Page 38: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/38.jpg)
ScreenSmart e Reading Edge - Feitas especificamente para tela.
![Page 39: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/39.jpg)
ScreenSmart e Reading Edge - Feitas especificamente para tela.
![Page 40: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/40.jpg)
![Page 41: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/41.jpg)
TYPECASTTeste webfonts no navegador.
![Page 42: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/42.jpg)
TESTE DE FONTESArraste e teste qualquer fonte para features opentype, hinting etc.
http://www.impallari.com/testing/
![Page 43: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/43.jpg)
LETTERING.JSControle letra por letra em elementos HTML.
![Page 44: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/44.jpg)
WHATFONTTOOLDescubra quais webfonts os sites estão usando.
whatfonttool.com
![Page 45: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/45.jpg)
GUIA DE ESTILOSFacilita a criação de novas seções para um determinado site e padroniza a linguagem visual dos elementos.
![Page 46: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/46.jpg)
![Page 47: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/47.jpg)
exemplo
MEDIUMTipografia impecável e foco na leitura.
Comentários feitos parágrafo por parágrafo.
medium.com
![Page 48: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/48.jpg)
iA WRITERTipografia responsiva.
Foco em escrever, não em formatar a página.
Fonte: Nitti (Bold Monday).
![Page 49: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/49.jpg)
CRYSTIAN CRUZ E MARINA CHACCUR
![Page 50: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/50.jpg)
CRYSTIAN CRUZ E MARINA CHACCUR
![Page 51: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/51.jpg)
![Page 52: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/52.jpg)
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
TIPOS DA
COPA2 ª E D I Ç Ã O
W O R K S H O P
http://plau.co/type-workshop
![Page 53: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/53.jpg)
email [email protected] 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.
![Page 54: Tipografia para Web - Plau Branding, Type & Design](https://reader033.vdocument.in/reader033/viewer/2022052505/55611029d8b42a89138b505f/html5/thumbnails/54.jpg)
FONTES E FONTESBá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