Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
La letra con píxel entra
Swwweet
April 20, 2013
Design
0
880
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
170
How to be the best web designer in the world.
swwweet
5
890
Design for loading
swwweet
4
350
Mobile First: as difficult as doing things right
swwweet
213
7.8k
One Size Fits None
swwweet
12
680
One Size Fits None - From the Front 2013
swwweet
2
540
Responsively Responsive
swwweet
23
1.4k
The future of code
swwweet
4
340
RWD: Dealing with navigation
swwweet
5
320
Other Decks in Design
See All in Design
モンストの組織とUIデザイナー業務の紹介
mixil
0
530
A Walk in the Suburbs
sabina415
0
190
Kurashiru Brand Guideline
delyinc
0
3.2k
UIを完全に理解して、 プロダクトをチョット良くする
tojimasan
1
290
顧客信頼性向上のためのデザイン
mizuena
1
490
未来をデザインするDesignOps / DesignOpsMeets #1
takeshiinotsume
2
420
decksh object reference
ajstarks
2
480
Understanding UX Design Proces - デザインリテラシーを高める方法
bookslope
0
110
(Selection) Tanuki And Tangerine
greensmile
0
150
We’re Not doing Design Systems Properly and That’s Okay
morganepeng
2
450
Functionalism Architecture: according to Wikipedia
juliaso
0
100
DL2022 Zoe Rose - ‘Scientific design methods’ and ‘applied creativity’: a lost history
uxaustralia
PRO
0
160
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
GraphQLとの向き合い方2022年版
quramy
20
9.9k
Producing Creativity
orderedlist
PRO
335
38k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.6k
Practical Orchestrator
shlominoach
178
8.9k
Navigating Team Friction
lara
177
12k
Product Roadmaps are Hard
iamctodd
38
7.7k
Support Driven Design
roundedbygravity
88
8.9k
Why Our Code Smells
bkeepers
PRO
326
55k
Designing for humans not robots
tammielis
245
24k
In The Pink: A Labor of Love
frogandcode
132
21k
Side Projects
sachag
451
37k
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!