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
890
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
240
How to be the best web designer in the world.
swwweet
5
1k
Design for loading
swwweet
4
420
Mobile First: as difficult as doing things right
swwweet
217
8.6k
One Size Fits None
swwweet
12
770
One Size Fits None - From the Front 2013
swwweet
2
620
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
1k
The future of code
swwweet
4
450
Other Decks in Design
See All in Design
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1.1k
3D空間を扱うUI表現とユーザビリティ
akinen
0
480
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
PRO
0
130
ウェブディレクターを救うBacklog
wattlaa
0
320
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
0
150
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
180
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
420
Breaking News on the Web
souvikdg
0
100
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
1
540
Apple HIGのススメ
temoki
0
110
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
520
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
350
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
63k
Thoughts on Productivity
jonyablonski
60
3.9k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Invisible Customer
myddelton
114
12k
Debugging Ruby Performance
tmm1
70
11k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Practical Orchestrator
shlominoach
183
9.8k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
A designer walks into a library…
pauljervisheath
201
23k
How STYLIGHT went responsive
nonsquared
92
4.9k
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]