Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
La letra con píxel entra
Search
Swwweet
April 20, 2013
Design
1.2k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
La letra con píxel entra
Presentación de Marta Armada en Entretipos el 20/04/13
Swwweet
April 20, 2013
Transcript
66 slides
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!
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
430
How to be the best web designer in the world.
swwweet
6
1.4k
Design for loading
swwweet
5
610
Mobile First: as difficult as doing things right
swwweet
225
10k
One Size Fits None
swwweet
12
940
One Size Fits None - From the Front 2013
swwweet
2
790
Responsively Responsive
swwweet
23
1.7k
The future of code
swwweet
4
690
RWD: Dealing with navigation
swwweet
5
590
Other Decks in Design
See All in Design
Typographie et intégration web
goetter
0
190
Spectrum Tokyo Meetup #26「できることが増えた時、デザイナーは何に時間を使うべきか」
muture
PRO
1
410
分裂するデザイン、取り残される空間—インクルーシブデザインスタジオが建築をやる理由
culumu
0
190
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
tinykitten
1
680
AI-DLC AI駆動開発ライフサイクルとAI-DLC Worlflows V2のご紹介
fatsushi
4
2.2k
Luna's Light
shemeetscity
0
730
Kouseki | CREATIVE CLASS成果物
yuri9911
0
280
みんながデザインを担う組織へ。急加速する開発組織でのデザイナーの戦略
mukai_takeru
0
430
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
abokadotyann
2
500
染み出し好きの、 染み出しコントロール論
mukai_takeru
0
530
Look Dev Meetup #50
baku89
1
540
ロゴマークは「象徴」だ! 〜JAWS FESTA in AKITA 2026のロゴマークに寄せて〜
hachihcah
0
470
Featured
See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
470
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.2k
Building Adaptive Systems
keathley
44
3.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
35
2.9k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
6
1.3k
Making the Leap to Tech Lead
cromwellryan
135
10k
First, design no harm
axbom
PRO
2
1.4k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
3.3k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
560
Why Our Code Smells
bkeepers
PRO
340
58k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.5k