Grosores de fuente en una escala: emparejar tamaño y grosor

La jerarquía tipográfica tiene dos mandos —tamaño y grosor— y emparejarlos de forma deliberada supera a llevar cualquiera de los dos al máximo. El patrón habitual: el texto de cuerpo a 400, los titulares a 600–700, las etiquetas pequeñas a 500 y el texto de display a 700 o más con el interletrado ajustado. Una escala tipográfica responde a la pregunta del tamaño; este artículo responde a la que viene justo después: qué grosor va con cada tamaño y cuándo el grosor puede hacer el trabajo de un tamaño.

La versión corta de la lógica: el tamaño jerarquiza el texto a distancia, el grosor lo jerarquiza de cerca, y el texto pequeño necesita más grosor, no menos. El ejemplo resuelto de abajo muestra la misma tarjeta construida de las dos maneras. Este artículo forma parte de nuestra guía de escalas tipográficas.

¿Por qué no basta con hacer más grande el texto importante?

Porque el tamaño es un mando caro. Cada nivel de importancia que expresas solo con el tamaño consume un paso de la escala, y los pasos crecen de forma multiplicativa, así que una jerarquía basada únicamente en el tamaño o se queda sin pasos utilizables o acaba con un paso superior mucho más grande de lo que el diseño necesita. Mientras tanto se acumulan los casos intermedios: una etiqueta que debería tener más rango que el texto de cuerpo que tiene al lado, pero que está dentro de un componente pequeño, no tiene adónde ir. Hazla más grande y rompe el componente; déjala como está y desaparece.

El grosor es el segundo mando que resuelve esto. Dos bloques de texto pueden compartir tamaño y aun así jerarquizarse con claridad: una línea a grosor 600 se lee como el titular de una línea a 400 con el mismo tamaño, sin necesidad de un paso nuevo. La razón intuitiva por la que el grosor funciona: el ojo lee la oscuridad como énfasis antes de leer el tamaño. Un grosor más pesado pone más tinta en la misma área, y esa densidad se registra de forma preatencional, igual que una palabra en negrita dentro de un párrafo salta a la vista antes de que hayas leído nada. El tamaño dice a qué altura del árbol del documento estás; el grosor dice mira aquí primero al alcance de la mano.

¿Qué grosor de fuente va con cada tamaño?

En CSS los grosores son numéricos, 100–900; la correspondencia entre nombres como «regular» y «bold» y los números está definida en la referencia de font-weight. Aquí tienes un emparejamiento resuelto sobre una escala modular con base de 16px (razón 1,333, dos notas por intervalo):

Fíjate en lo que no está en la tabla: el 900. Los grosores muy pesados cierran los ojales —los espacios en blanco encerrados dentro de letras como la e y la a— y en la mayoría de los tipos de letra de texto solo respiran cuando el tamaño es lo bastante grande como para mantener esos ojales abiertos. Un grosor de 800–900 a 51px puede ser espectacular; el mismo grosor a 21px es un borrón. Los grosores pesados necesitan tamaño; no lo sustituyen.

Mira los emparejamientos en vivo: abre esta escala en Scale Composer — cada nivel lleva su propio grosor junto a su tamaño, desde 500 en el extremo de las etiquetas subiendo hasta 700 en el display. Cambia el grosor de cualquier nivel y observa cuánto se mueve en la jerarquía sin que su tamaño cambie en absoluto.

¿Por qué el texto pequeño necesita más grosor, no menos?

Parece contraintuitivo: el texto pequeño es subordinado, así que ¿no debería ser más ligero? Ópticamente, no. A 12px un trazo puede tener apenas un píxel de ancho; renderiza ahí una fuente a grosor 300 y el suavizado de bordes vuelve grises esos trazos, y el texto cae por debajo de un contraste cómodo, sobre todo en pantallas de baja densidad. Subir una etiqueta pequeña de 400 a 500 mantiene sus trazos sólidos en un tamaño donde sobran pocos píxeles.

Esto es la imagen especular de la regla del display. El texto grande tiene píxeles de sobra, así que puede permitirse extremos en cualquier dirección: muy pesado o muy ligero. El texto pequeño no puede permitirse lo ligero. Si quieres que una etiqueta pequeña también se sienta subordinada, atenúa su color en lugar de su grosor: una etiqueta a grosor 500 en un gris secundario se lee discreta y sigue siendo legible; una etiqueta a grosor 300 en negro pleno se lee rota.

¿Puede el grosor sustituir a un paso de tamaño?

De cerca, sí, y este es el recurso más práctico de todo el emparejamiento. Una etiqueta de 16px a grosor 600 situada encima de un cuerpo de 16px a 400 se lee como dos niveles inconfundibles, sin gastar un paso de la escala. Dentro de tarjetas, filas de listas, grupos de formulario y cabeceras de tabla, la jerarquía basada solo en el grosor suele ser la mejor herramienta: los elementos están a pocos centímetros unos de otros, así que el ojo compara la oscuridad directamente, y la maquetación mantiene un único tamaño de texto para alinear.

Aquí tienes la misma tarjeta de producto construida de las dos maneras:

/* Versión A — el tamaño hace todo el trabajo: cuatro tamaños, un grosor */
.card-title { font-size: 24px; font-weight: 400; }
.card-label { font-size: 13px; font-weight: 400; }
.card-body  { font-size: 16px; font-weight: 400; }
.card-price { font-size: 21px; font-weight: 400; }

/* Versión B — el tamaño y el grosor se reparten el trabajo: dos tamaños */
.card-title { font-size: 21px; font-weight: 600; }
.card-label { font-size: 12px; font-weight: 500;
              letter-spacing: 0.05em; text-transform: uppercase; }
.card-body  { font-size: 16px; font-weight: 400; }
.card-price { font-size: 16px; font-weight: 700; }

La versión A necesita cuatro tamaños (dos de ellos —13px y 24px— fuera de la escala) y aun así se lee plana, porque todo comparte una única voz. La versión B necesita dos tamaños de la escala más el paso de etiqueta de 12px: el título baja de 24 a 21px porque el grosor 600 asume parte de la carga, y el precio supera en rango al cuerpo con el mismo 16px porque 700 supera a 400 de cerca. Menos tamaños, rangos más claros, y cada tamaño sigue viviendo en la escala.

Una regla práctica que funciona: dentro de un componente, recurre primero al grosor; entre secciones de una página, recurre al tamaño. Escanear entre regiones distantes necesita la diferencia medible que solo aporta el tamaño; jerarquizar elementos vecinos necesita la inmediatez del grosor.

Prueba el grosor antes que el tamaño

La forma más rápida de calibrar tus propios emparejamientos es aislar el mando del grosor: abre dos estilos con el mismo tamaño de 16px, uno a 400 y otro a 600 y ve subiendo el más pesado por 500, 600 y 700. Observa dónde empieza el par a leerse como dos niveles en vez de como un estilo con un fallo: ese umbral es tu jerarquía a igual tamaño, y cada paso que ahorra es un paso que tu escala no tiene que soportar.