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
La letra con píxel entra
Search
Swwweet
April 20, 2013
Design
0
1.1k
La letra con píxel entra
Presentación de Marta Armada en Entretipos el 20/04/13
Swwweet
April 20, 2013
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.3k
Design for loading
swwweet
5
520
Mobile First: as difficult as doing things right
swwweet
224
10k
One Size Fits None
swwweet
12
870
One Size Fits None - From the Front 2013
swwweet
2
720
Responsively Responsive
swwweet
23
1.6k
The future of code
swwweet
4
590
RWD: Dealing with navigation
swwweet
5
510
Other Decks in Design
See All in Design
CursorでAI活用のナレッジベースを構築する
kanzaki
0
740
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
650
decksh object reference
ajstarks
2
1.3k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
180
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
210
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
150
#Dubois Challenge 2025: Economics
ajstarks
1
180
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
310
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
330
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
390
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Invisible Side of Design
smashingmag
301
51k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
RailsConf 2023
tenderlove
30
1.2k
Designing for Performance
lara
610
69k
Docker and Python
trallard
46
3.6k
Writing Fast Ruby
sferik
629
62k
Music & Morning Musume
bryan
46
6.8k
We Have a Design System, Now What?
morganepeng
53
7.8k
For a Future-Friendly Web
brad_frost
180
9.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
Transcript
MARTA ARMADA @MARTUISHERE #ENTRETIPOS la letra con píxel entra
¡hola!
¡hola! me llamo Marta y diseño webs en swwweet.com
¿y tú?
informationarchitects.net/blog/the-web-is-all-about-typography-period
Optimizar la tipogra a es optimizar la legibilidad, la accesibilad,
la usabilidad, el equilibrio gráfico general. [...] Entonces, ¿por qué se descuida tanto este tema? “ ” Oliver Reichenstein
flickr.com/photos/alexanderwolf/2452809327
None
diepresse.com
meneame.net
None
¿por qué?
arial georgia verdana courier new times new roman
None
colly.com/journal/
seedconference.com/seed
¡cuida la web! ♥ ♥ ♥ ♥ ♥ ♥ ♥
♥ ♥ ♥
None
None
.mi-texto{ width: 30em; }
informationarchitects.net/blog/100e2r revista vs. pantalla
bit.ly/16pixelstype
None
None
contrastrebellion.com
D ET ALLES
DETALLES
rufián coliflor
ru án coli or
h1{ text-rendering: optimizeLegibility; }
"t'estimo"
“t’estimo”
“t’estimo” “ ’ ” “ ” '
«t’estimo» « » « »
– — − × … & – — - ×
… &
Llegó en el AVE de las 13:46.
Llegó en el AVE de las 13:46.
abbr{ font-variant: small-caps; }
ve ido de có el
h1{ font-feature-settings: “dlig”1; }
h1{ -webkit-font-feature-settings: “dlig”1; -moz-font-feature-settings: “dlig=1”; font-feature-settings: “dlig”1; }
webcatbcn.com
ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html
web fonts
web fonts
WEBFONTS
bfonts
@font-face{ font-family: “Adelle”; src: url(fonts/Adelle.woff); } body{ font-family: Adelle, Georgia,
serif; }
@font-face{ font-family: “Adelle”; src: url(fonts/AdelleBold.woff); font-weight: bold; } h1{ font-family:
Adelle, Georgia, serif; font-weight: bold; }
woff svg otf ttf eot
woff svg otf ttf eot IE4 IE9 Safari 3.1 Safari
3.1 Safari 3.1 Safari 5 Safari 5 Firefox 3.1 Firefox 3.1 Firefox 3.6 Chrome 4 Chrome 4 Chrome 6 iOS 3.2 Android 3 iOS 5 iOS 4.2 Android 2.2 Android 2.2
@font-face{ font-family: “Adelle”; src: url(Adelle.eot) format(‘embedded-opentype’); src: url(Adelle.eot#iefix) format(‘embedded-opentype’), url(Adelle.woff)
format(‘woff’), url(Adelle.ttf) format(‘truetype’), url(Adelle.svg#svgAdelle) format(‘svg’); }
None
fontsquirrel.com/tools/webfont-generator
typekit.com
myfonts.com
¿eres tipógrafo?
theharrietseries.com
podemos hacerlo mejor
jasonsantamaria.com
kitchensinkstudios.com
digg.com
hola.jetblue.com
arsenal.com
greygoose.com
@MARTUISHERE
[email protected]
¡gracias!