Ponencia presentada por Ana Cirujano en la WordCamp Zaragoza 2018 sobe tipografía responsive: diseño para programadores y blogueros.

1. TIPOGRAFÍA
RESPONSIVEDiseño para programadores y blogueros
Ana Cirujano | 13-ene-2018

2. #WCZGZ
Ana Cirujano
Diseñadora visual y de interacción
especializada en WordPress
@acirujano
anacirujano.com

3. @acirujano | #WCZGZ

4. @acirujano | #WCZGZ
¿Qué es tipografía
responsive?

5. Tipografía y tipografías
Fuentes tipográficas y tipografías
Macrotipografía
Diseño de tipos
Microtipografía
@acirujano | #WCZGZ

6. Diseño responsive
@acirujano | #WCZGZ

7. Tipografías variables
Para saber más:
http://letterror.com/dev/mathshapes
https://typographica.org/on-typography/variable-fonts/
https://graffica.info/tipografias-variables-opentype-responsive @acirujano | #WCZGZ

8. @acirujano | #WCZGZ
Deadline: Talla de camisetas
Se acerca el final del año; así que la primera #WCZGZ está cada vez más cerca. Por eso es importante ir cerrando algunos temas.
¿Qué talla de camiseta tienes?
Todos los asistentes, cuando compran su camiseta eligen qué talla de camiseta tienen, esto nos permite asegurar que todos vais a tener camiseta de vuestra
talla sin tener que comprar más camisetas de la cuenta.
El martes, 2 de enero, a las 10:00 de la mañana, es el momento en que hacemos el pedido, por tanto, es el momento límite para comprar tu camiseta
pudiendo reservar talla. Todos aquellos que compren su entrada más tarde del día 2, aunque también tendrán camiseta, no podremos asegurar que tengan
talla disponible.

9. @acirujano | #WCZGZ
La tipografía

10. @acirujano | #WCZGZ
¿Qué queremos comunicar?

11. @acirujano | #WCZGZ
WordCamp Zaragoza
Serif
WordCamp Zaragoza
Sans serif o de palo seco
Serif vs sans serif

12. @acirujano | #WCZGZ
WordCamp Zaragoza
Serif
WordCamp Zaragoza
Sans serif o de palo seco
Serif vs sans serif

13. @acirujano | #WCZGZ
Hinting

14. @acirujano | #WCZGZ
Leemos mejor las tipografías
que conocemos

15. @acirujano | #WCZGZ
¿Cómo seleccionamos
la tipografía adecuada?

16. @acirujano | #WCZGZ
ae
Montserrat
ae
Roboto
ae
Open Sans
ae
Helvetica
¿Cómo seleccionamos
la tipografía adecuada?

17. @acirujano | #WCZGZ

18. @acirujano | #WCZGZ

19. @acirujano | #WCZGZ

20. Deadline: Talla
de camisetas
Se acerca el final del año; así que la primera #WCZGZ está
cada vez más cerca. Por eso es importante ir cerrando
algunos temas.
¿Qué talla de camiseta
tienes?
Todos los asistentes, cuando compran su camiseta eligen qué
talla de camiseta tienen, esto nos permite asegurar que todos
vais a tener camiseta de vuestra talla sin tener que comprar
más camisetas de la cuenta.

21. Deadline:
Talla
de
camisetas
Se acerca el final del año; así que
la primera #WCZGZ está cada vez
más cerca. Por eso es importante ir
cerrando algunos temas.
¿Qué talla
de camiseta
tienes?
Todos los asistentes, cuando
compran su camiseta eligen qué

22. @acirujano | #WCZGZ
Deadline: Talla
de camisetas
Se acerca el final del año; así que
la primera #WCZGZ está cada vez
más cerca. Por eso es importante ir
cerrando algunos temas.
¿Qué talla de
camiseta tienes?
Todos los asistentes, cuando
compran su camiseta eligen qué talla
de camiseta tienen, esto nos permite
asegurar que todos vais a tener
camiseta de vuestra talla sin tener
que comprar más camisetas de la
cuenta.
Deadline:
Talla
de
camisetas
Se acerca el final del año; así que
la primera #WCZGZ está cada vez
más cerca. Por eso es importante ir
cerrando algunos temas.
¿Qué talla de
camiseta tienes?
Todos los asistentes, cuando
compran su camiseta eligen qué

24. @acirujano | #WCZGZ
¿Cómo combinamos las tipografías?

25. @acirujano | #WCZGZ

26. @acirujano | #WCZGZ
Droid Sans + Droid SerifPT Serif + PT Sans
Bienvenidos a la primera
WordCamp Zaragoza
Una WordCamp es un evento oficial de WordPress, respaldado
por la Fundación WordPress, que se realiza a lo largo del
mundo por comunidades locales, exigiendo a éstas unos
estándares de calidad tanto en el contenido como en la
organización.
Contamos con un aforo limitado a 250 personas con
participantes de otras comunidades.
Bienvenidos a la primera
WordCamp Zaragoza
Una WordCamp es un evento oficial de WordPress, respaldado
por la Fundación WordPress, que se realiza a lo largo del
mundo por comunidades locales, exigiendo a éstas unos
estándares de calidad tanto en el contenido como en la
organización.
Contamos con un aforo limitado a 250 personas con
participantes de otras comunidades.

27. @acirujano | #WCZGZ
El tamaño

28. @acirujano | #WCZGZ
Imagen obtenida de https://ia.net/topics/responsive-typography-the-basics/
El tamaño según dispositivo

29. @acirujano | #WCZGZ
18 px
(1.125rem)
16 px
(1rem)
El tamaño mínimo

30. @acirujano | #WCZGZ
Deadline: Talla
de camisetas
Se acerca el final del año; así que la primera #WCZGZ está
cada vez más cerca. Por eso es importante ir cerrando
algunos temas.
¿Qué talla de camiseta
tienes?
Todos los asistentes, cuando compran su camiseta eligen qué
talla de camiseta tienen, esto nos permite asegurar que todos
vais a tener camiseta de vuestra talla sin tener que comprar
más camisetas de la cuenta.
Deadline: Talla
de camisetas
Se acerca el final del año; así que
la primera #WCZGZ está cada vez
más cerca. Por eso es importante ir
cerrando algunos temas.
¿Qué talla de
camiseta tienes?
Todos los asistentes, cuando
compran su camiseta eligen qué talla
de camiseta tienen, esto nos permite
asegurar que todos vais a tener
camiseta de vuestra talla sin tener
que comprar más camisetas de la
cuenta.

31. @acirujano | #WCZGZ
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/
La escala modular

32. @acirujano | #WCZGZ

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

34. @acirujano | #WCZGZ
Font-size
px rem em vw vh vmin vmax

35. @acirujano | #WCZGZ
Rem
1 rem = tamaño de texto base
1 rem = 16 px
24 px = 1.5 rem

36. @acirujano | #WCZGZ
Em
.contenedor 1.25em
16 px × 1.25 = 20 px
.letra-pequeña 0.8em
20 px × 0.8 = 16 px

37. @acirujano | #WCZGZ
Unidades relativas al viewport

38. @acirujano | #WCZGZ
• vw – ancho del viewport
• vh – altura del viewport
• vmin – anchura o altura del viewport, lo que sea más pequeño
• vmax – anchura o altura del viewport, lo que sea más grande
Unidades relativas al viewport

39. @acirujano | #WCZGZ
La función calc()

40. @acirujano | #WCZGZ
El ancho de línea

41. @acirujano | #WCZGZ
Demasiado
estrecha
Cuerpo de texto
Rango ideal
Demasiado
ancha
0 50 75 100
El ancho de línea
Te añadiremos al equipo de voluntarios (lista de Twitter) y te asignaremos tus tareas para los días del evento.
Los voluntarios deberían estar en Zaragoza el viernes 12 de enero a primera hora de la tarde, a tiempo para conocer
el lugar, conocer al resto del equipo, hacer un resumen y asignar tareas. Si por alguna razón vas a llegar más tarde y,
aun así, quieres seguir participando como voluntario/a, hay un apartado especial en el formulario para ti.
Nos gustaría que
nuestros voluntarios
cumplan con el código de
conducta establecido y
sean comprometidos.
Al ser un evento sin ánimo de lucro no podemos hacer frente
al cargo de los gastos de los voluntarios, lo que implica que el
voluntario debe costearse sus gastos de viaje y alojamiento. Sin
embargo, tu entrada será gratuita.

42. @acirujano | #WCZGZ
Ancho máximo

43. @acirujano | #WCZGZ

44. @acirujano | #WCZGZ
El interlineado

45. @acirujano | #WCZGZ
Interlineado
Line-height
Tamaño
Font-size
Zaragoza

46. @acirujano | #WCZGZ
Es la primera vez que se celebra
una WordCamp en Zaragoza, un
evento que reúne a personas de
diferentes niveles y experiencia
y que cuenta con un aforo de
250 personas.
Es la primera vez que se celebra
una WordCamp en Zaragoza, un
evento que reúne a personas de
diferentes niveles y experiencia
y que cuenta con un aforo de
250 personas.
Es la primera vez que se celebra
una WordCamp en Zaragoza, un
evento que reúne a personas de
diferentes niveles y experiencia
y que cuenta con un aforo de
250 personas.

47. @acirujano | #WCZGZ
Es la primera vez que se celebra una WordCamp
en Zaragoza, un evento que reúne a personas
de diferentes niveles y experiencia y que cuenta
con un aforo de 250 personas. El evento está
organizado por profesionales de Wordpress
que se reunen en torno al grupo Wordpress
Zaragoza, con la colaboración de Etopia Centro
de Arte y Tecnología.
Es la primera vez que se celebra una WordCamp
en Zaragoza, un evento que reúne a personas
de diferentes niveles y experiencia y que cuenta
con un aforo de 250 personas. El evento está
organizado por profesionales de Wordpress
que se reunen en torno al grupo Wordpress
Zaragoza, con la colaboración de Etopia Centro
de Arte y Tecnología.
Georgia, #202020, 16/23 Georgia, #646464, 16/21
El interlineado se define
en función del color

48. @acirujano | #WCZGZ
Es la primera vez que se celebra una
WordCamp en Zaragoza, un evento que
reúne a personas de diferentes niveles y
experiencia y que cuenta con un aforo de
250 personas. El evento está organizado
por profesionales de Wordpress que se
reunen en torno al grupo Wordpress
Zaragoza, con la colaboración de Etopia
Centro de Arte y Tecnología.
Georgia, 18/26 Georgia, #646464, 16/23
El interlineado se define
en función del tamaño
Es la primera vez que se celebra una WordCamp
en Zaragoza, un evento que reúne a personas de
diferentes niveles y experiencia y que cuenta con un
aforo de 250 personas. El evento está organizado
por profesionales de Wordpress que se reunen
en torno al grupo Wordpress Zaragoza, con la
colaboración de Etopia Centro de Arte y Tecnología.

49. @acirujano | #WCZGZ
Es la primera vez que se celebra una
WordCamp en Zaragoza, un evento
que reúne a personas de diferentes
niveles y experiencia y que cuenta con
un aforo de 250 personas. El evento
está organizado por profesionales de
Wordpress que se reunen en torno
al grupo Wordpress Zaragoza, con la
colaboración de Etopia Centro de Arte
y Tecnología.
Georgia, 280 px, 16/21 Georgia, 350px, 16/23
El interlineado se define
en función del ancho de línea
Es la primera vez que se celebra una WordCamp
en Zaragoza, un evento que reúne a personas de
diferentes niveles y experiencia y que cuenta con un
aforo de 250 personas. El evento está organizado por
profesionales de Wordpress que se reunen en torno
al grupo Wordpress Zaragoza, con la colaboración de
Etopia Centro de Arte y Tecnología.

50. El interlineado se define
en función del peso
@acirujano | #WCZGZ
Es la primera vez que se celebra una
WordCamp en Zaragoza, un evento que reúne
a personas de diferentes niveles y experiencia
y que cuenta con un aforo de 250 personas. El
evento está organizado por profesionales de
Wordpress que se reunen en torno al grupo
Wordpress Zaragoza, con la colaboración de
Etopia Centro de Arte y Tecnología.
Es la primera vez que se celebra una WordCamp
en Zaragoza, un evento que reúne a personas de
diferentes niveles y experiencia y que cuenta con un
aforo de 250 personas. El evento está organizado
por profesionales de Wordpress que se reunen
en torno al grupo Wordpress Zaragoza, con la
colaboración de Etopia Centro de Arte y Tecnología.
Merriweather 16/26 Georgia, 16/23

51. @acirujano | #WCZGZ
Párrafos
>1.2
Titulos
1.1
Line-height
Deadline: Talla
de camisetas
Se acerca el final del año; así que la primera #WCZGZ está
cada vez más cerca. Por eso es importante ir cerrando
algunos temas.
¿Qué talla de camiseta
tienes?
Todos los asistentes, cuando compran su camiseta eligen qué
talla de camiseta tienen, esto nos permite asegurar que todos
vais a tener camiseta de vuestra talla sin tener que comprar
más camisetas de la cuenta.

52. @acirujano | #WCZGZ
Ritmo vertical
Deadline: Talla
de camisetas
Se acerca el final del año; así que la primera #WCZGZ está
cada vez más cerca. Por eso es importante ir cerrando
algunos temas.
¿Qué talla de camiseta
tienes?
Todos los asistentes, cuando compran su camiseta eligen qué
talla de camiseta tienen, esto nos permite asegurar que todos
vais a tener camiseta de vuestra talla sin tener que comprar
más camisetas de la cuenta.

53. @acirujano | #WCZGZ
Alineación
y particiones

54. @acirujano | #WCZGZ
No justifiques los textos
Es la primera vez que se celebra
una WordCamp en Zaragoza, un
evento que reúne a personas de
diferentes niveles y experiencia
y que cuenta con un aforo de
250 personas. El evento está
organizado por profesionales de
Wordpress que se reunen en torno
al grupo Wordpress Zaragoza, con
Es la primera vez que se
celebra una WordCamp en
Zaragoza, un evento que
reúne a personas de
diferentes niveles y
experiencia y que cuenta con
un aforo de 250 personas. El
evento está organizado por
profesionales de Wordpress
que se reunen en torno al grupo
Wordpress Zaragoza, con la

55. @acirujano | #WCZGZ
Alineación centrada
Deadline: Talla
de camisetas
La primera #WCZGZ está cada vez más cerca
Se acerca el final del año; así que la primera #WCZGZ está
cada vez más cerca. Por eso es importante ir cerrando
algunos temas.
Todos los asistentes, cuando compran su camiseta eligen qué
talla de camiseta tienen, esto nos permite asegurar que todos
vais a tener camiseta de vuestra talla sin tener que comprar
más camisetas de la cuenta.

56. @acirujano | #WCZGZ
Alineación centrada
Deadline: Talla
de camisetas
La primera #WCZGZ está cada vez más cerca
Se acerca el final del año; así que la primera #WCZGZ está
cada vez más cerca. Por eso es importante ir cerrando
algunos temas.
Todos los asistentes, cuando compran su camiseta eligen qué
talla de camiseta tienen, esto nos permite asegurar que todos
vais a tener camiseta de vuestra talla sin tener que comprar
más camisetas de la cuenta.

57. @acirujano | #WCZGZ
Es la primera vez que se celebra una
WordCamp en Zaragoza, un evento
que reúne a personas de
diferentes niveles y experiencia y que
cuenta con un aforo de 250 personas.
El evento está organizado por
profesionales de Wordpress que se
reunen en torno al grupo Wordpress
Zaragoza.
Es la primera vez que se celebra
una WordCamp en Zaragoza, un
evento que reúne a personas de di-
ferentes niveles y experiencia y que
cuenta con un aforo de 250 perso-
nas. El evento está organizado por
profesionales de Wordpress que se
reunen en torno al grupo Wordpress
Zaragoza.
Partición de palabras

58. @acirujano | #WCZGZ

59. @acirujano | #WCZGZ
Partición de líneas
Un evento con
250 personas
Las mujeres son el
50 % del total
Cuesta solo
10 euros
Un evento con 250
personas
Las mujeres son el 50
% del total
Cuesta solo 10
euros
Un evento con
250 personas
Las mujeres son
el 50 % del total
Cuesta solo
10 euros

60. @acirujano | #WCZGZ
 

61. @acirujano | #WCZGZ
Partición de líneas
Esta noche vamos a salir 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.

62. @acirujano | #WCZGZ
Partición de líneas
Esta noche vamos a salir
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.

63. @acirujano | #WCZGZ
Partición de líneas
Esta noche vamos a salir
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.

64. @acirujano | #WCZGZ
Referencias

65. @acirujano | #WCZGZ
¡gracias!
Ana Cirujano
@acirujano
anacirujano.com
#WCZGZ