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
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
240
How to be the best web designer in the world.
swwweet
5
1k
Design for loading
swwweet
4
420
Mobile First: as difficult as doing things right
swwweet
217
8.6k
One Size Fits None
swwweet
12
770
One Size Fits None - From the Front 2013
swwweet
2
620
Responsively Responsive
swwweet
23
1.5k
The future of code
swwweet
4
450
RWD: Dealing with navigation
swwweet
5
400
Other Decks in Design
See All in Design
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.1k
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.1k
WHAT ARE ME?
takuro_nakajima
PRO
0
1.6k
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
PRO
0
130
Sunny Day Storyboard
ctagulao98
0
140
Information Architects: The Missing Link in Design Systems
soysaucechin
0
130
TrollsTopia: Funtography- Part 1
kenijam
1
220
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.9k
Tuzukuru解説ブック
atsumaru1377
0
120
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
1.1k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
680
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
8.2k
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Designing for humans not robots
tammielis
247
25k
How to name files
jennybc
65
94k
Building an army of robots
kneath
300
41k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Docker and Python
trallard
35
2.7k
Code Review Best Practice
trishagee
56
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
The World Runs on Bad Software
bkeepers
PRO
61
6.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
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!