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
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
The future of code
swwweet
4
560
RWD: Dealing with navigation
swwweet
5
480
Other Decks in Design
See All in Design
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
420
Dinosaur Mayhem
storyartist
PRO
0
160
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
300
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
310
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
130
発表資料テンプレート / My slide template
thatblue
0
260
250131_product meetup
motokoishida
0
140
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
290
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
4.4k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
4.9k
How to go from research data to insights?
mastervicedesign
0
250
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Faster Mobile Websites
deanohume
306
31k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Side Projects
sachag
452
42k
Designing for Performance
lara
605
69k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Building Adaptive Systems
keathley
40
2.5k
GraphQLとの向き合い方2022年版
quramy
45
14k
A better future with KSS
kneath
238
17k
Music & Morning Musume
bryan
46
6.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
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!