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.6k
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
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
210
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
240
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
230
LLMによるRAG評価用合成テストデータの生成
licux
6
890
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
360
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
430
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
300
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
2
180
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
750
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
460
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
1k
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
9k
Featured
See All Featured
Designing for humans not robots
tammielis
252
25k
GraphQLとの向き合い方2022年版
quramy
46
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Gamification - CAS2011
davidbonilla
81
5.2k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
RailsConf 2023
tenderlove
30
1.1k
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!