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
910
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
280
How to be the best web designer in the world.
swwweet
6
1.1k
Design for loading
swwweet
5
460
Mobile First: as difficult as doing things right
swwweet
222
8.9k
One Size Fits None
swwweet
12
810
One Size Fits None - From the Front 2013
swwweet
2
660
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
510
Other Decks in Design
See All in Design
ito aya|Portfolio2409
itoaya116
0
250
Dreamia
elsh
0
150
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
Design System for training program
mct
0
130
アフォーダンスとシグニファイア
ryokanakai
0
300
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
250
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
13
5.9k
Test Revisionista
olgastoryboard
0
110
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
160
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
460
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
5
47k
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
330
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
Rails Girls Zürich Keynote
gr2m
93
13k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Designing the Hi-DPI Web
ddemaree
280
34k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Facilitating Awesome Meetings
lara
49
6.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
2
45
The Language of Interfaces
destraynor
154
24k
How to Ace a Technical Interview
jacobian
275
23k
Scaling GitHub
holman
458
140k
Six Lessons from altMBA
skipperchong
26
3.5k
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]