Upgrade to Pro — share decks privately, control downloads, hide ads and more …

La letra con píxel entra

Avatar for Swwweet 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

Avatar for Swwweet

Swwweet

April 20, 2013
Tweet

More Decks by Swwweet

See All by Swwweet
Wonders from the Full Stack Fest website
Avatar for Swwweet swwweet
1
340
How to be the best web designer in the world.
Avatar for Swwweet swwweet
6
1.2k
Design for loading
Avatar for Swwweet swwweet
5
510
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.9k
One Size Fits None
Avatar for Swwweet swwweet
12
860
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
710
Responsively Responsive
Avatar for Swwweet swwweet
23
1.6k
The future of code
Avatar for Swwweet swwweet
4
580
RWD: Dealing with navigation
Avatar for Swwweet swwweet
5
500

Other Decks in Design

See All in Design
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
910
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
Avatar for Akihide Kanai ka71
0
150
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
500
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.6k
デザインシステムの「種」を使って、受託開発を加速させる
Avatar for akane akane___ui
0
10k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
Avatar for Takahiro Hayashi taka_piya
1
2.1k
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
340
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
0
1.5k
freee + Product Design FY25Q4
Avatar for freee freee
4
15k
FigmaのFigmaファイルから学ぶTips & Tricks
Avatar for Hiroki Tani hilokifigma
0
620
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
1
230
AI動画生成ガチャ紹介
Avatar for Takatomo Torigoe piyo7
1
180

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
332
22k
Done Done
Avatar for chrislema chrislema
185
16k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
301
21k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k

Transcript

  1. MARTA ARMADA @MARTUISHERE #ENTRETIPOS la letra con píxel entra

  2. ¡hola!

  3. ¡hola! me llamo Marta y diseño webs en swwweet.com

  4. ¿y tú?

  5. informationarchitects.net/blog/the-web-is-all-about-typography-period

  6. 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

  7. flickr.com/photos/alexanderwolf/2452809327

  8. None

  9. diepresse.com

  10. meneame.net

  11. None

  12. ¿por qué?

  13. arial georgia verdana courier new times new roman

  14. None

  15. colly.com/journal/

  16. seedconference.com/seed

  17. ¡cuida la web! ♥ ♥ ♥ ♥ ♥ ♥ ♥

    ♥ ♥ ♥
  18. None
  19. None

  20. .mi-texto{ width: 30em; }

  21. informationarchitects.net/blog/100e2r revista vs. pantalla

  22. bit.ly/16pixelstype

  23. None
  24. None

  25. contrastrebellion.com

  26. D ET ALLES

  27. DETALLES

  28. rufián coliflor

  29. ru án coli or

  30. h1{ text-rendering: optimizeLegibility; }

  31. "t'estimo"

  32. “t’estimo”

  33. “t’estimo” “ ’ ” “ ” '

  34. «t’estimo» « » « »

  35. – — − × … & – — - ×

    … &

  36. Llegó en el AVE de las 13:46.

  37. Llegó en el AVE de las 13:46.

  38. abbr{ font-variant: small-caps; }

  39. ve ido de có el

  40. h1{ font-feature-settings: “dlig”1; }

  41. h1{ -webkit-font-feature-settings: “dlig”1; -moz-font-feature-settings: “dlig=1”; font-feature-settings: “dlig”1; }

  42. webcatbcn.com

  43. ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html

  44. web fonts

  45. web fonts

  46. WEBFONTS

  47. bfonts

  48. @font-face{ font-family: “Adelle”; src: url(fonts/Adelle.woff); } body{ font-family: Adelle, Georgia,

    serif; }

  49. @font-face{ font-family: “Adelle”; src: url(fonts/AdelleBold.woff); font-weight: bold; } h1{ font-family:

    Adelle, Georgia, serif; font-weight: bold; }

  50. woff svg otf ttf eot

  51. 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

  52. @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’); }
  53. None

  54. fontsquirrel.com/tools/webfont-generator

  55. typekit.com

  56. myfonts.com

  57. ¿eres tipógrafo?

  58. theharrietseries.com

  59. podemos hacerlo mejor

  60. jasonsantamaria.com

  61. kitchensinkstudios.com

  62. digg.com

  63. hola.jetblue.com

  64. arsenal.com

  65. greygoose.com

  66. @MARTUISHERE [email protected] ¡gracias!