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
330
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
500
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
One Size Fits None
Avatar for Swwweet swwweet
12
850
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
700
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
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
0
1.2k
Fem tips om ux-text • WSA-dagen 29 jan 2025
Avatar for Jonas Söderström jonas_blind_hen
PRO
0
180
Starry | Storyboards | Scene 1-21
Avatar for Gio Fortunato giofortuna_story
0
260
マズロー安達の弟子2期生、成功事例集（17人中17人が3ヶ月平均140万受注）
Avatar for マズロー安達 maslow_akkun
0
5.2k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
Avatar for trivia trivia
0
420
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
Avatar for Aki spring_aki
4
270
Cards | Storyboards
Avatar for Gio Fortunato giofortuna_story
0
260
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
320
PF_濵村ひろみ_202503
Avatar for 濱村ひろみ maru_design78
0
170
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
Avatar for Shingo Suzuki shingo2000
1
1.5k
商業デザインのアクセシビリティにおける倫理フレームワークの考察
Avatar for Yu Morita securecat
1
590
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
Avatar for keita keita_yoshikawa
0
120

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.8k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
41
7.3k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
Navigating Team Friction
Avatar for Lara Hogan lara
186
15k

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!