tipografia para web - plau branding, type & design

54
p PTO DE CONTATO CO-WORKING · 10/04

Upload: rodrigo-saiani

Post on 24-May-2015

1.355 views

Category:

Design


4 download

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

p PTO DE CONTATO CO-WORKING · 10/04

Page 2: Tipografia para Web - Plau Branding, Type & Design

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

pRODRIGO SAIANI

Page 4: Tipografia para Web - Plau Branding, Type & Design

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
Page 6: Tipografia para Web - Plau Branding, Type & Design

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
Page 8: Tipografia para Web - Plau Branding, Type & Design
Page 9: Tipografia para Web - Plau Branding, Type & Design
Page 10: Tipografia para Web - Plau Branding, Type & Design
Page 11: Tipografia para Web - Plau Branding, Type & Design

MOTIVA SANS

Um pequeno jabuti xereta viu dez cegonhas felizes.

Page 12: Tipografia para Web - Plau Branding, Type & Design
Page 13: Tipografia para Web - Plau Branding, Type & Design
Page 14: Tipografia para Web - Plau Branding, Type & Design
Page 15: Tipografia para Web - Plau Branding, Type & Design

<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
Page 17: Tipografia para Web - Plau Branding, Type & Design

Elemento básico da comunicação.

Impressa, digital ou qualquer meio visual.

Page 18: Tipografia para Web - Plau Branding, Type & Design

Type designComposição

LetteringCaligrafia

Page 19: Tipografia para Web - Plau Branding, Type & Design

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
Page 21: Tipografia para Web - Plau Branding, Type & Design

LeituraRitmo

ContrasteProporção

Page 22: Tipografia para Web - Plau Branding, Type & Design

Ninguém lê letra por letra, e sim por blocos gráficos.

LEITURA

Page 23: Tipografia para Web - Plau Branding, Type & Design

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

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

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

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

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

MOBILE PRIMEIROCONTEÚDO PRIMEIRO

TIPOGRAFIA PRIMEIRO

Page 29: Tipografia para Web - Plau Branding, Type & Design
Page 30: Tipografia para Web - Plau Branding, Type & Design

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

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

Compatibilidade para todos os dispositivos

Page 33: Tipografia para Web - Plau Branding, Type & Design
Page 34: Tipografia para Web - Plau Branding, Type & Design

facebook

=

facebook

SS SOCIAL CIRCLE

Page 35: Tipografia para Web - Plau Branding, Type & Design

FORÇA DA MARCA

VARIEDADE

FLEXIBILIDADE

ICONES/IMAGENS RESPONSIVAS

PERFORMANCE

FORMATOS

NAVEGADORES

QUALIDADE*

+ –

Page 36: Tipografia para Web - Plau Branding, Type & Design

Um a um.

Assinatura.

Self-host/Cloud-host.

LICENCIAMENTO

Page 37: Tipografia para Web - Plau Branding, Type & Design

!

SERVIÇOS

Page 38: Tipografia para Web - Plau Branding, Type & Design

ScreenSmart e Reading Edge - Feitas especificamente para tela.

Page 39: Tipografia para Web - Plau Branding, Type & Design

ScreenSmart e Reading Edge - Feitas especificamente para tela.

Page 40: Tipografia para Web - Plau Branding, Type & Design
Page 41: Tipografia para Web - Plau Branding, Type & Design

TYPECASTTeste webfonts no navegador.

Page 42: Tipografia para Web - Plau Branding, Type & Design

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

LETTERING.JSControle letra por letra em elementos HTML.

Page 44: Tipografia para Web - Plau Branding, Type & Design

WHATFONTTOOLDescubra quais webfonts os sites estão usando.

whatfonttool.com

Page 45: Tipografia para Web - Plau Branding, Type & Design

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
Page 47: Tipografia para Web - Plau Branding, Type & Design

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

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

CRYSTIAN CRUZ E MARINA CHACCUR

Page 50: Tipografia para Web - Plau Branding, Type & Design

CRYSTIAN CRUZ E MARINA CHACCUR

Page 51: Tipografia para Web - Plau Branding, Type & Design
Page 52: Tipografia para Web - Plau Branding, Type & Design

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

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

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