Tipografía en diseño UX: las reglas que sí importan.

El diseñador Oliver Reichenstein llegó a decir que el diseño web es un 95% tipografía. La cifra es un argumento, no una medición, pero sostiene algo real: el texto es casi todo lo que hay en una página, así que la tipografía termina siendo la decisión de diseño más grande y, casi siempre, la que se resuelve en diez segundos desde un menú desplegable.

Esta guía cubre qué es la tipografía en diseño UX, la diferencia entre tipografía, tipo de letra y fuente, los elementos que de verdad cambian la legibilidad, cómo elegir una tipografía y las prácticas que conviene aplicar antes que cualquier otra cosa.

¿Qué es la tipografía en diseño UX?

La tipografía es el oficio de organizar el texto para que se pueda leer con facilidad y sea adecuado a su propósito. Esa segunda condición es la que más pesa: una tipografía perfecta para un dashboard bancario sería un error en una aplicación infantil, aunque las dos se lean bien.

La palabra tipografía viene del griego typos, huella o golpe, y graphein, escribir. La etimología ya apunta a lo que hace: marcar el texto de una forma que se pueda leer.

Funciona en dos niveles a la vez. Como diseño visual, un tipo de letra define el tono antes de que se lea la primera palabra.

Como sistema funcional, el tamaño, el espaciado y la jerarquía deciden qué tan rápido encuentra el usuario lo que busca, y lo guían hacia el siguiente paso. En una pantalla con mucho texto, eso es casi toda la experiencia de usuario.

Tipografía, tipo de letra y fuente: la diferencia real

Estas tres palabras se usan como sinónimos y no lo son.

• Tipo de letra es el diseño: Helvetica, Georgia, Times New Roman. Es la forma de las letras.
• Fuente es una instancia concreta de ese diseño: Georgia Bold en 16 píxeles. Cambiar el peso o el tamaño ya es una fuente distinta dentro de la misma familia.
• Tipografía es lo que haces con ellas.

No es un capricho de vocabulario. Elegir la familia es una decisión de marca.

Decidir cómo se usan las fuentes dentro de ella, en qué tamaños y con qué pesos, es una decisión de sistema. Normalmente ocurren en momentos distintos del proyecto.

Por qué importa la tipografía

• Decide si la gente lee o no. Un usuario que tiene que esforzarse para leer la primera frase casi nunca llega a la segunda. La mala legibilidad se ve en las métricas como una sesión corta, y esa caída casi siempre se le atribuye al contenido.
• Construye la jerarquía visual. El tamaño, el peso y el espaciado le dicen al usuario qué leer primero, sin necesidad de instrucciones. Es la forma más rápida de hacer que una pantalla densa se sienta simple.
• Transmite la marca. La tipografía es uno de los pocos elementos de diseño presentes en cada pantalla. La consistencia en todo el sitio hace más por el reconocimiento de marca que un logo, porque se ve con más frecuencia y refuerza la personalidad de tu marca.
• Afecta la accesibilidad. El tamaño, el contraste y la longitud de línea determinan si un usuario con baja visión o dislexia puede usar el producto. Esa responsabilidad crece a medida que crece tu audiencia.

Los elementos clave de la tipografía

Estos son los elementos que cambian cómo funciona el texto en pantalla.

• La elección del tipo de letra. Es la decisión inicial, y la que condiciona todo lo que viene después.
• El tamaño de la fuente. Un cuerpo de texto por debajo de 16 píxeles en la web es un error común y evitable. Los títulos necesitan un salto claro, no uno pequeño.
• El interlineado, o alto de línea. Es el espacio vertical entre líneas: aproximadamente 1.5 veces el tamaño del texto en párrafos. Un interlineado apretado es la causa más común de un texto difícil de leer.
• La longitud de línea. Entre 45 y 75 caracteres por línea. Más allá de eso, el ojo pierde el lugar al volver al margen izquierdo.
• El tracking, o espaciado entre letras. Ábrelo un poco en mayúsculas y textos pequeños, ciérralo en tipografía grande de despliegue.
• El kerning. El espacio entre dos letras específicas, ajustado una por una. Casi siempre relevante solo en logos y titulares.
• El peso de la fuente. Dos o tres pesos bastan para la mayoría de las interfaces. Más pesos significa más decisiones y menos contraste entre ellos.
• El espacio en blanco. El espacio alrededor del texto es parte de la tipografía, no el fondo. Hace tanto por la legibilidad como cualquier elección de fuente.
• La altura de x. La altura de una x minúscula frente a las mayúsculas. Una altura de x generosa mantiene un tipo de letra legible en letras chicas, algo que importa en móvil.

Cómo se clasifican los tipos de letra

Cinco categorías cubren casi todo lo que vas a usar.

• Serif, o con gracia. Pequeños remates en los extremos de las letras. Se lee como tradicional, editorial y con autoridad, y funciona bien en textos largos. Las variantes slab, con remates gruesos y rectangulares, se ven fuertes en titulares y casi nunca son cómodas en párrafos.
• Sans-serif, o de palo seco. Sin remates. Se lee como moderna y neutral, y es la opción por defecto en pantalla porque se mantiene limpia en cualquier resolución.
• Script. Imita la escritura a mano. Úsala con moderación, y nunca para algo que el usuario tenga que leer rápido.
• Display. Pensada para titulares grandes y con personalidad. Excelente a 72 píxeles, inusable a 16.
• Monoespaciada. Cada carácter con el mismo ancho. Correcta para código y datos, una elección deliberada en cualquier otro caso.

La vieja regla sobre cuál de estas se lee mejor en pantalla viene de una época de resoluciones bajas. En una pantalla moderna, una familia tipográfica con gracia bien construida se lee sin problema, así que conviene elegir por tono y por calidad, no por esa regla.

Cómo elegir la tipografía adecuada

Elegir una fuente no es solo estética. Elegir el tipo de letra adecuado sigue estos pasos:

1. Parte de la marca. El tipo de letra debe decir lo mismo que dice la identidad de tu marca. Un negocio técnico y preciso necesita otras formas de letra que uno cálido y personal.
2. Revisa la familia completa. Una familia con solo dos pesos se queda corta en cuanto construyes una interfaz real: busca fuentes tipográficas con distintos estilos y pesos, incluida la cursiva.
3. Pruébala en las medidas que vas a usar de verdad. Muchas tipografías se ven excelentes a 48 píxeles y se rompen a 14.
4. Limítate a dos. Una para títulos, otra para párrafos, o una sola familia usada en ambos. Cada opción extra multiplica las decisiones y deja de sentirse intencional.
5. Revisa el rendimiento. Cada peso adicional es un archivo que el navegador tiene que descargar. Alojar las fuentes tú mismo y recortarlas mantiene ese costo bajo.

Si todavía no tienes una tipografía de marca definida, el catálogo de Google Fonts es un buen punto de partida gratuito, y sirve tanto para tipografía en diseño UI como para diseño UX.

Buenas prácticas que sí funcionan

• Construye una escala tipográfica, no una lista de tamaños. Cuatro o cinco pasos definidos una vez y usados en todas partes. Esto es lo que hace que un sitio grande se sienta coherente.
• Define primero el estilo del párrafo. Todo lo demás es relativo a él. Quien empieza por el titular termina con bloques de texto que nadie planeó.
• Alinea el texto a la izquierda. El texto centrado y el justificado hacen la lectura más lenta. Centra los títulos si quieres, pero deja el resto tranquilo.
• Dale aire al texto. Aumentar el ancho de línea y los márgenes suele arreglar más que cambiar de tipografía.
• Mantén el contraste alto. Un gris claro sobre blanco se ve elegante en un mockup y falla en una pantalla real bajo luz de día.
• Hazla responsiva. La longitud de línea y la tipografía tienen que cambiar entre un teléfono y un escritorio, porque distintos tamaños de pantalla piden ajustes distintos.
• Pruébala con contenido real. El lorem ipsum esconde cada problema que un titular real revela, y favorece el diseño de una forma que el sitio en vivo nunca hará.

Preguntas sobre tipografía en diseño UX

¿Cuáles son los 4 tipos de tipografías?

La versión corta de la clasificación deja fuera la monoespaciada y se queda con las de gracia, las de palo seco, la script y la display. Es un vocabulario de partida, no una norma que valga la pena discutir.

¿Cuál es la mejor tipografía para diseño web?

No hay una tipografía única mejor para todos los sitios: depende de la marca, del idioma y de dónde se lea. Lo que sí funciona en la mayoría de los casos es una familia de palo seco con varios pesos, como Roboto, Inter o la fuente de sistema del dispositivo.

¿Qué es la tipografía en diseño?

Es el oficio de organizar el texto para que una interfaz sea clara y adecuada a su propósito. En la práctica significa elegir tipos de letra, definir una escala de tamaños, fijar el espaciado y construir una jerarquía que le diga al usuario qué leer primero.

¿Cuáles son las 10 tipografías más utilizadas?

No existe una lista oficial, pero entre las que más se repiten en interfaces están Helvetica, Arial, Georgia, Times New Roman, Roboto, Open Sans, Lato, Montserrat, Poppins y la fuente de sistema, que cambia según los sistemas operativos.

¿Cuál es la diferencia entre kerning, tracking e interlineado?

El kerning es el espacio entre dos letras específicas. El tracking, o espaciado entre letras, se aplica de forma pareja a un bloque de texto, y el interlineado es el espacio vertical entre líneas: kerning es por par, tracking es por bloque, interlineado es por línea.

¿Por qué es importante la tipografía en un sitio web?

Porque decide si el contenido se lee. Cada otra decisión de diseño asume que alguien está leyendo las palabras, y una buena tipografía es lo que hace que eso sea probable.

En un sitio de marketing, el sistema tipográfico no es decoración. Es el mecanismo que decide si alguien que llega con curiosidad se va informado.

Eso es parte de lo que construimos en Dancing Pels con Sitios Web a Medida: una escala tipográfica, un sistema de espaciado y una jerarquía definidos una sola vez y aplicados a cada página, incluidas las que se escriben después del lanzamiento. Se apoya en los principios de diseño más amplios que rigen el resto del sitio.

Si el texto de tu sitio está técnicamente bien y aun así nadie lo lee, agenda una llamada de 30 minutos y lo revisamos juntos.