La letra con píxel entra

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 marta@swwweet.com ¡gracias!