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.2k
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
350
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
225
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
600
RWD: Dealing with navigation
swwweet
5
520
Other Decks in Design
See All in Design
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
「UXとUIの違い」v2
shirasu3
0
260
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
190
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
150
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
230
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
520
佐藤千晶|ポートフォリオ
chimi_chia
0
210
mount_company_profile
mount_inc
0
2.3k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3.1k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Navigating Team Friction
lara
190
15k
Practical Orchestrator
shlominoach
190
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
YesSQL, Process and Tooling at Scale
rocio
173
15k
What's in a price? How to price your products and services
michaelherold
246
12k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Designing Experiences People Love
moore
142
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
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!