Co-working: Contato PTO - 10/04

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>

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

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

www.plau.co/type-workshop
Aprenda os fundamentos do
desenho tipográﬁco em um
workshop que mistura tipograﬁa,
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

Co-working: Contato PTO - 10/04

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Co-working: Contato PTO - 10/04