Cómo elegir y usar tipografías en tu e-commerce
La elección de una familia tipográfica para nuestro sistema gráfico es una decisión importante, que no debería estar puramente basada en gustos personales. Es clave que realicemos un análisis de lo que necesita nuestra marca y sigamos un proceso concreto para encontrar la fuente adecuada.
Serif o Sans-Serif ¿Realmente importa?
Estos son los dos grandes grupos en los que más comúnmente se categorizan las tipografías.
Los serif (serifas o remates) son trazos decorativos o adornos que se ubican en los extremos de las líneas de los caracteres. A veces se los llama “pies”. Las tipografías serif son aquellas cuyos caracteres cuentan con estos trazos. En contraposición, las tipografías sans-serif o de palo seco, son aquellas que no los tienen.
Las tipografías serif, que datan de hace al menos algunos siglos, suelen verse en cuerpos de texto en libros, periódicos y otros medios tradicionales. Consideradas más fáciles de leer que las sans-serif (aunque no hay estudios concluyentes al respecto) se las relaciona con la tradición y sobriedad, lo clásico y refinado.
Las sans-serif, de aspecto más moderno y más utilizadas en medios digitales, se ven asociadas a la simplicidad, lo informal o descontracturado.
Si bien estas convenciones para el uso de una u otra pueden ayudar a guiarnos en una dirección, no hay evidencia o estudio que asegure cuál es mejor para contenido digital. Mucho menos para un sitio web de e-commerce.
Existe un gran abanico de estilos. Contamos con una buena cantidad de fuentes clásicas creadas hace décadas y que aún hoy siguen siendo utilizadas en todo tipo de piezas. Por otro lado, muchos diseñadores y tipógrafos se dedican a diseñar, desarrollar y comercializar nuevas familias tipográficas de calidad, lo cual es ideal si buscamos algo novedoso o que esté especialmente creado para nuestra marca.
También podemos optar por utilizar fuentes gratuitas, que encontraremos en sitios con amplia variedad, como Google Fonts o Font Squirrel.
https://fonts.google.com/
https://www.fontsquirrel.com/
Sea cual sea nuestra elección, es muy importante pensar qué podemos hacer con la tipografía para maximizar la legibilidad, comunicar el espíritu de la marca y otorgarle personalidad a las palabras.
Combinaciones tipográficas
Las combinaciones o parejas tipográficas vienen a resolver el eterno dilema de serif vs sans-serif, y nos permiten trabajar distintos niveles de jerarquía y tonos de voz.
El hecho de que no existan reglas fijas a la hora de combinar fuentes puede hacer que el proceso de elección se torne un poco cansador. Por eso es bueno contar con algunos principios tipográficos para entender qué situaciones evitar, agilizando el proceso y ayudándonos a lograr un resultado interesante:
- Usar dos familias tipográficas, no más.
Una deberá ser serif y la otra sans-serif, para generar contraste y que no compitan entre sí. La idea es que se complementen.
- También es viable combinar sólo dos variables diferentes de la misma familia tipográfica.
Por ejemplo Futura Medium y Futura Light, aunque los contrastes serán menos evidentes.
- Debemos asignarle un rol diferente a cada fuente:
Una servirá para nombres y precios, por ejemplo, mientras que la otra se ocupará de las descripciones de producto.
- Es buena idea combinar pesos y variables para crear jerarquías y agilizar la lectura.
Casi todas las familias tipográficas poseen variables de peso (bold, semi-bold, medium, regular, light) lo que nos permite elegir las que mejor combinan entre sí.
Para el detalle de producto podría usarse Merriweather regular, mientras que para el CTA, Fira Sans bold, por ejemplo.
- Intentar utilizar dos fuentes que, aunque sean distintas, tengan una altura de x, y un ancho de caracteres similares.
La altura de x es el alto de las letras en minúscula sin tener en cuenta ni los ascendentes ni descendentes. Se toma a la letra x (en minúscula) como referencia ya que sus dos apoyos superiores e inferiores definen con precisión su altura.
De la misma forma, horizontalmente, se puede medir el ancho del carácter.
Cuando dos fuentes son muy dispares con respecto a la altura de x y el ancho de los caracteres, no funcionan bien juntas, como sucede por ejemplo con Futura y Times New Roman. En cambio, Montserrat combina bien con Georgia, porque sus altos y anchos son más similares entre sí.
- Prestar atención a la personalidad de cada tipografía.
Una “divertida o juvenil” difícilmente pueda combinarse con una “sobria y refinada”, y lograr buenos resultados.
Además, es importante que nuestra elección transmita las cualidades de la marca y los productos que estamos vendiendo. Si trabajamos en el rubro de joyería, por ejemplo, lógicamente deberíamos evitar tipografías que se perciban como casuales o infantiles.
- Dos tipografías con demasiada personalidad pueden competir y generar confusión.
Es mejor que sólo una de ellas se destaque en ese sentido, y que la otra se presente más neutral.
Para obtener más ideas sobre cómo combinar tipografías y profundizar en este aspecto, comparto algunos links de guías y sugerencias de parejas tipográficas que funcionan:
http://www.as8.it/handouts/mixing-typefaces_U&lc1992.pdf
Si bien una correcta elección tipográfica es clave, igual de importantes son otros aspectos a la hora de aplicar textos. En un e-commerce difícilmente nos encontraremos con grandes párrafos y bloques extensos de información, pero cómo manejamos la tipografía definirá la legibilidad y el equilibrio de cada página.
Tamaños
Los tamaños de los distintos tipos de texto juegan un papel crucial a la hora de establecer jerarquías. Cómo los trabajamos afectará inevitablemente a la legibilidad, motivando en mayor o menor medida a que nuestros usuarios compren.
- En la homepage, si contamos con una propuesta de valor y un CTA por encima del doblez (above the fold), es conveniente trabajar distintos tamaños para jerarquizar y dejar en claro la función de cada texto. En algunos casos podemos exagerar las diferencias para generar mayor impacto.
- En la página de producto es necesario que el nombre del mismo funcione como un título y se separe de la descripción. Su tamaño debería ser mayor y, de ser posible, en una variable bold o medium.
Con los precios la diferencia en tamaño será más sutil, pero aún así es conveniente que se separen de los títulos y las descripciones.
- En los testimoniales de compradores también es importante trabajar las jerarquías: Podemos ubicar una frase destacada que funciona como título, y la reseña en un bloque de texto más pequeño.
Alineación
La alineación o marginado del bloque de texto es otro factor a tener en cuenta. También repercute en la funcionalidad y legibilidad de cada sección de nuestro e-commerce.
Un texto marginado a la izquierda está formado por líneas de largo irregular con nacimiento en un eje establecido a la izquierda y un desflecado a la derecha. Este tipo de alineación es muy fácil de leer, ya que el ojo encuentra rápidamente el próximo renglón. Es la más utilizada y probablemente la más indicada para descripciones de producto y bloques de texto un poco más extensos.
El texto marginado a la derecha está formado exactamente al revés que el mencionado anteriormente. Estos textos son difíciles de leer, ya que al terminar una línea la siguiente siempre tiene su nacimiento en lugares diferentes. Es muy poco probable ver esta alineación en tiendas online, y no se la recomienda para textos largos.
Un texto centrado está formado por líneas de largo irregular ubicadas en simetría con respecto a un eje central. El texto queda desflecado hacia los lados, y debe ser controlado para que sea armónico. No se aconseja para textos muy largos, pero sí puede usarse en párrafos o destacados. En e-commerce es común ver esta alineación en los testimoniales de los compradores.
Interlínea
La interlínea es el espacio que existe entre las líneas de un texto. Se mide desde el apoyo de la primer línea, hasta el apoyo de la línea siguiente.
Se trata de un gran recurso, que influye muchísimo en la legibilidad de un texto y que puede ayudar a mejorar la experiencia del usuario en el e-commerce.
Con una interlínea más cerrada o compacta obtendremos un texto más oscuro y pesado. Si las líneas se encuentran muy próximas entre sí perjudican la calidad de la lectura, ya que el ojo puede saltearse líneas de texto.
A una interlínea mayor se consigue un texto más liviano. Pero si el interlineado es excesivo también se corre el riesgo de perder calidad en la legibilidad, ya que en este caso el ojo puede volver al comienzo del mismo renglón sin bajar a la línea siguiente.
En el siguiente ejemplo, la interlínea del párrafo de la izquierda es la determinada por default, mientras que en el párrafo derecho se ha aumentado deliberadamente:
Es clave encontrar un equilibrio en el interlineado de cada tipo de texto, teniendo en cuenta además la altura de x de la tipografía que estamos utilizando, y cómo se relacionan sus ascendentes y descendentes con el espacio entre líneas.
Conclusión
La tipografía cumple un rol importantísimo en el e-commerce. Comunica información sobre nuestros productos y la marca, pero a la vez debe invitar a leer y por ende, motivar a comprar.
No se trata solamente de elegir una fuente apropiada o de combinarla con otra. Sino además de trabajar los textos y crear jerarquías, valiéndonos de múltiples recursos tipográficos para maximizar la legibilidad y mejorar la experiencia del cliente.
Siempre es buena idea realizar pruebas de usabilidad para validar las tipografías elegidas, con herramientas como nular.
