Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Tipografía en la web
Search
Swwweet
June 02, 2012
Design
6
960
Tipografía en la web
Presentación en SevillaTipo 2012.
Swwweet
June 02, 2012
Tweet
Share
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
340
How to be the best web designer in the world.
swwweet
6
1.2k
Design for loading
swwweet
5
510
Mobile First: as difficult as doing things right
swwweet
224
9.9k
One Size Fits None
swwweet
12
860
One Size Fits None - From the Front 2013
swwweet
2
710
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
590
Other Decks in Design
See All in Design
デザイナー向けフライル説明資料
toshiblues
0
130
Bulletproof Design System with TypeScript
takanorip
7
4.1k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
140
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
180
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.1k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
「UXとUIの違い」v2
shirasu3
0
230
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
550
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
300
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Done Done
chrislema
185
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Unsuck your backbone
ammeep
671
58k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
TIPOG AFÍA EN WEB TIPOG AFÍA EN WEB Javier Usobiaga
& Marta Armada SevillaTipo Junio 2012 #
MA TUISHERE MA TUISHERE HTMLBO HTMLBO
l 95% de la información en la web es lenguage
escrito. “ — Oliver Reichenstein, 2006
l 95% de la información en la web es lenguage
escrito. “ — Oliver Reichenstein, 2006 El 5% restante son fotos de gaticos.
¿POR QUÉ HACEMOS E O? E TONCES... E TONCES... ¿POR
QUÉ HACEMOS E O?
None
None
WTF?
Back to basics lo que siempre hemos podido hacer (y
no hemos he o)
http://www.dontfeartheinternet.com/css/don’t-fear-web-typography
None
CSS CSS U POCO DE U POCO DE
None
color font-size font-family text- decoration line-height text-transform
color font-size font-family text- decoration line-height text-transform body { font-family:
Georgia, serif; }
None
color font-size font-family text- decoration line-height text-transform body { color:
#355465; }
None
http://contrastrebellion.com/
color font-size font-family text- decoration line-height text-transform body { font-size:
17px; }
None
http://bit.ly/16pixelstype
color font-size font-family text- decoration line-height text-transform h2 { text-transform:
uppercase; }
None
color font-size font-family text- decoration line-height text-transform a { text-decoration:
none; }
None
color font-size font-family text- decoration line-height text-transform p { line-height:
27px; }
None
CA ÑO CA ÑO Y AHOR CON Y AHOR CON
None
font-style text-align font-weight contraste ornamentos bordes
font-style text-align font-weight contraste ornamentos bordes .run-in { font-weight: bold;
}
None
font-style text-align font-weight contraste ornamentos bordes h2 { font-style: italic;
}
None
font-style text-align font-weight contraste ornamentos bordes h2 { text-align: center;
}
None
font-style text-align font-weight contraste ornamentos bordes h2 { border: 4px
double #a7b5bc; }
None
font-style text-align font-weight contraste ornamentos bordes .with { color: #a7b5bc;
}
None
font-style text-align font-weight contraste ornamentos bordes .ornament { color: #901b2e;
}
None
Webfonts si usas erdana, que sea porque quieres
HA A AHORA TENÍAMOS: HA A AHORA TENÍAMOS: Arial -
Arial Black Verdana Trebuchet Georgia Times New Roman Courier New Comic Sans
HA A AHORA TENÍAMOS: HA A AHORA TENÍAMOS: Arial -
Arial Black Georgia Times New Roman Courier New Trebuchet Comic Sans Era una excusa fantástica, ¿verdad?
http://seedconference.com/seed.php
FONT-FACE FONT-FACE
@font-face { font-family: Museo; src: url(../fonts/Museo.otf); } h1, h2 {
font-family: Museo, Georgia, serif; }
@font-face { font-family: Museo; src: url(../fonts/Museo.otf); } @font-face { font-family:
Museo; src: url(../fonts/Museobold.otf); font-weight: bold; } h1, h2 { font-family: Museo, Georgia, serif; } h1 { font-weight: bold; }
@font-face { font-family: Museo; src: url(fonts/Museo.eot?#iefix) format(‘embedded-opentype’), url(fonts/Museo.woff) format(‘woff’), url(fonts/Museo.ttf)
format(‘truetype’), url(fonts/Museo.svg#svgMuseo) format(‘svg’); } ttf svg eot WOFF
http://www.fontsquirrel.com/fontface/generator
BUSCA ? BUSCA ? ¿SABES DÓNDE ¿SABES DÓNDE
http://www.google.com/webfonts
https://typekit.com/
http://fontdeck.com/
http://www.myfonts.com/
Explora los límites tienes fuentes y efe os; ahora, ¡úsalos!
MUNDO EAL™ MUNDO EAL™
None
None
None
UN MU DO MEJOR UN MU DO MEJOR ES POSIB
ES POSIB
http://trentwalton.com/
http://trentwalton.com/
http://trentwalton.com/
http://elliotjaystocks.com/blog
http://elliotjaystocks.com/blog
http://kitchensinkstudios.com/
http://lostworldsfairs.com/
http://lostworldsfairs.com/
http://2012.ampersandconf.com/
¿P EGUNTAS? ¿P EGUNTAS? ¡GRACIAS! ¡GRACIAS! @htmlboy @martuishere
[email protected]