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.

1. @SiteGround_ESwww.siteground.es
#SGwebinar
TIPOGRAFÍA RESPONSIVE:
MEJORA EL DISEÑO DE TU WEB
Ana Cirujano
@acirujano
anacirujano.com
por

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. ¿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. Elegir una
tipografía
@SiteGround_ESwww.siteground.es
#SGwebinar

5. ¿Qué queremos comunicar?
@SiteGround_ESwww.siteground.es
#SGwebinar

6. Serif vs sans serif
@SiteGround_ESwww.siteground.es
#SGwebinar

7. Legibilidad
@SiteGround_ESwww.siteground.es
#SGwebinar

8. Juego de caracteres completo
@SiteGround_ESwww.siteground.es
#SGwebinar

9. Amplia familia de pesos
@SiteGround_ESwww.siteground.es
#SGwebinar

10. Kerning correcto
@SiteGround_ESwww.siteground.es
#SGwebinar

11. Cursivas verdaderas
@SiteGround_ESwww.siteground.es
#SGwebinar

12. Características Open Type
@SiteGround_ESwww.siteground.es
#SGwebinar
Para saber más
Syntax for OpenType features in CSS

13. Combinar
tipografías
@SiteGround_ESwww.siteground.es
#SGwebinar

14. Pares de tipografías
@SiteGround_ESwww.siteground.es
#SGwebinar

15. Pares de tipografías
@SiteGround_ESwww.siteground.es
#SGwebinar

16. Elección tipográfica
responsive
@SiteGround_ESwww.siteground.es
#SGwebinar

17. Elección tipográfica responsive
@SiteGround_ESwww.siteground.es
#SGwebinar

18. Elección tipográfica responsive
@SiteGround_ESwww.siteground.es
#SGwebinar

19. Elección tipográfica responsive
@SiteGround_ESwww.siteground.es
#SGwebinar

20. Tamaño
responsive
@SiteGround_ESwww.siteground.es
#SGwebinar

21. Tamaño responsive
@SiteGround_ESwww.siteground.es
#SGwebinar

22. Escala modular
@SiteGround_ESwww.siteground.es
#SGwebinar

23. Tamaño responsive
@SiteGround_ESwww.siteground.es
#SGwebinar

24. Prioridad de las declaraciones
@SiteGround_ESwww.siteground.es
#SGwebinar

25. Prioridad de las declaraciones
@SiteGround_ESwww.siteground.es
#SGwebinar

26. Font-size
@SiteGround_ESwww.siteground.es
#SGwebinar

27. Rem
@SiteGround_ESwww.siteground.es
#SGwebinar

28. Em
@SiteGround_ESwww.siteground.es
#SGwebinar

29. Unidades relativas al viewport
@SiteGround_ESwww.siteground.es
#SGwebinar

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. La función calc()
@SiteGround_ESwww.siteground.es
#SGwebinar

32. El ancho
de línea
@SiteGround_ESwww.siteground.es
#SGwebinar

33. Ancho de línea
@SiteGround_ESwww.siteground.es
#SGwebinar

34. Ancho máximo
@SiteGround_ESwww.siteground.es
#SGwebinar

35. Ancho máximo
@SiteGround_ESwww.siteground.es
#SGwebinar

36. Interlineado
@SiteGround_ESwww.siteground.es
#SGwebinar

37. Line-height
@SiteGround_ESwww.siteground.es
#SGwebinar

38. Line-height
@SiteGround_ESwww.siteground.es
#SGwebinar

39. Alineación
@SiteGround_ESwww.siteground.es
#SGwebinar

40. No justifiques los textos
@SiteGround_ESwww.siteground.es
#SGwebinar

41. Alineación centrada
@SiteGround_ESwww.siteground.es
#SGwebinar

42. Alineación centrada
@SiteGround_ESwww.siteground.es
#SGwebinar

43. Particiones
@SiteGround_ESwww.siteground.es
#SGwebinar

44. Partición de palabras
@SiteGround_ESwww.siteground.es
#SGwebinar

45. Partición de palabras
@SiteGround_ESwww.siteground.es
#SGwebinar

46. Partición de líneas
@SiteGround_ESwww.siteground.es
#SGwebinar

47. Partición de líneas
@SiteGround_ESwww.siteground.es
#SGwebinar

48. Partición de líneas
@SiteGround_ESwww.siteground.es
#SGwebinar

49. Partición de líneas
@SiteGround_ESwww.siteground.es
#SGwebinar

50. Variable fonts
@SiteGround_ESwww.siteground.es
#SGwebinar

51. Color fonts
@SiteGround_ESwww.siteground.es
#SGwebinar

52. Síguenos en
@SiteGround_ES
SiteGround España
SiteGround España
@SiteGround_ESwww.siteground.es
#SGwebinar
SiteGround España