Cuando alguien entra en tu web y se va a los tres segundos, casi nunca es porque el logo esté mal colocado o porque el color de fondo no le guste. Muchas veces es algo más aburrido y más grave: el texto le costaba leerlo. Letra demasiado pequeña, líneas demasiado largas, un gris tan claro que se confunde con el fondo. La tipografía es la parte del diseño que menos se comenta en las reuniones y la que más tiempo pasa la gente mirando, literalmente, porque es donde está el contenido que vinieron a buscar.
Por qué la tipografía es la decisión de diseño más subestimada
Un logo se ve unos segundos. Un botón se pulsa una vez. Pero el cuerpo de texto de una web (las descripciones de tus servicios, las fichas de producto, los artículos del blog) es lo que el visitante recorre con la vista durante minutos si tu contenido le interesa. Si esa lectura es incómoda, no hace falta que la persona sea consciente del motivo para que decida irse. El cerebro procesa la dificultad de lectura como fricción, y la fricción se traduce en abandono, aunque el visitante jamás pondría en palabras "la tipografía me cansaba".
Hemos visto webs de clientes con un diseño visualmente atractivo (buena paleta, buenas fotos, buena maquetación) que aun así generaban más rebote del esperado, y al revisar con detalle, el problema estaba en un cuerpo de texto de 14 píxeles con un gris demasiado apagado. Bajar el tamaño no ahorra espacio de verdad: ahorra espacio hoy y pierde visitantes cada día después.
Tamaño de letra: el error más común en webs de pymes
El estándar razonable para el cuerpo de texto en escritorio ronda los 16 a 18 píxeles; en móvil, nunca por debajo de 16, porque es el umbral a partir del cual algunos navegadores hacen zoom automático al tocar un campo, un comportamiento molesto que delata que el tamaño era insuficiente desde el principio. Títulos y subtítulos deben marcar una jerarquía clara: si un H2 y un H3 se ven casi del mismo tamaño, el visitante no distingue de un vistazo qué es lo importante.
Un error habitual es diseñar mirando una pantalla grande de escritorio con buena luz, y olvidar que buena parte del tráfico llega desde un móvil con la pantalla a pleno sol o con la vista cansada al final del día. Lo que en el diseñador se ve perfecto puede resultar minúsculo para un cliente de sesenta años consultando tu web para pedir cita.
Interlineado y longitud de línea: lo que hace que un texto "respire"
El interlineado (el espacio vertical entre líneas) suele fijarse entre 1,4 y 1,6 veces el tamaño de la letra para textos largos. Menos que eso y las líneas se aprietan, dando sensación de muro de texto; más y el lector pierde el hilo entre una línea y la siguiente. Es un ajuste que cuesta un minuto en el CSS y cambia por completo cómo se percibe un bloque de contenido.
Igual de importante y mucho más ignorada es la longitud de línea: entre 60 y 75 caracteres por línea es el rango que la mayoría de estudios de legibilidad recomiendan. Un párrafo que ocupa todo el ancho de una pantalla panorámica obliga al ojo a hacer un recorrido horizontal larguísimo antes de saltar a la línea siguiente, y ese salto es donde se pierden lectores. La solución no es reducir el tamaño de letra, es limitar el ancho de la columna de texto con un simple max-width en el contenedor.
Cuántas tipografías usar (y por qué "una" ya es difícil de acertar)
Dos familias tipográficas suele ser el máximo razonable para una web de negocio: una para titulares, otra para cuerpo de texto (o la misma familia jugando con sus distintos pesos, que es lo que hacemos en 3CWeb con DM Sans, combinando un peso fino con negrita dentro del mismo titular para dar énfasis sin añadir una tercera fuente). Cada tipografía adicional que cargas es una petición más al navegador, un salto visual más para el ojo, y una oportunidad más de que dos estilos no combinen bien entre sí.
Antes de mezclar dos familias distintas, conviene probarlas juntas en una maqueta real, no solo imaginarlas. Una tipografía geométrica y sin serifas al lado de otra clásica con serifas puede funcionar muy bien o chocar frontalmente, y la única forma fiable de saberlo es verlas una junto a otra con texto real, no con "Lorem ipsum" genérico.
Legibilidad en móvil: no es lo mismo que en escritorio
En pantallas pequeñas el problema no es solo el tamaño, es el contexto: la persona suele estar de pie, caminando, con una sola mano libre, con notificaciones interrumpiendo. La tipografía en móvil necesita más margen de error: tamaños algo mayores, interlineado algo más generoso, y sobre todo, párrafos más cortos. Un bloque de texto que en escritorio son cuatro líneas cómodas, en móvil puede convertirse en doce líneas que desalientan a cualquiera de seguir leyendo.
Dividir el contenido en párrafos breves con algún subtítulo intermedio no es "simplificar" el mensaje, es adaptarlo al dispositivo real desde el que la mayoría de tus visitantes te están leyendo. Los datos de analítica de la mayoría de pymes españolas muestran hoy que más de la mitad del tráfico llega desde móvil, así que diseñar la tipografía pensando primero en escritorio y "ajustando luego" para móvil es, literalmente, priorizar al revés.
Contraste y color de texto: el aliado silencioso de la accesibilidad
Un gris claro sobre fondo blanco puede parecer elegante en la pantalla de un diseñador con un monitor calibrado y buena luz ambiental, pero se vuelve casi ilegible en un móvil con el brillo bajo o al aire libre. El estándar de accesibilidad (WCAG) pide una ratio de contraste mínima de 4,5:1 entre el texto y su fondo para el cuerpo de texto normal, y de 3:1 para texto grande. Existen herramientas gratuitas online que comprueban ese contraste en segundos introduciendo los dos colores en hexadecimal.
No hace falta sacrificar estética por accesibilidad: casi siempre se puede oscurecer ligeramente ese gris (por ejemplo de un #999999 a un #5c5c5c) sin que el ojo note un cambio dramático de diseño, pero sí note una diferencia enorme en cuánto le cuesta leer.
Tipografías de sistema vs tipografías personalizadas: velocidad contra personalidad
Usar la tipografía por defecto del sistema operativo del visitante (la llamada "system font stack") tiene una ventaja objetiva: carga instantánea, cero peticiones adicionales al servidor. El coste es que tu web se parece tipográficamente a cualquier otra que use el mismo recurso, perdiendo parte de la personalidad de marca. Cargar una tipografía personalizada desde Google Fonts o similar aporta identidad, pero añade una petición externa que puede ralentizar la carga si no se implementa bien.
El término medio que funciona en la mayoría de proyectos es cargar como máximo dos pesos de una sola familia tipográfica (por ejemplo, regular y negrita), usando el atributo `font-display: swap` para que el texto se muestre con una tipografía de reserva mientras la personalizada termina de cargar, en vez de dejar al visitante mirando un hueco en blanco. Es una diferencia técnica pequeña con un impacto grande en la sensación de velocidad.
Cómo saber si tu tipografía está funcionando de verdad
Más allá de la opinión personal ("a mí me gusta"), hay señales objetivas: el tiempo medio en página, la tasa de rebote en artículos largos, o simplemente pedirle a alguien ajeno al proyecto (que no haya visto el diseño nunca) que lea un párrafo en voz alta desde su propio móvil. Si duda, entrecierra los ojos o pide acercar la pantalla, ya tienes la respuesta sin necesidad de ninguna herramienta de analítica.
Números, precios y datos: la tipografía también debe facilitar el cálculo mental
Hay un caso concreto donde la tipografía importa todavía más de lo habitual: las cifras. Un precio, un horario o un número de teléfono mal maquetados generan errores de lectura con un coste directo (un cliente que llama a un número mal transcrito, un pedido con la cantidad equivocada). Algunas familias tipográficas incluyen una variante de "cifras tabulares", donde todos los números ocupan el mismo ancho, lo que facilita alinear columnas de precios o comparar cifras de un vistazo. No es un detalle exclusivo de hojas de cálculo: en una tabla de precios de servicios, por ejemplo, marca una diferencia real en cuánto tiempo tarda el cliente en comparar planes.
Pruebas de usuario reales antes de dar la tipografía por buena
Antes de dar por definitiva una elección tipográfica, conviene ir más allá de mirarla en la pantalla del diseñador. Una prueba sencilla y barata: imprimir una captura de la web con dos o tres opciones tipográficas distintas y enseñarlas a cinco o seis personas ajenas al proyecto, preguntando simplemente cuál les resulta más fácil de leer sin dar pistas sobre cuál "debería" gustarles. Este tipo de prueba informal, que no requiere presupuesto ni herramientas especiales, saca a la luz problemas de legibilidad que en la pantalla del ordenador de un diseñador experimentado pueden pasar completamente desapercibidos.
El coste de cambiar de tipografía más adelante
Cambiar la tipografía de una web ya lanzada no es tan sencillo como cambiar un color: afecta a la longitud de los textos (una tipografía más ancha puede romper maquetaciones ajustadas), a la jerarquía visual ya establecida y a la percepción de marca que los clientes habituales ya tienen asociada al sitio. Por eso merece la pena invertir el tiempo necesario en la elección inicial, probando la tipografía en contextos reales de la web (un titular largo, una tabla de precios, un formulario) y no solo en una maqueta bonita de la home, antes de darla por definitiva y construir todo el sitio alrededor de ella.
Preguntas frecuentes
¿Qué tamaño mínimo de letra debería usar en el cuerpo de texto?
Como referencia general, no bajes de 16 píxeles en el cuerpo de texto, tanto en escritorio como en móvil. Para textos legales o notas secundarias se puede reducir ligeramente, pero nunca por debajo de 13-14 píxeles ni en el contenido que realmente quieres que se lea.
¿Puedo usar la misma tipografía para todo el sitio, títulos y texto incluidos?
Sí, y de hecho suele ser la opción más segura: una sola familia tipográfica bien trabajada, jugando con pesos (fino, regular, negrita) y tamaños, aporta coherencia visual sin el riesgo de que dos fuentes distintas no combinen bien entre sí.
¿Las tipografías de Google Fonts son gratuitas para uso comercial?
La inmensa mayoría sí, bajo licencia abierta que permite uso comercial sin coste ni atribución obligatoria. Conviene revisar la licencia concreta de cada tipografía antes de usarla en un proyecto de cliente, pero el catálogo de Google Fonts está pensado precisamente para eso.
¿Afecta la tipografía a la velocidad de carga de mi web?
Sí, cada tipografía personalizada y cada peso adicional (fino, regular, negrita, cursiva) es un archivo más que el navegador tiene que descargar. Limitar el número de pesos cargados y usar `font-display: swap` son dos ajustes sencillos que reducen ese impacto de forma notable.
¿Cómo elijo una tipografía que transmita la personalidad de mi marca?
Piensa primero en tres adjetivos que describan tu marca (cercana, seria, moderna, artesanal) y busca tipografías que encajen con esos adjetivos antes de mirar cuál "te gusta más" a nivel personal. Una notaría y una tienda de skate no deberían compartir la misma familia tipográfica aunque ambas te parezcan bonitas.
¿Merece la pena pagar por una tipografía premium en vez de usar una gratuita?
Para la mayoría de pymes, no es necesario: el catálogo gratuito de Google Fonts y similares incluye opciones de calidad profesional de sobra. Pagar por una tipografía premium empieza a tener sentido cuando la marca ya tiene un posicionamiento muy definido y busca una pieza tipográfica exclusiva que la competencia no pueda usar.
¿Las cifras y los números merecen un tratamiento tipográfico distinto al del resto del texto?
En contextos donde hay que comparar cifras (tablas de precios, horarios, cantidades) conviene usar variantes con "cifras tabulares", donde cada número ocupa el mismo ancho, facilitando la alineación visual y la comparación rápida entre valores.
¿Cómo pruebo si mi elección tipográfica funciona bien antes de lanzar la web?
Una prueba sencilla es mostrar capturas con distintas opciones a varias personas ajenas al proyecto y preguntar cuál les resulta más fácil de leer, sin insinuar cuál "debería" ser la preferida, para obtener una opinión lo más honesta posible.