Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mejora el diseño de tu web: Tipografía responsive

874 views

Published on

Veremos algunas recomendaciones de composición de textos optimizados para todos los dispositivos, que nos ayudarán a construir mejores sitios web responsive para todos los usuarios. Tipo de letra, tamaño, interlineado, ancho de línea... aprenderemos a tomar decisiones de diseño para conseguir comunicar eficazmente, que nuestros usuarios disfruten más del sitio web y que aumente el tiempo de permanencia en la página y obtengamos más visitas.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Mejora el diseño de tu web: Tipografía responsive

  1. 1. @acirujano | @MadridWordPress
  2. 2. Ana Cirujano Diseñadora visual y de interacción especializada en WordPress @acirujano anacirujano.com tipografiaresponsive.com easyworkation.com
  3. 3. @acirujano | @MadridWordPress Cómo elegir una tipografía
  4. 4. @acirujano | @MadridWordPress Leemos mejor las tipografías que conocemos
  5. 5. @acirujano | @MadridWordPress Tono
  6. 6. @acirujano | @MadridWordPress Tono Seriedad Alegría
  7. 7. @acirujano | @MadridWordPress Legibilidad ae Roboto ae Open Sans ae Montserrat ae Helvetica Minion Futura Illusion Myriad Pro WordPress WordPress BaskervilleMerriweather
  8. 8. @acirujano | @MadridWordPress Serif vs sans serif WordPress Madrid WordPress Madrid Sans serifSerif
  9. 9. @acirujano | @MadridWordPress Juego de caracteres completo
  10. 10. @acirujano | @MadridWordPress Amplia familia de pesos
  11. 11. @acirujano | @MadridWordPress Kerning correcto WordPress
  12. 12. @acirujano | @MadridWordPress Cursivas verdaderas WordPress Madrid WordPress Madrid
  13. 13. @acirujano | @MadridWordPress Características OpenType Para saber más Syntax for OpenType features in CSSi
  14. 14. @acirujano | @MadridWordPress Combina correctamente las fuentes
  15. 15. @acirujano | @MadridWordPress Pares de fuentes
  16. 16. @acirujano | @MadridWordPress Droid Sans + Droid SerifPT Serif + PT Sans Bienvenidos a WordPress Madrid Veremos algunas recomendaciones de composición de textos optimizados para todos los dispositivos, que nos ayudarán a construir mejores sitios web responsive para todos los usuarios. Tipo de letra, tamaño, interlineado, ancho de línea... Aprenderemos a tomar decisiones de diseño para conseguir comunicar eficazmente, que nuestros usuarios disfruten más del sitio web y que aumente el tiempo de permanencia en la página y obtengamos más visitas. Bienvenidos a WordPress Madrid Veremos algunas recomendaciones de composición de textos optimizados para todos los dispositivos, que nos ayudarán a construir mejores sitios web responsive para todos los usuarios. Tipo de letra, tamaño, interlineado, ancho de línea... Aprenderemos a tomar decisiones de diseño para conseguir comunicar eficazmente, que nuestros usuarios disfruten más del sitio web y que aumente el tiempo de permanencia en la página y obtengamos más visitas. Pares de fuentes
  17. 17. @acirujano | @MadridWordPress Elección tipográfica responsive
  18. 18. @acirujano | @MadridWordPress 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. Elección tipográfica responsive
  19. 19. @acirujano | @MadridWordPress Elección tipográfica responsive 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é
  20. 20. @acirujano | @MadridWordPress
  21. 21. @acirujano | @MadridWordPress Tamaño responsive
  22. 22. @acirujano | @MadridWordPress Imagen obtenida de https://ia.net/topics/responsive-typography-the-basics/ Tamaño responsive
  23. 23. @acirujano | @MadridWordPress Tim Brown Escala modular
  24. 24. @acirujano | @MadridWordPress
  25. 25. @acirujano | @MadridWordPress CSS usuario CSS diseñador CSS diseñador !important CSS usuario !important CSS navegador Prioridad de las declaraciones css
  26. 26. @acirujano | @MadridWordPress px   rem   em   vw   vh   vmin   vmax Font-size
  27. 27. @acirujano | @MadridWordPress Rem 1 rem  =  tamaño de texto base 1 rem  =  16 px 24 px  =  1.5 rem
  28. 28. @acirujano | @MadridWordPress Em .contenedor 1.25em 16 px × 1.25 = 20 px .letra-pequeña 0.8em 20 px × 0.8 = 16 px
  29. 29. @acirujano | @MadridWordPress Unidades relativas al viewport
  30. 30. @acirujano | @MadridWordPress • 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
  31. 31. @acirujano | @MadridWordPress La función calc()
  32. 32. @acirujano | @MadridWordPress El ancho de línea
  33. 33. @acirujano | @MadridWordPress El ancho de línea Demasiado estrecha Cuerpo de texto Rango ideal Demasiado ancha 0 50 75 100 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.
  34. 34. @acirujano | @MadridWordPress Ancho máximo
  35. 35. @acirujano | @MadridWordPress
  36. 36. @acirujano | @MadridWordPress Interlineado
  37. 37. @acirujano | @MadridWordPress 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. Line-height
  38. 38. @acirujano | @MadridWordPress Line-height 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.
  39. 39. @acirujano | @MadridWordPress Alineación
  40. 40. @acirujano | @MadridWordPress Veremos algunas pautas de composición de textos optimizados para todos los dispositivos, que nos ayudarán a construir mejores sitios web responsive para todos los usuarios. Tipo de letra, tamaño, interlineado, ancho de línea... aprenderemos a tomar decisiones de diseño para conseguir comu- nicar eficazmente, Veremos algunas pautas de composición de textos optimizados para todos los dispositivos, que nos ayudarán a construir mejores sitios web responsive para todos los usuarios. Tipo de letra, tamaño, interlineado, ancho de línea... aprenderemos a tomar decisiones de diseño para conseguir comunicar eficazmente, No justifiques los textos
  41. 41. @acirujano | @MadridWordPress Viudas, huérfanas y saltos de línea con sentido
  42. 42. @acirujano | @MadridWordPress   @acirujano | @MadridWordPress Espacio de no separación
  43. 43. @acirujano | @MadridWordPress ­ @acirujano | @MadridWordPress Guión discrecional
  44. 44. @acirujano | @MadridWordPress Para saber más letterror.com typographica.org graffica.info i Fuentes variables
  45. 45. @acirujano | @MadridWordPress ¡gracias!

×