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.

Transcript

1. LA TIPOGRAFÍA la medida de todo
2. Lole Román @lolergb
3. THE BIG HOUSE thebighouse.io
5. Román, José (2014). Escreen Pro
7. «Type is a beautiful group of letters, not a group of beautiful letters» MATTHEW CARTER
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.
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/
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
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
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
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
57. ” ” ” ” ”” ” ”
58. $moduloBase = Interlineado para el cuerpo 16; body { width: $moduloBase*10; } button { padding: $moduloBase/2 $moduloBase; line-height: $moduloBase; }
60. Aa
61. ¡MUCHAS GRACIAS! @lolergb www.thebighouse.io