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.

Tipografia responsive: mejora el diseño de tu web

45 views

Published on

En nuestro webinar gratuito de este mes sobre WordPress tuvimos el placer de contar con Ana cirujano, diseñadora visual y de interacción especializada en tipografía responsive. Licenciada en Sociología en 2005 y nunca ha dejado de formarse: Diseño multimedia, Dirección Comercial y Marketing, Impro, Desarrollo web con WordPress que nos dio sus consejos sobre “Tipografía responsive: mejora el diseño de tu web” (#SGwebinar).

La tipografía de tu web tiene una influencia directa en el estado de ánimo de los usuarios. Una buena tipografía puede provocar que el usuario esté más contento y un tratamiento erróneo de los textos puede hacer que el usuario se sienta molesto en el sitio web. Con explicaciones sencillas y con ejemplos prácticos, se vieron algunas recomendaciones de composición de textos que ayudarán a construir mejores sitios web responsive para todos los usuarios.

Tipo de letra, tamaño, interlineado, ancho de línea… ¿Cómo tienen que adaptarse en función del dispositivo? Aprendimos a tomar decisiones de diseño para conseguir comunicar eficazmente y que los usuarios disfruten más de nuestra web.

Como siempre Fernando Tellado, creador de ayudawp.com, nos acompañó para compartir su experiencia en este tema.

Si os lo perdisteis o si queréis volverlo a ver, aquí os dejamos el link al vídeo (https://youtu.be/vUjSh79FMYA) en nuestro canal de YouTube de SiteGround y aquí tenéis el link a la presentación (https://www.slideshare.net/SiteGround_ES/tipografia-responsiveanacirujano) de Ana Cirujano.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Tipografia responsive: mejora el diseño de tu web

  1. 1. @SiteGround_ESwww.siteground.es #SGwebinar TIPOGRAF�A RESPONSIVE: MEJORA EL DISE�O DE TU WEB Ana Cirujano @acirujano anacirujano.com por
  2. 2. Invitado Especial Fernando Tellado Consultor, divulgador, profesor y miembro incansable de la comunidad de WordPress. Creador de ayudawp.com @SiteGround_ESwww.siteground.es #SGwebinar
  3. 3. �Qu� es tipograf�a responsive? Es la composici�n de textos que se adapta a todos los dispositivos (y a todos los usuarios) @SiteGround_ESwww.siteground.es #SGwebinar
  4. 4. Elegir una tipograf�a @SiteGround_ESwww.siteground.es #SGwebinar
  5. 5. �Qu� queremos comunicar? @SiteGround_ESwww.siteground.es #SGwebinar
  6. 6. Serif vs sans serif @SiteGround_ESwww.siteground.es #SGwebinar
  7. 7. Legibilidad @SiteGround_ESwww.siteground.es #SGwebinar
  8. 8. Juego de caracteres completo @SiteGround_ESwww.siteground.es #SGwebinar
  9. 9. Amplia familia de pesos @SiteGround_ESwww.siteground.es #SGwebinar
  10. 10. Kerning correcto @SiteGround_ESwww.siteground.es #SGwebinar
  11. 11. Cursivas verdaderas @SiteGround_ESwww.siteground.es #SGwebinar
  12. 12. Caracter�sticas Open Type @SiteGround_ESwww.siteground.es #SGwebinar Para saber m�s Syntax for OpenType features in CSS
  13. 13. Combinar tipograf�as @SiteGround_ESwww.siteground.es #SGwebinar
  14. 14. Pares de tipograf�as @SiteGround_ESwww.siteground.es #SGwebinar
  15. 15. Pares de tipograf�as @SiteGround_ESwww.siteground.es #SGwebinar
  16. 16. Elecci�n tipogr�fica responsive @SiteGround_ESwww.siteground.es #SGwebinar
  17. 17. Elecci�n tipogr�fica responsive @SiteGround_ESwww.siteground.es #SGwebinar
  18. 18. Elecci�n tipogr�fica responsive @SiteGround_ESwww.siteground.es #SGwebinar
  19. 19. Elecci�n tipogr�fica responsive @SiteGround_ESwww.siteground.es #SGwebinar
  20. 20. Tama�o responsive @SiteGround_ESwww.siteground.es #SGwebinar
  21. 21. Tama�o responsive @SiteGround_ESwww.siteground.es #SGwebinar
  22. 22. Escala modular @SiteGround_ESwww.siteground.es #SGwebinar
  23. 23. Tama�o responsive @SiteGround_ESwww.siteground.es #SGwebinar
  24. 24. Prioridad de las declaraciones @SiteGround_ESwww.siteground.es #SGwebinar
  25. 25. Prioridad de las declaraciones @SiteGround_ESwww.siteground.es #SGwebinar
  26. 26. Font-size @SiteGround_ESwww.siteground.es #SGwebinar
  27. 27. Rem @SiteGround_ESwww.siteground.es #SGwebinar
  28. 28. Em @SiteGround_ESwww.siteground.es #SGwebinar
  29. 29. Unidades relativas al viewport @SiteGround_ESwww.siteground.es #SGwebinar
  30. 30. Unidades relativas al viewport @SiteGround_ESwww.siteground.es #SGwebinar Vw ancho del viewport Vmin anchura o altura del viewport, lo que sea m�s peque�o Vh altura del viewport Vmax anchura o altura del viewport, lo que sea m�s grande
  31. 31. La funci�n calc() @SiteGround_ESwww.siteground.es #SGwebinar
  32. 32. El ancho de l�nea @SiteGround_ESwww.siteground.es #SGwebinar
  33. 33. Ancho de l�nea @SiteGround_ESwww.siteground.es #SGwebinar
  34. 34. Ancho m�ximo @SiteGround_ESwww.siteground.es #SGwebinar
  35. 35. Ancho m�ximo @SiteGround_ESwww.siteground.es #SGwebinar
  36. 36. Interlineado @SiteGround_ESwww.siteground.es #SGwebinar
  37. 37. Line-height @SiteGround_ESwww.siteground.es #SGwebinar
  38. 38. Line-height @SiteGround_ESwww.siteground.es #SGwebinar
  39. 39. Alineaci�n @SiteGround_ESwww.siteground.es #SGwebinar
  40. 40. No justifiques los textos @SiteGround_ESwww.siteground.es #SGwebinar
  41. 41. Alineaci�n centrada @SiteGround_ESwww.siteground.es #SGwebinar
  42. 42. Alineaci�n centrada @SiteGround_ESwww.siteground.es #SGwebinar
  43. 43. Particiones @SiteGround_ESwww.siteground.es #SGwebinar
  44. 44. Partici�n de palabras @SiteGround_ESwww.siteground.es #SGwebinar
  45. 45. Partici�n de palabras @SiteGround_ESwww.siteground.es #SGwebinar
  46. 46. Partici�n de l�neas @SiteGround_ESwww.siteground.es #SGwebinar
  47. 47. Partici�n de l�neas @SiteGround_ESwww.siteground.es #SGwebinar
  48. 48. Partici�n de l�neas @SiteGround_ESwww.siteground.es #SGwebinar
  49. 49. Partici�n de l�neas @SiteGround_ESwww.siteground.es #SGwebinar
  50. 50. Variable fonts @SiteGround_ESwww.siteground.es #SGwebinar
  51. 51. Color fonts @SiteGround_ESwww.siteground.es #SGwebinar
  52. 52. S�guenos en @SiteGround_ES SiteGround Espa�a SiteGround Espa�a @SiteGround_ESwww.siteground.es #SGwebinar SiteGround Espa�a

×