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
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
harutaka Vision Deck
zenkigenforrecruit
0
220
デザイナー向けフライル説明資料
toshiblues
0
130
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
380
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
210
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.4k
Yumika Yamada Portfolio
yumii
0
1.6k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
800
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
Goodpatch Tour💙 / We are hiring!
goodpatch
31
890k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.4k
Featured
See All Featured
Docker and Python
trallard
46
3.6k
KATA
mclloyd
32
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Code Reviewing Like a Champion
maltzj
525
40k
4 Signs Your Business is Dying
shpigford
184
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Bash Introduction
62gerente
615
210k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Navigating Team Friction
lara
189
15k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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]