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
940
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
320
How to be the best web designer in the world.
swwweet
6
1.2k
Design for loading
swwweet
5
490
Mobile First: as difficult as doing things right
swwweet
223
9.5k
One Size Fits None
swwweet
12
840
One Size Fits None - From the Front 2013
swwweet
2
700
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
560
Other Decks in Design
See All in Design
LLMによるRAG評価用合成テストデータの生成
licux
6
810
発表資料テンプレート / My slide template
thatblue
0
260
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
710
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
270
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
930
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
280
Masked shaman-Storyboard 2025
ashley0521
0
220
How to go from research data to insights?
mastervicedesign
0
250
Goodpatch Tour💙 / We are hiring!
goodpatch
31
810k
LayerX DesignersDeck
layerx
PRO
0
6.3k
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.8k
Personal Story Sequence - Vendetta(WIP)
elrns88
0
450
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
610
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Done Done
chrislema
183
16k
For a Future-Friendly Web
brad_frost
176
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Thoughts on Productivity
jonyablonski
69
4.5k
Six Lessons from altMBA
skipperchong
27
3.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470
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]