Tipografía en la web

Presentación en SevillaTipo 2012.

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?
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
12. CSS CSS U POCO DE U POCO DE
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; }
17. color font-size font-family text- decoration line-height text-transform body { color: #355465; }
19. http://contrastrebellion.com/
20. color font-size font-family text- decoration line-height text-transform body { font-size: 17px; }
22. http://bit.ly/16pixelstype
23. color font-size font-family text- decoration line-height text-transform h2 { text-transform: uppercase; }
25. color font-size font-family text- decoration line-height text-transform a { text-decoration: none; }
27. color font-size font-family text- decoration line-height text-transform p { line-height: 27px; }
29. CA ÑO CA ÑO Y AHOR CON Y AHOR CON
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; }
34. font-style text-align font-weight contraste ornamentos bordes h2 { font-style: italic; }
36. font-style text-align font-weight contraste ornamentos bordes h2 { text-align: center; }
38. font-style text-align font-weight contraste ornamentos bordes h2 { border: 4px double #a7b5bc; }
40. font-style text-align font-weight contraste ornamentos bordes .with { color: #a7b5bc; }
42. font-style text-align font-weight contraste ornamentos bordes .ornament { color: #901b2e; }
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™
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 hola@swwweet.com