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

La tipografía. La medida de todo

F96ad1b0d072503e107695df48a1249c?s=47 Lole Román
February 02, 2015

La tipografía. La medida de todo

La tipografía no sólo es una decisión de diseño, sino también un módulo mínimo de construcción para nuestro interfaz que nos permitirá salir todos los días a nuestra hora y, lo más importante, mejorará la relación entre todo el equipo.

F96ad1b0d072503e107695df48a1249c?s=128

Lole Román

February 02, 2015
Tweet

Transcript

  1. LA TIPOGRAFÍA la medida de todo

  2. Lole Román @lolergb

  3. THE BIG HOUSE thebighouse.io

  4. None
  5. Román, José (2014). Escreen Pro

  6. None
  7. «Type is a beautiful group of letters, not a group

    of beautiful letters» MATTHEW CARTER
  8. None
  9. None
  10. None
  11. MICROTIPOGRAFÍA

  12. ax+80+100+87+90 Letras Palabras Líneas Columnas Hochuli, Jost, (1987). ‘El detalle

    de la tipografía’. Compugraphic Corporation, Wilmington (Mass.) (ed), El detalle de la tipografía. 1º ed. USA: . pp.9
  13. Los círculos significan fijaciones, donde el ojo realiza una pausa

    y mira exactamente. Hochuli, Jost, (1987). ‘El detalle de la tipografía’. Compugraphic Corporation, Wilmington (Mass.) (ed), El detalle de la tipografía. 1º ed. USA: . pp.10.
  14. None
  15. Ritmo vertical

  16. Ritmo vertical Módulo de construcción

  17. ¿?

  18. Determinar la extensión de la familia.

  19. http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/

  20. None
  21. None
  22. None
  23. a a a

  24. Lorem fistrum ese pedazo de ese hombree ese peda- o

    de papaar papaar diodenoo a peich no te digo tri- go por no llamarte Rodrigor jarl quietooor no puedor Llevame al sircoo mamaar te voy a borrar el cerito ahorarr papaar papaar a peich fistro sexuarl ese hom bree la caidita ahorarr. Ese que llega torpedo te voy a borrar el cerito sexuarl apetecan te va a hasé pupitaa e calle ustée ahorarr está la cosa muy malar. Conde- mor por la gloria de mi madre condemor apetecan. Por la gloria de mi madre diodenoo sexuarl a gra- menawer ese hombree sexuarl de la pradera va usté muy cargadoo hasta luego Lucas a wan no te digo rigo por no llamarte Rodrigor. No te digo trigo por no llamarte Rodrigor sexuarl se calle ustée amatomaa evame al sircoo apetecan ese pedazo de pecador amatomaa jarl. A peich torpedo apetecan torpedo no Definir los aspectos microtipográficos
  25. El cuerpo base, interlineado y ancho de columna son decisiones

    básicas.
  26. Román, José (2014). Escreen Pro

  27. None
  28. Height Carter, Matthew (1996). Verdana

  29. open case Carter, Matthew (1996). Verdana

  30. Bil’ak, Peter (2010). Fedra Sans Screen Regular Bil’ak, Peter (2001).

    Fedra Sans Regular
  31. Aa Forma tipográfica Hinting Rasterizado

  32. None
  33. None
  34. Bil’ak, Ivo (2010). Fedra Sans Screen Hinting Hinting Bil’ak, Peter

    (2010). Fedra Sans Screen Regular
  35. Cleartype Blanco y Negro DirectWrite Identifica posición Escala de grises

    Subpixel Interpreta la posición
  36. Bil’ak, Peter (1999). Fedra Screen Bil’ak, Peter (2010). Fedra Serif

    Screen
  37. Hinting Forma tipográfica • Legebilidad Relación densidad de pixel y

    forma tipográfica Román, José (2012). Screen
  38. Román, José (2014). Escreen Pro #000000 #FFFFFF #1e1e1e #F8F5F3

  39. Bil’ak, Peter (2003). Fedra Serif Screen. 35pt

  40. https://typekit.com/

  41. a 48 72 a 16 24 a 18 24

  42. Crear una escala

  43. H2 H3 H1 Notas

  44. BRINGHURST, Robert. Los elementos del estilo tipográfico, Libros sobre libros

    / Fondo de Cul- tura Económica, México, 2008.
  45. H2 H3 H1 Notas CONTEXTO

  46. SXGA VGA PAL SVGA XGA SXGA+ UXGA QXGA CGA WQXGA

    WXGA WSVGA HD 720 WUXGA HD 1080 WVGA FWVGA WXGA WSXGA+ 2K 5:4 4:3 3:2 8:5 (16:10) 16:9 17:9 4:3
  47. None
  48. 1:√2

  49. 2:3 320 × 480 640 × 960 1280 × 1920

  50. a 48 72 16:9 a 16 24 16:9 a 18

    24 2:3
  51. http://www.modularscale.com/

  52. p H2 H1 H3

  53. Módulo Mobile & Tablet Módulo Escritorio Módulo TV

  54. None
  55. None
  56. None
  57. ” ” ” ” ”” ” ”

  58. $moduloBase = Interlineado para el cuerpo 16; body { width:

    $moduloBase*10; } button { padding: $moduloBase/2 $moduloBase; line-height: $moduloBase; }
  59. None
  60. Aa

  61. ¡MUCHAS GRACIAS! @lolergb www.thebighouse.io