Tipografía en la web

Transcript

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

   & Marta Armada SevillaTipo Junio 2012 #

2. MA TUISHERE MA TUISHERE HTMLBO HTMLBO

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

   escrito. “ — Oliver Reichenstein, 2006

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

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

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

   QUÉ HACEMOS E O?
6. None
7. None

8. WTF?

9. Back to basics lo que siempre hemos podido hacer (y

   no hemos he o)

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

11. None

12. CSS CSS U POCO DE U POCO DE

13. None

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

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

    Georgia, serif; }
16. None

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

    #355465; }
18. None

19. http://contrastrebellion.com/

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

    17px; }
21. None

22. http://bit.ly/16pixelstype

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

    uppercase; }
24. None

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

    none; }
26. None

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

    27px; }
28. None

29. CA ÑO CA ÑO Y AHOR CON Y AHOR CON

30. None

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

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

    }
33. None

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

    }
35. None

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

    }
37. None

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

    double #a7b5bc; }
39. None

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

    }
41. None

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

    }
43. None

44. Webfonts si usas erdana, que sea porque quieres

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. 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. http://seedconference.com/seed.php

48. FONT-FACE FONT-FACE

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

    font-family: Museo, Georgia, serif; }

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. @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. http://www.fontsquirrel.com/fontface/generator

53. BUSCA ? BUSCA ? ¿SABES DÓNDE ¿SABES DÓNDE

54. http://www.google.com/webfonts

55. https://typekit.com/

56. http://fontdeck.com/

57. http://www.myfonts.com/

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

59. MUNDO EAL™ MUNDO EAL™

60. None
61. None
62. None

63. UN MU DO MEJOR UN MU DO MEJOR ES POSIB

    ES POSIB

64. http://trentwalton.com/

65. http://trentwalton.com/

66. http://trentwalton.com/

67. http://elliotjaystocks.com/blog

68. http://elliotjaystocks.com/blog

69. http://kitchensinkstudios.com/

70. http://lostworldsfairs.com/

71. http://lostworldsfairs.com/

72. http://2012.ampersandconf.com/

73. ¿P EGUNTAS? ¿P EGUNTAS? ¡GRACIAS! ¡GRACIAS! @htmlboy @martuishere [email protected]