$30 off During Our Annual Pro Sale. View Details »

Tipografía en la web

Swwweet
June 02, 2012

Tipografía en la web

Presentación en SevillaTipo 2012.

Swwweet

June 02, 2012
Tweet

More Decks by Swwweet

Other Decks in Design

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 hola@swwweet.com