En este post voy a contarte absolutamente TODO lo que necesitas saber sobre cómo la tipografía te puede ayudar (o jorobar) tus conversiones. Y lo haré con datos, estudios, ejemplos y hasta herramientas, siguiendo el espíritu canalla de Cultura Canalla 2.0: cero vendehumos y mucha, mucha mandanga del salseo tipográfico. “Tu tipografía no es solo la letra bonita: es todo el mensaje, es tu marca y es la confianza que transmites.” ¿Por Qué Hablar de Tipografía? Spoiler: Porque Influye en la Pasta ¿Alguna vez te has preguntado por qué algunas webs te entran por los ojos (y acabas metiendo la tarjeta sin pensarlo) y otras no hay manera de leerlas, ni aunque te paguen? Mucha culpa la tiene la tipografía. Te lo explico con datos de estudios: cambiar un detalle tan “tonto” como el cuerpo de letra puede duplicar tus conversiones. Pero antes de meternos en harina, déjame presentarme: soy Álvaro Torres, podcaster y desarrollador web creativo (sí, el que siempre te habla al oído en Cultura Canalla), y hoy traigo refuerzos: Ana Cirujano, una crack absoluta del diseño web y la tipografía, y mi compi Xavi Angulo, especialista en seguridad digital. Y sí, este post viene con regalo: si después de leerlo quieres tener tu web rápida y segura, pásate por Rayola Networks, nuestro hosting favorito, y aprovecha el descuentazo del 20% con el plan anual solo por ser canallita. El Club Canalla y un Toque Solidario Antes de seguir, déjame contar una pequeña historia. Cuando lancé un proyecto para ayudar a una ONG en Uganda, Ana Cirujano fue de las primeras en decir “yo ayudo”, sin preguntas, sin dramas. Así que sí, este blog también es un llamamiento a que, si tienes un ratito al día, le des una mano a quien lo necesita. A veces, un pequeña aportación cambia el mundo. Al Grano: ¿Cómo la Tipografía Afecta a Tus Ventas? Sabes que aquí vamos al grano y a la mandanga. ¿De verdad puede una tipografía mejorar la experiencia de usuario y las ventas? Sí. Y aquí no te voy a vender humo. Vamos a desmenuzarlo en 5 pasos sencillos que te van a servir seas dev, copy o marketer. Toma nota y complétalos en orden, que el salseo empieza fuerte:
- Elige el tipo de letra adecuado
- No te la juegues con el tamaño
- Acierta con el contraste
- Limita el ancho de línea
- Mima el interlineado
¿Listo? Venga, que arrancamos. 1. Elige el Tipo de Letra Adecuado Esto no es solo cuestión de gustos No es solo la Comic Sans esa “simpática” que te ponían en el cole para que te pareciera todo más amigable (y que nadie quiere ver en un contrato de trabajo). El tipo de letra te ayuda a:
- Comunicar el tono de tu marca
- Mejorar la legibilidad (que se lea rápido y fácil)
- Llegar a más personas (incluyendo quienes tienen dificultades visuales o dislexia)
- Subir la credibilidad de tu web
Estudio real: Comic Sans vs. Georgia En 2012, un estudio de laboratorio puso a prueba dos tipografías: Georgia (con serifas, rollo Times New Roman) y Comic Sans (la archiconocida por su mal gusto). ¿Resultados? La gente leía más rápido y percibía que pasaba menos tiempo leyendo con Georgia. Un 40% menos de tiempo. Y eso, en internet, es oro. “La gente no solo termina antes de leer, sino que siente que le ha llevado menos tiempo.” Eso significa que cuando la tipografía es agradable y funcional, además de facilitar la comprensión, el usuario se siente más cómodo y tiene percepción de mayor agilidad. Resultado: más ventas, menos fugas, mayor engagement. El tono de la tipografía La tipografía es como la voz de la radio: no hablarías igual a un niño que a una abuela. Las tipografías con serifas suelen percibirse como clásicas y serias; las sin serifas se ven modernas y frescas. Si vendes software para devs, seguro recurrirás a tipografías tipo “código” (piensa en Fira Mono, Source Code Pro, etc). “No es solo lo que escribes, es cómo lo escribes visualmente.” Aspectos Emocionales de la Tipografía
- Serifas (adornos): seriedad, tradición (libros, prensa)
- Sin serifas: modernidad, limpieza (tecnología, startups)
- Tipo "mono": código, geek, mundo dev
No subestimes esto. Una mala elección y tu mensaje se va a la papelera. 2. No Te la Juegues con el Tamaño de la Letra Aquí se cometen muchos crímenes. Y, spoiler: la mayoría de webs usan letras DEMASIADO PEQUEÑAS. ¿Por qué importa el tamaño?
- Si una persona mayor o con problemas de visión entra en tu web y no lee bien… se va.
- Y si no declaras el tamaño en unidades relativas, ni siquiera puede ampliarla bien en el móvil.
Lo ideal, según estudios y práctica:
- Móviles: 16px para el párrafo (mínimo, que no se te ocurra menos).
- Escritorio: 18–20px para que sea cómodo a la vista.
- Footer/copyright, etc.: ahí sí, puedes bajar a 10px, pero ni se te ocurra poner textos importantes a ese tamaño.
Pero, y aquí viene la chicha, nunca declares el tamaño de fuente solo en píxeles. Hay que hacerlo en valores relativos: rem todos los días de la semana. Eso permite que el usuario adapte el tamaño en su navegador. Bonus: Haz tu tipografía fluida Utiliza la función CSS clamp() para que el tamaño de la letra se adapte a cada pantalla: ni grande ni pequeño, sino perfecto. Aquí una receta mágica: Esto significa:
- Mínimo: 1rem (16px)
- Máximo: 1.25rem (20px)
- Adaptativo: 2vw + 1rem según el ancho de pantalla
Más info y calculadora: https://anacirujano.com/funcion-clamp-css/ Un consejo canalla ¿Usas siempre el mismo tamaño para el texto? Súbelo un puntito más, verás cómo te lo agradecen los usuarios (y tu tasa de conversión). 3. Acierta con el Contraste Aquí es donde muchos se la pegan sin saber por qué. El contraste puede referirse a dos cosas en tipografía: a) Contraste de Color: Figura y Fondo ¿De qué sirve un copy brutal si nadie lo puede leer porque has puesto letras gris perla sobre fondo blanco? Asegúrate de que el texto contraste radicalmente con el fondo:
- Fondo claro → letra muy oscura
- Fondo oscuro → letra muy clara
¿Cómo saber si “contrasta” lo suficiente? Usa herramientas como plugins de Figma o extensiones del navegador para ver si cumples la ratio mínima de accesibilidad (por ejemplo WCAG AA o AAA). Recomiendo:
- Figma plugin: “Contrast” (te hace un mapeado sobre una foto y te dice dónde la cagas)
“No te la juegues: si usas fotos de fondo, revisa cada zona. El contraste cambia según el color.” b) Contraste de Grosor en la Letra El contraste también puede ser la diferencia de grosor entre los trazos de la propia fuente.
- Mucho contraste: algunos palos son gordos y otros finos (ejemplo: Didot). Perfecto para títulos GRANDES, pero no para párrafos.
- Poco contraste: grosor más uniforme (Arial, Helvetica, Roboto). Idóneo para el cuerpo de texto.
Regla de oro:
- Títulos = puedes usar más contraste
- Texto largo, botones, menús = usa tipografías sin mucho contraste y, preferiblemente, sin serifas
4. Limita el Ancho de Línea El mítico error: un párrafo que va de lado a lado de la pantalla. ¿Sabes lo cansino que es eso para el usuario? Se pierde fácilmente la línea y acaba por no leer. ¿Por qué importa limitarlo? Desde siglos atrás, en los libros ya lo tenían claro: es más fácil leer líneas cortas (por eso hay márgenes gordos). El error del diseño web es que a veces dejamos el texto a lo ancho de la pantalla, sobre todo en escritorio. ¿Cómo limitarlo? Con CSS, ponele: Explicación:
- 1 ch = ancho del número "0" en la fuente que uses
- 65 caracteres (aprox) es un término medio ideal para cuerpos de texto
Si usas menos, mejor aún. Depende del tipo de letra y de cómo compongas los textos, puedes afinarlo al gusto. “Solo con limitar el ancho de tus párrafos, ya ganas un montón en experiencia de usuario.” En móvil esto no es un problema (la pantalla ya limita), pero en escritorio… amiga/o, échale un ojo porque seguramente puedes mejorarlo. 5. Mima el Interlineado ¿Texto pegado, apretujado, sin aire? Imperdonable. El interlineado es ese espacio entre líneas que, cuando está bien ajustado, hace milagros con la legibilidad. ¿Cómo ponerlo? La regla básica:
- Párrafos: 1.5x el tamaño de letra viene de cine
- Títulos: un poco menos (no quieres que el título tenga tanto espacio que parezca desconectado)
Y sí, al igual que con el tamaño de la letra, el interlineado debe ser fluido y adaptarse al tamaño de pantalla y al contenido. Hoy en día puedes ir más allá, ajustándolo incluso según el ancho del contenedor, gracias a los container queries de CSS (búsq. avanzada 🔍, pero merece la pena si quieres currártelo). Para títulos puedes poner, por ejemplo: Por qué hacerlo así:
- Párrafos largos necesitan más aire
- Títulos con menos texto pueden ir más juntos para transmitir solidez
Bonus Pro: Container Queries y Espaciados Variables Con la llegada de los container queries, ahora puedes hacer que el tamaño e interlineado de la tipografía dependan del ancho del propio contenedor, no solo de la pantalla entera. Muy útil para columnas, sidebars, tarjetas de blog, etc. Esto significa que un mismo componente se puede ver siempre perfecto, ya sea en móvil, escritorio o un diseño raro. Herramientas y Recursos Útiles Porque aquí no venimos solo a sentar cátedra, sino a darte herramientas para llevar a la práctica:
- https://www.figma.com/community/plugin/733260452430626994/Contrast
-