Upgrade to Pro — share decks privately, control downloads, hide ads and more …

La letra con píxel entra

Swwweet
April 20, 2013

La letra con píxel entra

Presentación de Marta Armada en Entretipos el 20/04/13

Swwweet

April 20, 2013
Tweet

More Decks by Swwweet

Other Decks in Design

Transcript

  1. MARTA ARMADA @MARTUISHERE #ENTRETIPOS
    la letra
    con píxel
    entra

    View full-size slide

  2. ¡hola!
    me llamo Marta y
    diseño webs en
    swwweet.com

    View full-size slide

  3. informationarchitects.net/blog/the-web-is-all-about-typography-period

    View full-size slide

  4. 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

    View full-size slide

  5. flickr.com/photos/alexanderwolf/2452809327

    View full-size slide

  6. diepresse.com

    View full-size slide

  7. arial
    georgia
    verdana
    courier new
    times new roman

    View full-size slide

  8. colly.com/journal/

    View full-size slide

  9. seedconference.com/seed

    View full-size slide

  10. ¡cuida
    la web!
    ♥ ♥ ♥
    ♥ ♥
    ♥ ♥ ♥
    ♥ ♥

    View full-size slide

  11. .mi-texto{
    width: 30em;
    }

    View full-size slide

  12. informationarchitects.net/blog/100e2r
    revista vs. pantalla

    View full-size slide

  13. bit.ly/16pixelstype

    View full-size slide

  14. contrastrebellion.com

    View full-size slide

  15. rufián
    coliflor

    View full-size slide

  16. ru án
    coli or

    View full-size slide

  17. h1{
    text-rendering: optimizeLegibility;
    }

    View full-size slide

  18. “t’estimo”

    View full-size slide

  19. “t’estimo”
    “ ’ ”
    “ ”
    '

    View full-size slide

  20. «t’estimo»
    « »
    « »

    View full-size slide




  21. ×

    &


    -
    ×

    &

    View full-size slide

  22. Llegó en el AVE de las 13:46.

    View full-size slide

  23. Llegó en el AVE de las 13:46.

    View full-size slide

  24. abbr{
    font-variant: small-caps;
    }

    View full-size slide

  25. ve ido
    de có el

    View full-size slide

  26. h1{
    font-feature-settings: “dlig”1;
    }

    View full-size slide

  27. h1{
    -webkit-font-feature-settings: “dlig”1;
    -moz-font-feature-settings: “dlig=1”;
    font-feature-settings: “dlig”1;
    }

    View full-size slide

  28. webcatbcn.com

    View full-size slide

  29. ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html

    View full-size slide

  30. @font-face{
    font-family: “Adelle”;
    src: url(fonts/Adelle.woff);
    }
    body{
    font-family: Adelle, Georgia, serif;
    }

    View full-size slide

  31. @font-face{
    font-family: “Adelle”;
    src: url(fonts/AdelleBold.woff);
    font-weight: bold;
    }
    h1{
    font-family: Adelle, Georgia, serif;
    font-weight: bold;
    }

    View full-size slide

  32. woff
    svg
    otf
    ttf
    eot

    View full-size slide

  33. 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

    View full-size slide

  34. @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’);
    }

    View full-size slide

  35. fontsquirrel.com/tools/webfont-generator

    View full-size slide

  36. ¿eres
    tipógrafo?

    View full-size slide

  37. theharrietseries.com

    View full-size slide

  38. podemos
    hacerlo
    mejor

    View full-size slide

  39. jasonsantamaria.com

    View full-size slide

  40. kitchensinkstudios.com

    View full-size slide

  41. hola.jetblue.com

    View full-size slide

  42. greygoose.com

    View full-size slide