Tipografía responsive: maqueta textos para todos los dispositivos

1. TIPOGRAFÍA
RESPONSIVEMaqueta textos para todos los dispositivos
Ana Cirujano | 11-nov-2017

2. Ana Cirujano
Diseñadora freelance
con WordPress
@acirujano
anacirujano.com
easyworkation.com

3. @acirujano | #WCSantander

4. @acirujano | #WCSantander

5. @acirujano | #WCSantander

6. @acirujano | #WCSantander

7. @acirujano | #WCSantander

8. «La tipografía es
el 95 % de la web.»
Oliver Reichenstein
Para saber más: https://ia.net/topics/the-web-is-all-about-typography-period/ @acirujano | #WCSantander

9. Legibilidad, accesibilidad
y usabilidad
@acirujano | #WCSantander

10. Selecciona
una tipografía
adecuada
@acirujano | #WCSantander

11. Legibilidad Lecturabilidad
Habéis preguntado
mucho por la WordCamp
Santander… Primero que si
habría edición 2017, luego
que si sabíamos fecha
Legibilidad y lecturabilidad
@acirujano | #WCSantander

12. Usa fuentes con letras
que se distingan
Myriad Pro Regular
Illusion Illusion
Merriweather Regular
@acirujano | #WCSantander

13. Las letras comunican cosas
@acirujano | #WCSantander

14. Serif vs sans serif
WordCamp Santander WordCamp Santander
Sans serifSerif
@acirujano | #WCSantander

15. Leemos mejor las tipografías
que conocemos
Para saber más: http://www.monografica.org/Noticias/7234
@acirujano | #WCSantander

16. Usa el mínimo
de fuentes
@acirujano | #WCSantander

17. Una tipografía muchas veces es suficiente
aunque puedes usar dos o, como
muchísimo, tres. Nunca más.
Porque una lucha contra la otra por la
atención y la web acaba siendo una
batalla: imposible comunicar nada.
@acirujano | #WCSantander

18. Combina
correctamente
las fuentes
@acirujano | #WCSantander

19. @acirujano | #WCSantander

20. PT Sans + PT Serif
Bienvenidos a WordCamp
Santander
¡Llegó el momento! Habéis preguntado mucho por la
WordCamp Santander… Primero que si habría edición 2017,
luego que si sabíamos fecha y, desde hace unos meses, que
cuándo publicábamos la información.
¡Pues ya está aquí la WordCamp Santander 2017!
¿Quieres estar al corriente de toda la información? ¡Atento!
@acirujano | #WCSantander

21. Evita las
mayúsculas
@acirujano | #WCSantander

22. Para saber más: http://www.tipografiavenancio.com.ar/archivos/apunte_espacio_tipografico.pdf
¿Cómo leemos?
@acirujano | #WCSantander

23. ¿Cómo leemos?
WordCamp
Santander
WORDCAMP
SANTANDER
Para saber más: http://www.tipografiavenancio.com.ar/archivos/apunte_espacio_tipografico.pdf @acirujano | #WCSantander

24. Ojo al contraste
@acirujano | #WCSantander

25. Texto sobre fondos e imágenes
@acirujano | #WCSantander

26. Mejor gris oscuro que negro
#333#000
@acirujano | #WCSantander

27. Variaciones del color
de la marca
@acirujano | #WCSantander

28. No justifiques
los textos
@acirujano | #WCSantander

29. @acirujano | #WCSantander

30. @acirujano | #WCSantander

31. @acirujano | #WCSantander

32. El triángulo de oro
@acirujano | #WCSantander

33. Ancho de línea
Demasiado
estrecha
Cuerpo de texto
Rango ideal
Demasiado
ancha
Se un buen anfitrión. Al presentar una desconferencia, el anfitrión serás tú. Se amable, considerado, introduce a la gente y mar-
ca las pautas. Relájate y disfruta. Si te diviertes, conviertes la sesión en un momento alegre y la gente lo percibe y se contagia.
Recuerda, tú marcas el tono. Si te diviertes con la temática de la desconferencia y sonríes, la gente tenderá a ser más amable y
estará más relajada. Si tienes miedo o te sientes inseguro, la gente tendrá una actitud cautelosa y vacilante.
Si te diviertes con la temática de la
desconferencia y sonríes, la gente
tenderá a ser más amable y estará
más relajada.
Se amable, considerado, introduce a la gente y marca las pautas. Relájate y disfruta.
Si te diviertes, conviertes la sesión en un momento alegre y la gente lo percibe y se
contagia. Recuerda, tú marcas el tono. Si te...
0 50 75 100
@acirujano | #WCSantander

34. Tamaño de la fuente
18 px
(112.5 %)
16 px
(1rem)
@acirujano | #WCSantander

35. Interlineado
Line-height
Tamaño
Font-size
Santander
Interlineado
@acirujano | #WCSantander

36. @acirujano | #WCSantander

37. La organización de la WordCamp Santander
2017 te invita a que ayudes como voluntario
el día del evento. Con 200 asistentes, estamos
seguros que necesitaremos ayuda durante el
evento para mantenerlo todo bajo control.
Ser voluntario es más que echar una mano, es
preocuparse porque el evento salga perfecto,
porque haya ambiente de Comunidad y porque
las cosas se hagan bien. Nos gustaría que
nuestros voluntarios cumplan con el código de
conducta establecido y sean comprometidos.
La organización de la WordCamp Santander
2017 te invita a que ayudes como voluntario
el día del evento. Con 200 asistentes, estamos
seguros que necesitaremos ayuda durante el
evento para mantenerlo todo bajo control.
Ser voluntario es más que echar una mano, es
preocuparse porque el evento salga perfecto,
porque haya ambiente de Comunidad y porque
las cosas se hagan bien. Nos gustaría que
nuestros voluntarios cumplan con el código de
conducta establecido y sean comprometidos.
Georgia, #202020, 16/23 Georgia, #646464, 16/21
El interlineado se define
en función del color
@acirujano | #WCSantander

38. La organización de la WordCamp
Santander 2017 te invita a que ayudes
como voluntario el día del evento.
Con 200 asistentes, estamos seguros
que necesitaremos ayuda durante el
evento para mantenerlo todo bajo
control. Ser voluntario es más que echar
una mano, es preocuparse porque el
evento salga perfecto, porque haya
ambiente de Comunidad y porque las
cosas se hagan bien. Nos gustaría que
nuestros voluntarios cumplan con el
código de conducta establecido y sean
comprometidos.
Georgia, 18/26
El interlineado se define
en función del tamaño
La organización de la WordCamp Santander
2017 te invita a que ayudes como voluntario
el día del evento. Con 200 asistentes, estamos
seguros que necesitaremos ayuda durante el
evento para mantenerlo todo bajo control.
Ser voluntario es más que echar una mano, es
preocuparse porque el evento salga perfecto,
porque haya ambiente de Comunidad y porque
las cosas se hagan bien. Nos gustaría que
nuestros voluntarios cumplan con el código de
conducta establecido y sean comprometidos.
Georgia, 16/23
@acirujano | #WCSantander

39. El interlineado se define
en función del ancho de línea
La organización de la WordCamp Santander 2017
te invita a que ayudes como voluntario el día
del evento. Con 200 asistentes, estamos seguros
que necesitaremos ayuda durante el evento para
mantenerlo todo bajo control. Ser voluntario es
más que echar una mano, es preocuparse porque
el evento salga perfecto, porque haya ambiente
de Comunidad y porque las cosas se hagan bien.
Nos gustaría que nuestros voluntarios cumplan
con el código de conducta establecido y sean
comprometidos.
La organización de la WordCamp
Santander 2017 te invita a que ayudes
como voluntario el día del evento. Con
200 asistentes, estamos seguros que
necesitaremos ayuda durante el evento
para mantenerlo todo bajo control.
Ser voluntario es más que echar
una mano, es preocuparse porque el
evento salga perfecto, porque haya
ambiente de Comunidad y porque las
cosas se hagan bien. Nos gustaría que
nuestros voluntarios cumplan con el
código de conducta establecido y sean
comprometidos.
Georgia, 350px, 16/23Georgia, 280 px, 16/21
@acirujano | #WCSantander

40. El interlineado se define
en función del peso
La organización de la WordCamp Santander 2017
te invita a que ayudes como voluntario el día
del evento. Con 200 asistentes, estamos seguros
que necesitaremos ayuda durante el evento para
mantenerlo todo bajo control. Ser voluntario es
más que echar una mano, es preocuparse porque
el evento salga perfecto, porque haya ambiente
de Comunidad y porque las cosas se hagan bien.
Nos gustaría que nuestros voluntarios cumplan
con el código de conducta establecido y sean
comprometidos.
La organización de la WordCamp Santander
2017 te invita a que ayudes como voluntario
el día del evento. Con 200 asistentes, estamos
seguros que necesitaremos ayuda durante el
evento para mantenerlo todo bajo control. Ser
voluntario es más que echar una mano, es
preocuparse porque el evento salga perfecto,
porque haya ambiente de Comunidad y porque
las cosas se hagan bien. Nos gustaría que
nuestros voluntarios cumplan con el código de
conducta establecido y sean comprometidos.
Georgia, 16/23Merriweather, 16/26
@acirujano | #WCSantander

41. Cómo acertar con el interlineado
Titulares
1.15
Bienvenidos a WordCamp
Santander
¡Llegó el momento! Habéis preguntado mucho por la
WordCamp Santander… Primero que si habría edición 2017,
luego que si sabíamos fecha y, desde hace unos meses, que
cuándo publicábamos la información.
¡Pues ya está aquí la WordCamp Santander 2017!
¿Quieres estar al corriente de toda la información? ¡Atento!
Cuerpo de texto
Entre 1.2 y 1.6
@acirujano | #WCSantander

42. Caso práctico

43. Crea un tema y oriéntalo a la participación. Una cosa es decir “Vamos a hablar
de AJAX” y otra muy diferente es “Historias de guerra con AJAX: lo feo, lo bueno
y lo malo del desarrollo con AJAX”. Puede parecer el mismo tema, pero llama a
la interacción del público asistente; por lo menos incita a su opinión. Le permite
a la gente pensar en sus historias reales e ir preparados a la sesión, con ganas
de participar. No tengas miedo a los temas complicados para ti. El único filtro en
una desconferencia eres tú. Un truco es escoger un tema del que siempre quisiste
escuchar en un congreso, pero nunca lo hacen. Es tu oportunidad.
@acirujano | #WCSantander

44. Tipografía
Tamaño
Ancho
Interlineado
Márgenes
Detalles
Contraste
Grids
Crea un tema y oriéntalo a la participación. Una cosa es decir “Vamos a
hablar de AJAX” y otra muy diferente es “Historias de guerra con AJAX: lo
feo, lo bueno y lo malo del desarrollo con AJAX”. Puede parecer el mismo
tema, pero llama a la interacción del público asistente; por lo menos
incita a su opinión. Le permite a la gente pensar en sus historias reales
e ir preparados a la sesión, con ganas de participar. No tengas miedo a
los temas complicados para ti. El único filtro en una desconferencia eres
tú. Un truco es escoger un tema del que siempre quisiste escuchar en un
congreso, pero nunca lo hacen. Es tu oportunidad.
@acirujano | #WCSantander

45. Tipografía
Tamaño
Ancho
Interlineado
Márgenes
Detalles
Contraste
Grids
Crea un tema y oriéntalo a la participación. Una cosa es decir
“Vamos a hablar de AJAX” y otra muy diferente es “Historias de
guerra con AJAX: lo feo, lo bueno y lo malo del desarrollo con
AJAX”. Puede parecer el mismo tema, pero llama a la interacción
del público asistente; por lo menos incita a su opinión. Le permite
a la gente pensar en sus historias reales e ir preparados a la
sesión, con ganas de participar. No tengas miedo a los temas
complicados para ti. El único filtro en una desconferencia eres tú.
Un truco es escoger un tema del que siempre quisiste escuchar en
un congreso, pero nunca lo hacen. Es tu oportunidad.
@acirujano | #WCSantander

46. Tipografía
Tamaño
Ancho
Interlineado
Márgenes
Detalles
Contraste
Grids
Crea un tema y oriéntalo a la participación. Una cosa es decir
“Vamos a hablar de AJAX” y otra muy diferente es “Historias de
guerra con AJAX: lo feo, lo bueno y lo malo del desarrollo con AJAX”.
Puede parecer el mismo tema, pero llama a la interacción del
público asistente; por lo menos incita a su opinión. Le permite a la
gente pensar en sus historias reales e ir preparados a la sesión, con
ganas de participar. No tengas miedo a los temas complicados para
ti. El único filtro en una desconferencia eres tú. Un truco es escoger
un tema del que siempre quisiste escuchar en un congreso, pero
nunca lo hacen. Es tu oportunidad.
@acirujano | #WCSantander

47. Tipografía
Tamaño
Ancho
Interlineado
Márgenes
Detalles
Contraste
Grids
Crea un tema y oriéntalo a la participación. Una cosa es decir
“Vamos a hablar de AJAX” y otra muy diferente es “Historias de
guerra con AJAX: lo feo, lo bueno y lo malo del desarrollo con AJAX”.
Puede parecer el mismo tema, pero llama a la interacción del
público asistente; por lo menos incita a su opinión. Le permite a la
gente pensar en sus historias reales e ir preparados a la sesión, con
ganas de participar. No tengas miedo a los temas complicados para
ti. El único filtro en una desconferencia eres tú. Un truco es escoger
un tema del que siempre quisiste escuchar en un congreso, pero
nunca lo hacen. Es tu oportunidad.
@acirujano | #WCSantander

48. Tipografía
Tamaño
Ancho
Interlineado
Márgenes
Detalles
Contraste
Grids
Crea un tema y oriéntalo a la participación. Una cosa es decir
“Vamos a hablar de AJAX” y otra muy diferente es “Historias de
guerra con AJAX: lo feo, lo bueno y lo malo del desarrollo con AJAX”.
Puede parecer el mismo tema, pero llama a la interacción del
público asistente; por lo menos incita a su opinión. Le permite a la
gente pensar en sus historias reales e ir preparados a la sesión, con
ganas de participar. No tengas miedo a los temas complicados para
ti. El único filtro en una desconferencia eres tú. Un truco es escoger
un tema del que siempre quisiste escuchar en un congreso, pero
nunca lo hacen. Es tu oportunidad.
@acirujano | #WCSantander

49. Tipografía
Tamaño
Ancho
Interlineado
Márgenes
Detalles
Contraste
Grids
Crea un tema y oriéntalo a la participación. Una cosa es decir
«Vamos a hablar de AJAX» y otra muy diferente es «Historias de
guerra con AJAX: lo feo, lo bueno y lo malo del desarrollo con AJAX».
Puede parecer el mismo tema, pero llama a la interacción del
público asistente; por lo menos incita a su opinión. Le permite a la
gente pensar en sus historias reales e ir preparados a la sesión, con
ganas de participar. No tengas miedo a los temas complicados para
ti. El único filtro en una desconferencia eres tú. Un truco es escoger
un tema del que siempre quisiste escuchar en un congreso, pero
nunca lo hacen. Es tu oportunidad.
@acirujano | #WCSantander

50. Crea un tema y oriéntalo a la participación. Una cosa es decir
«Vamos a hablar de AJAX» y otra muy diferente es «Historias de
guerra con AJAX: lo feo, lo bueno y lo malo del desarrollo con AJAX».
Puede parecer el mismo tema, pero llama a la interacción del
público asistente; por lo menos incita a su opinión. Le permite a la
gente pensar en sus historias reales e ir preparados a la sesión, con
ganas de participar. No tengas miedo a los temas complicados para
ti. El único filtro en una desconferencia eres tú. Un truco es escoger
un tema del que siempre quisiste escuchar en un congreso, pero
nunca lo hacen. Es tu oportunidad.
Crea un tema y oriéntalo a la participación. Una cosa es decir “Vamos a hablar
de AJAX” y otra muy diferente es “Historias de guerra con AJAX: lo feo, lo bueno
y lo malo del desarrollo con AJAX”. Puede parecer el mismo tema, pero llama a
la interacción del público asistente; por lo menos incita a su opinión. Le permite
a la gente pensar en sus historias reales e ir preparados a la sesión, con ganas
de participar. No tengas miedo a los temas complicados para ti. El único filtro en
una desconferencia eres tú. Un truco es escoger un tema del que siempre quisiste
escuchar en un congreso, pero nunca lo hacen. Es tu oportunidad.

51. Diseño responsive
@acirujano | #WCSantander

52. Diseño adaptado a todos
los dispositivos
Media queries

53. html {
font-size: 100%; // = 16px
}
@media screen and (min-width: 48rem){
html {
font-size: 112.5%; // 18px
}
Ejemplo de media query
@acirujano | #WCSantander

54. em / rem / porcentajes
Para saber más: https://abalozz.es/sobre-como-usar-px-em-rem-y-percent-en-responsive-design/
Diseño adaptado a todos
los usuarios

55. Prioridad de las declaraciones
css
CSS
navegador
CSS
usuario
CSS
diseñador
CSS
diseñador
!important
CSS
usuario
!important
@acirujano | #WCSantander

56. 1 rem = tamaño de texto base
1 rem = 16 px
24 px = 1.5 rem
rem
@acirujano | #WCSantander

57. 1 em = depende del último
font-size definido dentro
del elemento en el que se
encuentra.
em
@acirujano | #WCSantander

58. .contenedor 1.25em
16 px × 1.25 = 20 px
.letra-pequeña 0.8em
20 px × 0.8 = 16 px
em
@acirujano | #WCSantander

59. .contenedor 2 em
16 px × 2 = 32 px
.letra-pequeña 0.8em
32 px × 0.8 = 25 px
em
Modularización
@acirujano | #WCSantander

60. .contenedor 2 em
16 px × 2 = 32 px
.letra-pequeña 0.8em
32 px × 0.8 = 25 px
em
@acirujano | #WCSantander

61. × ≠ x
@acirujano | #WCSantander

62. Porcentajes
@acirujano | #WCSantander

63. Utiliza una escala
modular
@acirujano | #WCSantander

64. Para saber más:
https://madebymike.com.au/writing/precise-control-responsive-typography/
Recursos:
http://www.modularscale.com/
http://universaltypography.com/demo/
http://hwdesignco.com/webtype/typecast/rwt
http://type-scale.com/
Tim Brown
@acirujano | #WCSantander

65. Tipografía fluida
@acirujano | #WCSantander

66. @acirujano | #WCSantander

67. p {font-size: 2vmin;}
h1 {font-size: 5vw;}
h2 {font-size: 4vh;}
h3 {font-size: 3vmin;}
La etiqueta viewport
@acirujano | #WCSantander

68. Viudas, huérfanas
y saltos de línea
con sentido
@acirujano | #WCSantander

69.  
@acirujano | #WCSantander

70.  
Hoy saldremos de
fiesta
Como en todas las WordCamps, esta
noche habrá lo que se conoce como
After Party. Saldremos después de
cenar a hacer networking con los
amigos de la Comunidad WordPress,
lo pasaremos genial pero no podemos
estar hasta muy tarde porque mañana
hay... ¡Contributor Day! Y tenemos que
estar bien despiertos.
@acirujano | #WCSantander

71.  
Hoy saldremos
de fiesta
Como en todas las WordCamps, esta
noche habrá lo que se conoce como
After Party. Saldremos después de
cenar a hacer networking con los
amigos de la Comunidad WordPress,
lo pasaremos genial pero no podemos
estar hasta muy tarde porque mañana
hay... ¡Contributor Day! Y tenemos que
estar bien despiertos.
@acirujano | #WCSantander

72.  
Hoy saldremos
de fiesta
Como en todas las WordCamps, esta
noche habrá lo que se conoce como
After Party. Saldremos después de
cenar a hacer networking con los
amigos de la Comunidad WordPress,
lo pasaremos genial pero no podemos
estar hasta muy tarde porque mañana
hay... ¡Contributor Day! Y tenemos que
estar bien despiertos.
@acirujano | #WCSantander

73. Referencias
@acirujano | #WCSantander

74. ¡gracias!
Ana Cirujano
@acirujano
anacirujano.com
#WCSantander