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
224
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
590
RWD: Dealing with navigation
Avatar for Swwweet swwweet
5
510

Other Decks in Design

See All in Design
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
Avatar for bebe bebe
0
820
AIで加速するアクセシビリティのこれから
Avatar for Rikiya Ihara / magi magi1125
4
670
Cyber Heart Online Book
Avatar for Hannah hjnasby
0
180
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
470
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう！
Avatar for コネクリ connecre
1
100
AI時代に、僕たちデザイナーはどう歩むか
Avatar for kim kazuhirokimura
0
370
mento Design Team Portfolio
Avatar for mento _official mento0fficial
1
690
デフォルトの16:9（960*540px）のケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3.4k
デザイナー向けフライル説明資料
Avatar for Toshiaki Arai toshiblues
0
130
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
840
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
520
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
260

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
71
19k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k

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!