• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Tipografia para Web - Plau Branding, Type & Design.
 

Tipografia para Web - Plau Branding, Type & Design.

on

  • 822 views

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

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.

Statistics

Views

Total Views
822
Views on SlideShare
807
Embed Views
15

Actions

Likes
11
Downloads
17
Comments
1

2 Embeds 15

http://plau.co 12
http://www.slideee.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Maravilhosa a palestra. O conteúdo é muito dez pra quem quer mergulhar nesse assunto tão pouco explorado por muitos e tão bem pelo Rodrigo. Parabéns.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tipografia para Web - Plau Branding, Type & Design. Tipografia para Web - Plau Branding, Type & Design. Presentation Transcript

    • p PTO DE CONTATO CO-WORKING · 10/04
    • <!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>
    • pRODRIGO SAIANI
    • TIPOGRAFIA Fontes Fontes Custom Lettering Workshops BRANDING Design estratégico Identidade Visual Embalagem Sinalização SITES Apps E-commerce Sites
    • 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
    • MOTIVA SANS Um pequeno jabuti xereta viu dez cegonhas felizes.
    • <ol> <li>Tipografia</li> <li>Princípios</li> <li>Webfonts</li> <li>Ferramentas</li> <li>Cases</li> </ol>
    • Elemento básico da comunicação. Impressa, digital ou qualquer meio visual.
    • Type design Composição Lettering Caligrafia
    • Design de interação é como a engenharia: o importante não é achar o design perfeito, mas equilibrar melhor as limitações. information architects
    • Leitura Ritmo Contraste Proporção
    • Ninguém lê letra por letra, e sim por blocos gráficos. LEITURA
    • RITMO A quantidade de informação e hiperlinks em meios digitais dificulta e torna mais relevante a busca por ritmo.
    • 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
    • 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
    • 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.
    • REFERÊNCIA Os princípios clássicos da tipografia são ainda mais importantes nos meios digitais
    • MOBILE PRIMEIRO CONTEÚDO PRIMEIRO TIPOGRAFIA PRIMEIRO
    • FONTE Plau-Regular.otf WEBFONT Plau-Regular.ttf Plau-Regular.woff Plau-Regular.eot Plau-Regular.svg
    • 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; }
    • Compatibilidade para todos os dispositivos
    • facebook = facebook SS SOCIAL CIRCLE
    • FORÇA DA MARCA VARIEDADE FLEXIBILIDADE ICONES/IMAGENS RESPONSIVAS PERFORMANCE FORMATOS NAVEGADORES QUALIDADE* + –
    • Um a um. Assinatura. Self-host/Cloud-host. LICENCIAMENTO
    • ! SERVIÇOS
    • ScreenSmart e Reading Edge - Feitas especificamente para tela.
    • ScreenSmart e Reading Edge - Feitas especificamente para tela.
    • TYPECAST Teste webfonts no navegador.
    • TESTE DE FONTES Arraste e teste qualquer fonte para features opentype, hinting etc. http://www.impallari.com/testing/
    • LETTERING.JS Controle letra por letra em elementos HTML.
    • WHATFONTTOOL Descubra quais webfonts os sites estão usando. whatfonttool.com
    • GUIA DE ESTILOS Facilita a criação de novas seções para um determinado site e padroniza a linguagem visual dos elementos.
    • exemplo MEDIUM Tipografia impecável e foco na leitura. Comentários feitos parágrafo por parágrafo. medium.com
    • iA WRITER Tipografia responsiva. Foco em escrever, não em formatar a página. Fonte: Nitti (Bold Monday).
    • CRYSTIAN CRUZ E MARINA CHACCUR
    • CRYSTIAN CRUZ E MARINA CHACCUR
    • 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
    • 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.
    • 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