A medida que más y más diseñadores adoptan un enfoque centrado en el contenido, diseñar el sistema tipográfico adecuado para tu sitio web se vuelve aún más importante.
La tipografía es el estilo, la disposición y la apariencia del texto. Por lo tanto, no se trata solo de la fuente que usas, sino también del tamaño del texto, la longitud del contenido y el estilo (como el color, la cursiva, etc.).
Esto significa que los diseñadores no solo debemos entender los pormenores de la tipografía, sino también aprovechar las numerosas herramientas tipográficas disponibles.
Aquí tienes algunas de mis favoritas que seguro te encantarán.
1. Aprende con Typekit Practice
Puedes aprender sobre tipografía de muchas maneras, pero Typekit Practice siempre ha sido una de mis favoritas.
Soy un gran fan de Typekit (especialmente porque es muy fácil usar tus fuentes de Typekit en Webflow) y las lecciones que ofrecen aquí son tan efectivas como fáciles de seguir. Es mi recurso de cabecera tanto para aprender como para practicar, ya que puedes probar muchas de sus lecciones directamente en CodePen.
2. Identifica esa fuente con FontFace Ninja
¿Alguna vez has estado en un sitio y te has preguntado: “¡Guau, qué fuente es esta?!”. Aunque puedes rebuscar en las herramientas para desarrolladores de Chrome (haciendo clic derecho y eligiendo Inspeccionar) para averiguarlo, hay una forma mucho más sencilla.
La extensión FontFace Ninja para Chrome te permite identificar la familia tipográfica, el grosor e incluso el tamaño de fuente utilizado en cualquier parte de un sitio, simplemente pasando el cursor por encima.
3. Descubre nuevas fuentes a través de Hoefler&Co.
La fundición tipográfica Hoefler&Co. cuenta con algunas de mis fuentes favoritas de la web. Su sitio Discover.typography es un lugar fantástico para descubrir nuevas fuentes (e ideas de diseño) mediante hermosos experimentos de composición tipográfica.
4. Encuentra la fuente perfecta con Typewolf
Elegir la fuente perfecta para tu próximo proyecto puede ser un gran desafío. Requiere mucha reflexión y, a menudo, un poco de prueba y error.
Typewolf es un recurso increíble para los diseñadores que quieren ver cómo funciona la tipografía real en un sitio, en lugar del clásico “El veloz murciélago hindú comía feliz cardillo y kiwi”. Echa un vistazo a las recomendaciones y listas de fuentes, sitios con usos inspiradores de la tipografía y mucho más.
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
5. Ajusta tu jerarquía tipográfica con Modular Scale
Una vez que hayas dado con la combinación de fuentes ideal, es hora de considerar la jerarquía: las relaciones de tamaño entre los diferentes niveles de encabezados y el cuerpo de texto. Una jerarquía bien pensada ayuda a las personas a entender las relaciones entre los distintos tipos de contenido de tu sitio, mejorando enormemente la experiencia de lectura.
A lo largo de cientos de años, los tipógrafos han desarrollado una serie de proporciones entre los tamaños de letra, muchas de ellas basadas en la música. Calcular cómo funcionan estas proporciones en tus encabezados puede requerir un poco de matemáticas, o simplemente puedes usar la increíble herramienta Modular Scale de Tim Brown, que genera automáticamente una jerarquía tipográfica clásica a partir del tamaño de tu fuente base (cuerpo de texto) y una escala.
6. Conecta con las emociones gracias a Emotypes
La elección de la tipografía es clave para el mensaje que transmites y el tono que le das a tu sitio. Emotype te facilita elegir fuentes según las emociones que quieras evocar en tu web. Las fuentes han sido seleccionadas a mano y clasificadas en cuatro grupos emocionales: seguro, acogedor, único y neutral.
¡Anímate y déjate llevar por las sensaciones de las fuentes!
7. Planifica tus combinaciones tipográficas con Font Map de IDEO
Es habitual que los diseñadores recurran a las mismas combinaciones de siempre. Sin embargo, crear parejas originales es una forma infalible de hacer que tu sitio y tu marca destaquen.
IDEO Font Map nació como un experimento de aprendizaje automático aplicado a la tipografía y se ha convertido en una herramienta muy útil para crear combinaciones inusuales y únicas. Creado por Kevin Ho, Font Map te permite visualizar las relaciones entre más de 750 fuentes web.
8. FontJoy
FontJoy, al igual que Font Map de IDEO, utiliza aprendizaje automático para combinar fuentes. Esta herramienta se especializa en encontrar tipos de letra que contrastan pero se complementan, logrando combinaciones sorprendentes y atractivas.
Tanto si eres un veterano del diseño, un principiante o un fanático de la tipografía, te divertirás probando combinaciones para titulares, introducciones y cuerpos de texto.
Existen tantas herramientas tipográficas increíbles que sabemos que nos dejamos muchas fuera. ¡Cuéntanos cuáles son tus favoritas en los comentarios!
