Por qué la tipografía de tu UI parece júnior: 6 arreglos con valores exactos
Seis errores de tipografía que hacen que una interfaz parezca júnior, y el arreglo sénior para cada uno con los números exactos: una escala tipográfica, una sola familia, gris legible, mayúsculas, interlineado y jerarquía.
La tipografía júnior rara vez es un solo gran error. Son seis pequeños, cada uno decidido a ojo: un tamaño que parecía correcto, una fuente que parecía divertida, un gris que parecía elegante. La tipografía sénior se ve tranquila porque cada una de esas decisiones sigue una regla. Aquí van las seis, con los números.
1. Usa una escala tipográfica
✕ Júnior: tamaños elegidos a ojo
✓ Sénior: una razón, 1.25 desde 16
A la izquierda, cada tamaño se eligió por separado: 31, 27, 22, 17, 15, 13. Los saltos entre ellos son desiguales, así que unos niveles se ven casi idénticos y otros dan un brinco. A la derecha, cada tamaño es el anterior por 1.25: 16, 20, 25, 31, 39. Los saltos son parejos, así que cada nivel se distingue claramente del siguiente.
Una razón entre 1.2 y 1.333 sirve para la mayoría de las interfaces. Elige una, anótala y no escribas nunca un tamaño que no esté en la lista. En CSS es un pequeño conjunto de variables, y en Figma un conjunto de estilos de texto. Nuestra guía de la escala tipográfica modular explica cómo elegir la razón.
:root {
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
}
2. Una familia, dos pesos
Fin de semana en Lisboa
un pequeño diario de viajeTres días, dos barrios y un larguísimo viaje en tranvía.
LEER MÁS✕ Júnior: cuatro fuentes en una tarjeta
Fin de semana en Lisboa
Un pequeño diario de viajeTres días, dos barrios y un larguísimo viaje en tranvía.
Leer más✓ Sénior: una familia, regular y negrita
Cada fuente nueva trae su propia personalidad, y cuatro personalidades en una tarjeta discuten. El lector no sabe cuál es la marca. Una familia en dos pesos, regular para leer y negrita para los títulos, basta para construir cada nivel que necesita una pantalla.
Si quieres una segunda familia, dale un solo trabajo, como solo titulares, y mantenla ahí en todas partes. Nunca añadas una fuente para hacer "especial" un elemento.
3. Un gris que se pueda leer
Tu pedido va en camino
Llega de 14:20 a 14:40.Te avisaremos por SMS cuando el repartidor esté cerca.
✕ #B0B0B0 sobre blanco: difícil de leer
Tu pedido va en camino
Llega de 14:20 a 14:40.Te avisaremos por SMS cuando el repartidor esté cerca.
✓ #6B6B6B sobre blanco: fácil de leer
El gris claro se ve refinado en un archivo de diseño con un monitor brillante. En un móvil a la intemperie, desaparece. La hora de llegada a la izquierda es la línea más útil de la tarjeta y la más difícil de leer.
#6B6B6B sigue sintiéndose discreto junto al título negro, y se mantiene legible. Como regla, el texto secundario sobre blanco no debería ser más claro que aproximadamente #767676, el gris más claro que supera el mínimo de accesibilidad para texto de cuerpo.
4. Mayúsculas solo para etiquetas
Hemos actualizado nuestros términos. Revisa los cambios antes de tu próximo pedido.
✕ Júnior: una frase en mayúsculas
NOVEDAD
Hemos actualizado nuestros términos
Revisa los cambios antes de tu próximo pedido.
✓ Sénior: etiqueta en mayúsculas, texto en minúsculas normales
Las mayúsculas eliminan la silueta de las palabras. En minúsculas, las letras altas y bajas dan a cada palabra un contorno que tu ojo reconoce; en mayúsculas cada palabra es un rectángulo, así que una frase hay que leerla letra por letra. Por eso un párrafo en mayúsculas parece un grito y tarda más en leerse.
Las mayúsculas funcionan para lo que fueron hechas: etiquetas cortas de una a tres palabras, como una etiqueta de sección, un estado o un botón. Todo lo más largo va en minúsculas normales.
5. Títulos apretados, cuerpo con aire
El espaciado es parte de la tipografía
Un interlineado apretado convierte un párrafo en un muro. Da al texto de cuerpo espacio para respirar y mantén los títulos ajustados.
✕ Júnior: título suelto, cuerpo apretado
El espaciado es parte de la tipografía
Un interlineado apretado convierte un párrafo en un muro. Da al texto de cuerpo espacio para respirar y mantén los títulos ajustados.
✓ Sénior: título a 1.1, cuerpo a 1.5
El interlineado tiene trabajos opuestos según el tamaño. Los títulos grandes ya tienen mucho espacio dentro de sus letras, así que un título a 1.1 se sostiene como una sola forma. El texto pequeño de cuerpo necesita espacio entre líneas para que el ojo encuentre el inicio de la siguiente, por eso recibe 1.5.
La versión júnior hace lo contrario, a menudo porque se aplicó un único interlineado a todo. Define dos valores y úsalos en todas partes: alrededor de 1.1 a 1.2 para títulos, 1.4 a 1.6 para el cuerpo.
6. Tamaño, peso, color, espacio
Pedido #2841
EntregadoHoy, 14:203 artículosTotal 42,80 $
✕ Júnior: todo en negrita, un solo tamaño
● Entregado
Pedido #2841
Hoy, 14:20 · 3 artículosTotal 42,80 $
✓ Sénior: cuatro herramientas, un orden claro
Cuando todo está en negrita, nada lo está. La tarjeta júnior tiene cinco líneas con el mismo tamaño y peso, así que el lector tiene que leerlas todas para encontrar la que importa.
La tarjeta sénior usa cuatro herramientas, cada una un poco: el número de pedido es más grande, el estado recibe un color y un punto, los detalles bajan a gris y el espacio separa el total. Ninguna herramienta se fuerza demasiado, por eso se ve tranquila. Más sobre esto en jerarquía tipográfica.
Los seis arreglos en una tabla
| Júnior | Sénior | El valor |
|---|---|---|
| Tamaños elegidos a ojo | Una escala tipográfica | 1.25 desde 16: 20, 25, 31, 39 |
| Varias fuentes | Una familia, dos pesos | Regular y negrita |
| Texto en gris claro | Un gris que se puede leer | #6B6B6B sobre blanco, nunca más claro que #767676 |
| Frases en mayúsculas | Mayúsculas para etiquetas cortas | De una a tres palabras |
| Un interlineado para todo | Dos interlineados | Títulos 1.1, cuerpo 1.5 |
| Todo en negrita | Cuatro herramientas de jerarquía | Tamaño, peso, color, espacio |
FAQ
¿Qué es una buena escala tipográfica para UI?
Una razón entre 1.2 y 1.333 desde una base de 16 px. Una razón de 1.25 da 16, 20, 25, 31 y 39 px, suficientes niveles para la mayoría de las pantallas.
¿Cuántas fuentes debería usar una UI?
Una familia basta, usada en dos pesos. Añade una segunda familia solo con un trabajo fijo, como los titulares, y úsala igual en todas partes.
¿Qué interlineado debe tener el texto de cuerpo?
Alrededor de 1.5 para el cuerpo y de 1.1 a 1.2 para los títulos grandes.
¿Qué gris es legible sobre blanco?
#767676 es el gris más claro que supera el mínimo WCAG para texto de cuerpo sobre blanco. #6B6B6B da un poco más de margen y aun así se lee como secundario.
¿Debe el texto de la UI ir todo en mayúsculas?
Solo para etiquetas cortas de una a tres palabras. Un texto más largo en mayúsculas se lee más lento porque las palabras pierden su forma.
Fuentes
- Escala tipográfica: 16 × 1.25ⁿ = 20, 25, 31.25 y 39.06, mostrados redondeados.
- Contraste sobre blanco, calculado con la fórmula de WCAG 2: #B0B0B0 2.2 a 1, #767676 4.5 a 1, #6B6B6B 5.3 a 1. WCAG pide 4.5 a 1 para el texto de cuerpo (1.4.3 Contrast (Minimum)).
- Publicado por primera vez como carrusel en UX Brainy.
Want type that looks this calm across your whole product? Our team builds UI and design systems with the typography decided once.
Get Started
