Post on 24-May-2015
description
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 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
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 designComposição
LetteringCaligrafia
Design de interação é como a engenharia: o importante não é achar o design perfeito, mas equilibrar melhor as limitações.
information architects
LeituraRitmo
ContrasteProporção
Ninguém lê letra por letra, e sim por blocos gráficos.
LEITURA
RITMOA 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
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
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.
REFERÊNCIAOs princípios clássicos da tipografia são ainda mais importantes nos meios digitais
MOBILE PRIMEIROCONTEÚ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
=
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.
TYPECASTTeste webfonts no navegador.
TESTE DE FONTESArraste e teste qualquer fonte para features opentype, hinting etc.
http://www.impallari.com/testing/
LETTERING.JSControle letra por letra em elementos HTML.
WHATFONTTOOLDescubra quais webfonts os sites estão usando.
whatfonttool.com
GUIA DE ESTILOSFacilita a criação de novas seções para um determinado site e padroniza a linguagem visual dos elementos.
exemplo
MEDIUMTipografia impecável e foco na leitura.
Comentários feitos parágrafo por parágrafo.
medium.com
iA WRITERTipografia 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
TIPOS DA
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 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