Algunos diseñadores web podrían considerar la tipografía como uno de los elementos menos importantes del diseño web, sin embargo, esta puede determinar la experiencia del usuario de múltiples maneras.

Las elecciones tipográficas adecuadas pueden potenciar la legibilidad, la lecturabilidad, la identidad de marca, la accesibilidad y la tasa de conversión. Por el contrario, las elecciones tipográficas inadecuadas pueden menoscabar estos factores y arruinar la experiencia del usuario.

La tipografía, por lo tanto, es un aspecto crucial del diseño web, y un elemento que todo diseñador debería dominar cuando se dispone a iniciar un negocio de diseño web. Afortunadamente, la red está repleta de útiles tutoriales de tipografía y cursos para diseñadores web.

En este artículo, procederemos a examinar 20 tutoriales de diseño web. Si bien muchos de estos tutoriales están disponibles de forma gratuita en línea, también hemos incluido algunos cursos en línea de pago. Después de todo, cuando uno intenta encontrar trabajo en diseño web, es necesario poder distinguirse, y contar con un certificado de finalización de una institución reconocida o un proveedor de cursos acreditado puede ser de gran ayuda en ese sentido.

Descubra las Últimas Tendencias en Tipografía y Obtenga Inspiración

Tabla de Contenidos

20 Asombrosos Tutoriales de Tipografía en Línea

Desde términos tipográficos básicos hasta la optimización de fuentes con CSS, hemos recopilado los mejores tutoriales de tipografía para diseñadores.

1. Tipografía Web: La Guía Completa para Diseñadores

Elementor-Typography

Nivel de habilidad: Principiante a Intermedio

Duración: 30 minutos

Costo: Gratuito

Este tutorial de tipografía proviene de Elementor, lo que significa que aprenderá más que simplemente cómo utilizar la tipografía en el diseño web. Usted va a aprender cómo poner todo esto en práctica — aspectos como el formato, el establecimiento de jerarquía visual, la creación de un sistema de diseño, y demás — dentro del contexto de WordPress y Elementor.

2. Cómo Añadir Fuentes Personalizadas a Su Sitio Web de WordPress

Using-Custom-Fonts-Elementor

Nivel de habilidad: Principiante a Intermedio

Duración: 17:31

Costo: Gratuito

En algunos casos, WordPress no dispondrá de las fuentes específicas que usted desea utilizar. Por lo tanto, con este tutorial de tipografía de Elementor, usted aprenderá cuáles son sus opciones para añadir fuentes personalizadas a un sitio de WordPress. Usted puede añadirlas manualmente a WordPress utilizando CSS o puede cargarlas en Elementor y utilizarlas desde el editor.

3. Cómo Utilizar los Colores y Fuentes Globales de Elementor

Elementor-Global-Colors

Nivel de habilidad: Principiante a Intermedio

Duración: 6:50

Costo: Gratuito

En este vídeo de Elementor, usted aprenderá todo sobre la función de Configuración Global en el editor de Elementor. Este tutorial le mostrará cómo utilizar esta función para establecer tanto colores como fuentes y luego observar cómo se aplican en todo el sitio. Por lo tanto, si desea ahorrar tiempo en la actualización de sus fuentes y desea aportar una mayor consistencia a cada sitio que construya, este breve tutorial en vídeo es de visualización obligatoria.

4. La Guía Definitiva de Tipografía Básica

Envato Tuts

Nivel de habilidad: Principiante

Duración: 10:33

Costo: Gratuito

El nombre de este tutorial en vídeo de Envato Tuts+ es algo engañoso. Debería llamarse «La Guía Definitiva de la Terminología Tipográfica Básica». Dicho esto, si usted es completamente nuevo en tipografía, este es un importante primer paso que debe dar. Familiarícese con términos relacionados con la tipografía, las fuentes, los tipos de archivo, la estructura de las tipografías, la composición tipográfica y más.

5. Tutorial de Tipografía para Principiantes: Todo lo que Necesita Saber sobre los Fundamentos de la Tipografía

Hubspot-Typography-Tutorial

Nivel de habilidad: Principiante

Duración: Lectura de 18 minutos

Costo: Gratuito

Este tutorial de tipografía de Hubspot es otra útil introducción a la tipografía en el diseño. Aprenderá términos comunes, diferentes estilos de tipografía, así como dónde obtener sus fuentes.

6. Introducción a la Tipografía

Coursera-Intro-Typography

Nivel de habilidad: Principiante

Duración: 8 horas

Costo: Gratuito

Si está buscando algo más profundo para su introducción a la tipografía, este curso del Instituto de las Artes de California es una buena elección. No hay costo para inscribirse en este curso, lo cual es una gran ventaja ya que obtendrá una gran cantidad de información útil. Aprenderá sobre la historia de la tipografía, su estructura, cómo usarla para contar una historia, manipular su apariencia y más.

7. La Psicología de las Fuentes (Fuentes que Evocan Emociones)

Envatotuts-Psychology-Fonts

Nivel de habilidad: Principiante

Duración: 15 minutos

Costo: Gratuito

Si es nuevo en el diseño, este tutorial de Envato Tuts+ servirá como una excelente introducción a la psicología de las fuentes. Similar a la psicología del color, aprenderá las respuestas emocionales comunes y las asociaciones con ciertos tipos de fuentes y obtendrá consejos sobre cómo usarlas a su favor.

8. Tipografía Web para Diseñadores y Desarrolladores

Udemy-Web-Typography

Nivel de habilidad: Principiante a Intermedio

Duración: 6.5 horas

Costo: $109.99

Este curso de Udemy sobre tipografía web es impartido por Rob Sutcliffe de la Escuela de Interfaz. Esta es una visión general bastante técnica de la tipografía, examinando los diferentes tipos de clasificaciones, consejos sobre cómo elegir y combinar fuentes, hacer que su tipografía web sea legible y responsiva, y mucho más.

Para obtener el máximo provecho de este curso, usted debería tener algún conocimiento práctico de HTML, CSS y JavaScript. Eso no significa que no deba inscribirse si es un diseñador novato — obtiene acceso de por vida, por lo que puede volver a él una vez que haya perfeccionado sus habilidades en esa área.

9. Elementos Textuales del Diseño: Fuentes, Tipografía y Espaciado

Coursera-Textual-Elements-Design

Nivel de habilidad: Principiante

Duración: 13 horas

Costo: Gratuito

Este curso de la Universidad de Colorado Boulder está disponible en el sitio web de Coursera. Este es un curso extenso, durante el cual aprenderá cómo manipular los elementos textuales para narrar una historia con su diseño. El curso abarca los fundamentos y luego se ramifica en el espaciado tipográfico, la selección de fuentes, la combinación de fuentes y más.

10. Tipografía para Diseñadores y Desarrolladores - No Sea Mediocre en el Diseño

Dont-Suck-At-Design-Tutorial

Nivel de habilidad: Intermedio

Duración: 8.5 horas

Costo: $99.99

Muhammad Ahsan Pervaiz es el creador de este curso de Udemy sobre tipografía con calificación de 4.5 estrellas. Si desea recibir una formación exhaustiva sobre los fundamentos de la tipografía, la personalización de la tipografía, la selección y combinación de fuentes, y más, este es un curso fantástico para tomar. Los ejercicios están incorporados en el curso, por lo que también obtendrá experiencia práctica implementando todo lo que aprende a medida que avanza.

11. Cuándo Utilizar Cada Tipo de Fuente (¡y Cuándo No!)

Envato-Tuts-2

Nivel de habilidad: Principiante

Duración: 12:55

Costo: Gratuito

Muchos de los tutoriales y cursos que ha visto en esta lista hasta ahora han abordado el tema de los tipos de fuentes. Sin embargo, este tutorial de Envato Tuts+ profundiza realmente en el tema, desglosando los diferentes tipos y subcategorías de fuentes. Al aprender a identificar las diferencias en cómo se estructura cada una, tendrá mucha más facilidad para elegir los estilos tipográficos adecuados para sus sitios.

12. ¿Cómo Saber si una Fuente es Buena o si es Mala?

Flux

Nivel de habilidad: Principiante

Duración: 9:58

Costo: Gratuito

Este tutorial de tipografía de Flux trata sobre cómo encontrar fuentes de calidad para sus sitios web. La discusión gira principalmente en torno a cómo los diseñadores web pueden encontrar fundiciones tipográficas y sitios web de alta calidad para obtener sus fuentes. Porque, incluso si comprende el tipo de fuente que necesita, una fuente mal diseñada (incluso si coincide con ese estilo) podría deshacer todo su arduo trabajo. Este tutorial le ayudará a evitar ese problema.

13. Elección de Fuentes Web: Una Guía para Principiantes

Google-Design

Nivel de habilidad: Principiante

Duración: 10 minutos

Costo: Gratuito

Esta es una guía práctica de Google Design sobre cómo determinar qué fuentes web son las adecuadas para cada sitio web que construya. El tutorial le guiará a través de una serie de factores, como el alcance del proyecto y el diseño multilingüe, y luego le dirigirá a las fuentes de Google que satisfacen las necesidades de su proyecto.

14. Cómo Elegir Fuentes para sus Diseños

Satori-Graphics

Nivel de habilidad: Principiante

Duración: 7:35

Costo: Gratuito

En esta guía paso a paso de Satori Graphics, obtendrá orientación práctica y consejos sobre cómo elegir fuentes para sus proyectos. Aunque aquí hay un gran énfasis en el diseño gráfico, puede aplicar los mismos cinco pasos para elegir y combinar fuentes para cualquier cosa en la que trabaje, ya sea un sitio web, una aplicación, un logotipo u otro tipo de material de marca.

15. Cómo Elegir Fuentes

Flux2

Nivel de habilidad: Principiante

Duración: 9:41

Costo: Gratuito

Este tutorial de YouTube de Flux le enseñará cómo alejarse de hacer elecciones de fuentes basadas en suposiciones o en lo que su intuición le dice. En su lugar, abordará la selección de fuentes basándose en el utilitarismo. Y obtendrá ayuda para encontrar fundiciones tipográficas que proporcionen muestras gráficas, de modo que, nuevamente, no se guíe solo por lo que su intuición le dice sobre cuán buena se verá una fuente.

16. Guía de Bolsillo para Combinar Tipos de Letra

Typekit-Typography-Pocket-Guide

Nivel de habilidad: Principiante a Intermedio

Duración: 1 hora

Costo: Gratuito

La combinación de fuentes es definitivamente un arte. Por lo tanto, si va a aprender a hacerlo, debe ser de uno de los líderes en el espacio del diseño. Esta guía de bolsillo fue creada por Tim Brown, el Jefe de Tipografía de Adobe Typekit y Adobe Type. Esta guía le enseñará cómo determinar qué funciones necesita que cumplan sus fuentes, cómo elegir una fuente ancla, cómo identificar fuentes que complementen la ancla y luego juzgar objetivamente su combinación.

17. Cómo Cambiar la Fuente en un Tema de WordPress (Cualquier Tema)

Themeisle-Change-Font-Wordpress

Nivel de habilidad: Principiante

Duración: 10 minutos

Costo: Gratuito

Este sencillo tutorial de ThemeIsle le proporcionará dos opciones para cambiar las fuentes en WordPress. Puede seleccionar fuentes web desde el Personalizador de WordPress. O puede instalar el complemento Easy Google Fonts y configurar las Fuentes de Google utilizando el Personalizador. Aunque se incluye una opción adicional, es preferible utilizar la configuración universal de fuentes de WordPress en lugar de cambiar las fuentes por bloque o página.

18. Técnicas Modernas de CSS para Mejorar la Legibilidad

Smashing-Magazine

Nivel de habilidad: Intermedio a Avanzado

Duración: 11 minutos

Costo: Gratuito

Edoarda Cavazza escribió este excelente artículo para Smashing Magazine que trata sobre el uso de CSS para mejorar la legibilidad y accesibilidad de la tipografía de su sitio web. Específicamente, este tutorial profundiza en el uso del espaciado para crear el mejor tipo de experiencia de lectura para los visitantes. Si aún no ha aprendido sobre kerning, interlineado o tracking, o no tiene un conocimiento básico de CSS, comience por el principio de esta lista de tutoriales de tipografía y vuelva a este más adelante.

19. Introducción a las Fuentes Variables en la Web

Webdev-Variable-Fonts

Nivel de habilidad: Intermedio a Avanzado

Duración: 20 minutos

Costo: Gratuito

Las fuentes variables son relativamente nuevas, pero están ganando rápidamente soporte en todos los navegadores, lo que significa que es hora de que los diseñadores y desarrolladores comiencen a usarlas (si aún no lo han hecho). Como explica el equipo de Google Developers en esta guía sobre fuentes variables, son sumamente valiosas en cuanto al rendimiento del sitio web, ya que le permiten guardar diferentes variaciones de una fuente en un solo archivo. Para aprender a hacer esto, necesitará algunos conocimientos de CSS.

20. Aprenda a Usar la Tipografía — Crítica del Manual de Tipografía

Futur Los 20 Mejores Tutoriales De Tipografía Para Diseñadores Web 1

Nivel de habilidad: Principiante a Avanzado

Duración: 30:14

Costo: Gratuito

Este es un tutorial interesante ya que en realidad no es un tutorial en absoluto. A lo largo de 30 minutos, observará cómo The Futur evalúa la tipografía utilizada en la creación de su propio Manual de Tipografía. Aunque están evaluando el manual impreso, sigue siendo un ejercicio útil para seguir, ya que le enseñará cómo revisar su propio trabajo y acostumbrarse a tomar decisiones más inteligentes para su tipografía desde el principio.

Domine el Arte de la Tipografía y Mejore la Experiencia de sus Usuarios

Una vez que haya dedicado algún tiempo a estos tutoriales de tipografía y tenga un buen dominio de los fundamentos, es hora de ponerlo todo en práctica.

Algo a tener en cuenta es que la tipografía, como todo lo demás en el diseño, evolucionará con el tiempo. Los principios y pautas subyacentes permanecerán iguales, pero en cuanto a los gustos de las personas en tipografía, espere que cambien.

Por lo tanto, asegúrese de, además de dominar los fundamentos de la tipografía, mantenerse al tanto de las tendencias tipográficas también.

Originally posted 2021-04-28 11:18:39.