Tipografía en la web

Transcript

1. 1.

   TIPOG AFÍA EN WEB TIPOG AFÍA EN WEB Javier Usobiaga

   & Marta Armada SevillaTipo Junio 2012 #
2. 2.

   MA TUISHERE MA TUISHERE HTMLBO HTMLBO

3. 3.

   l 95% de la información en la web es lenguage

   escrito. “ — Oliver Reichenstein, 2006
4. 4.

   l 95% de la información en la web es lenguage

   escrito. “ — Oliver Reichenstein, 2006 El 5% restante son fotos de gaticos.
5. 5.

   ¿POR QUÉ HACEMOS E O? E TONCES... E TONCES... ¿POR

   QUÉ HACEMOS E O?
6. 6.

   None
7. 7.

   None
8. 8.

   WTF?

9. 9.

   Back to basics lo que siempre hemos podido hacer (y

   no hemos he o)
10. 10.

    http://www.dontfeartheinternet.com/css/don’t-fear-web-typography

11. 11.

    None
12. 12.

    CSS CSS U POCO DE U POCO DE

13. 13.

    None
14. 14.

    color font-size font-family text- decoration line-height text-transform

15. 15.

    color font-size font-family text- decoration line-height text-transform body { font-family:

    Georgia, serif; }
16. 16.

    None
17. 17.

    color font-size font-family text- decoration line-height text-transform body { color:

    #355465; }
18. 18.

    None
19. 19.

    http://contrastrebellion.com/

20. 20.

    color font-size font-family text- decoration line-height text-transform body { font-size:

    17px; }
21. 21.

    None
22. 22.

    http://bit.ly/16pixelstype

23. 23.

    color font-size font-family text- decoration line-height text-transform h2 { text-transform:

    uppercase; }
24. 24.

    None
25. 25.

    color font-size font-family text- decoration line-height text-transform a { text-decoration:

    none; }
26. 26.

    None
27. 27.

    color font-size font-family text- decoration line-height text-transform p { line-height:

    27px; }
28. 28.

    None
29. 29.

    CA ÑO CA ÑO Y AHOR CON Y AHOR CON

30. 30.

    None
31. 31.

    font-style text-align font-weight contraste ornamentos bordes

32. 32.

    font-style text-align font-weight contraste ornamentos bordes .run-in { font-weight: bold;

    }
33. 33.

    None
34. 34.

    font-style text-align font-weight contraste ornamentos bordes h2 { font-style: italic;

    }
35. 35.

    None
36. 36.

    font-style text-align font-weight contraste ornamentos bordes h2 { text-align: center;

    }
37. 37.

    None
38. 38.

    font-style text-align font-weight contraste ornamentos bordes h2 { border: 4px

    double #a7b5bc; }
39. 39.

    None
40. 40.

    font-style text-align font-weight contraste ornamentos bordes .with { color: #a7b5bc;

    }
41. 41.

    None
42. 42.

    font-style text-align font-weight contraste ornamentos bordes .ornament { color: #901b2e;

    }
43. 43.

    None
44. 44.

    Webfonts si usas erdana, que sea porque quieres

45. 45.

    HA A AHORA TENÍAMOS: HA A AHORA TENÍAMOS: Arial -

    Arial Black Verdana Trebuchet Georgia Times New Roman Courier New Comic Sans
46. 46.

    HA A AHORA TENÍAMOS: HA A AHORA TENÍAMOS: Arial -

    Arial Black Georgia Times New Roman Courier New Trebuchet Comic Sans Era una excusa fantástica, ¿verdad?
47. 47.

    http://seedconference.com/seed.php

48. 48.

    FONT-FACE FONT-FACE

49. 49.

    @font-face { font-family: Museo; src: url(../fonts/Museo.otf); } h1, h2 {

    font-family: Museo, Georgia, serif; }
50. 50.

    @font-face { font-family: Museo; src: url(../fonts/Museo.otf); } @font-face { font-family:

    Museo; src: url(../fonts/Museobold.otf); font-weight: bold; } h1, h2 { font-family: Museo, Georgia, serif; } h1 { font-weight: bold; }
51. 51.

    @font-face { font-family: Museo; src: url(fonts/Museo.eot?#iefix) format(‘embedded-opentype’), url(fonts/Museo.woff) format(‘woff’), url(fonts/Museo.ttf)

    format(‘truetype’), url(fonts/Museo.svg#svgMuseo) format(‘svg’); } ttf svg eot WOFF
52. 52.

    http://www.fontsquirrel.com/fontface/generator

53. 53.

    BUSCA ? BUSCA ? ¿SABES DÓNDE ¿SABES DÓNDE

54. 54.

    http://www.google.com/webfonts

55. 55.

    https://typekit.com/

56. 56.

    http://fontdeck.com/

57. 57.

    http://www.myfonts.com/

58. 58.

    Explora los límites tienes fuentes y efe os; ahora, ¡úsalos!

59. 59.

    MUNDO EAL™ MUNDO EAL™

60. 60.

    None
61. 61.

    None
62. 62.

    None
63. 63.

    UN MU DO MEJOR UN MU DO MEJOR ES POSIB

    ES POSIB
64. 64.

    http://trentwalton.com/

65. 65.

    http://trentwalton.com/

66. 66.

    http://trentwalton.com/

67. 67.

    http://elliotjaystocks.com/blog

68. 68.

    http://elliotjaystocks.com/blog

69. 69.

    http://kitchensinkstudios.com/

70. 70.

    http://lostworldsfairs.com/

71. 71.

    http://lostworldsfairs.com/

72. 72.

    http://2012.ampersandconf.com/

73. 73.

    ¿P EGUNTAS? ¿P EGUNTAS? ¡GRACIAS! ¡GRACIAS! @htmlboy @martuishere hola@swwweet.com