La letra con píxel entra

Presentación de Marta Armada en Entretipos el 20/04/13

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
9. diepresse.com
10. meneame.net
12. ¿por qué?
13. arial georgia verdana courier new times new roman
15. colly.com/journal/
16. seedconference.com/seed
17. ¡cuida la web! ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥
20. .mi-texto{ width: 30em; }
21. informationarchitects.net/blog/100e2r revista vs. pantalla
22. bit.ly/16pixelstype
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’); }
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 marta@swwweet.com ¡gracias!