Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.
La guía de 2005 sobre el peso era compacta y correcta: componga el texto en pesos de regular a levemente negrita; evite las tipografías finas, cuyos trazos portan demasiado poco contraste para los lectores con baja visión, y evite las tipografías de gruesas a negras, cuyas contraformas cerradas asfixian la legibilidad para todos. Veinte años después, el objetivo no se ha movido. Lo que ha cambiado es todo lo que lo rodea — el peso es ahora una variable continua en lugar de un menú de dos o tres cortes, las interfaces oscuras han hecho el peso dependiente del contexto, y la moda ha pasado buena parte del periodo intermedio empujando la tipografía de interfaz exactamente en la dirección contra la que advierte este capítulo.
Qué cambió desde 2005
En 2005, el peso era una elección discreta. Una familia se distribuía como regular y negrita, quizá fina y negra, y el diseñador elegía uno. Las fuentes variables disolvieron esa restricción: el eje wght expone el peso como un continuo, típicamente de 100 a 900, direccionable desde CSS con font-weight o font-variation-settings. "De regular a levemente negrita" ya no es un bandazo de 400 a 700 — puede ser 430 para el texto de cuerpo en modo claro, 380 sobre un fondo oscuro, 500 para una etiqueta pequeña que necesita refuerzo. La recomendación sobrevive; la precisión con la que puede ejecutarse es nueva.
Algunas familias van más allá y exponen un eje de grado (GRAD), una convención popularizada por familias como Roboto Flex de Google. El grado cambia el grosor del trazo sin cambiar los anchos de las letras, de modo que ajustarlo no provoca reflujo del texto. Esa distinción importa allí donde el peso debe responder al contexto — modo oscuro, estados hover, diferencias de renderizado — sin desplazar la maquetación.
El segundo cambio es el ascenso de las interfaces oscuras como modo de primera clase, consultable mediante prefers-color-scheme. El peso y la polaridad interactúan, y las pautas de 2005 — escritas en una era de texto oscuro-sobre-claro casi universal — nunca tuvieron que abordarlo.
Modo oscuro y compensación de peso
El texto claro sobre fondo oscuro se lee más pesado que el mismo texto en polaridad positiva. Los trazos brillantes parecen hincharse contra el entorno oscuro — el efecto se describe comúnmente mediante la halación, la expansión de la luz desde las zonas brillantes, y es pronunciado en las pantallas emisivas y para los lectores con astigmatismo o condiciones de dispersión de la luz. Una tipografía afinada para verse bien en oscuro-sobre-claro se verá ligeramente inflada y borrosa en claro-sobre-oscuro; las contraformas se estrechan, y a tamaños pequeños las letras empiezan a atascarse.
La compensación práctica es reducir ligeramente el peso en modo oscuro. Con un eje wght variable, bajar el texto de cuerpo del orden de 20 a 50 unidades — de 400 hacia 370, digamos — restaura la densidad de trazo prevista. Donde existe un eje GRAD, es la mejor herramienta, ya que un grado negativo adelgaza los trazos sin reflujo alguno; este es precisamente el caso de uso para el que se diseñaron los grados. Las familias estáticas no ofrecen una buena palanca, lo que es en sí mismo un argumento a favor de las fuentes variables en cualquier producto comprometido con ambos esquemas de color.
El modo oscuro conlleva un segundo ajuste relacionado: el texto blanco puro sobre negro puro maximiza la halación. Los primeros planos ligeramente suavizados (blanco hueso) y las superficies oscuras elevadas reducen el deslumbramiento sin sacrificar significativamente el contraste. La compensación de peso y el suavizado de valores trabajan juntos.
El problema de los pesos finos
La revisión más fuerte que hace este capítulo no es a la regla sino a su urgencia. En 2005, el tipo fino era raro porque no podía renderizarse — un trazo filiforme en una pantalla de 96 DPI simplemente desaparecía. Las pantallas de alta densidad hicieron renderizables los pesos ultraligeros, y la moda siguió de inmediato: los pesos finos y extrafinos se convirtieron en abreviatura de elegancia y modernidad en el branding, las interfaces y el texto grande de exhibición.
Renderizable no es legible. Un trazo de peso 200 que sobrevive en la pantalla de alta densidad del diseñador se degrada en los monitores de densidad estándar, se atenúa aún más con poco brillo de pantalla o con filtros nocturnos agresivos, y para los lectores con baja visión puede caer por completo por debajo del umbral de contraste de trazo útil. El tipo fino es una apuesta acumulada a que todo lector tiene una agudeza excelente, una pantalla de gama alta y el brillo al máximo. Las relaciones de contraste medidas también sobrestiman el rendimiento real del tipo fino: la fórmula de las WCAG compara los colores de primer plano y fondo pero no tiene en cuenta el ancho del trazo, de modo que una tipografía de peso 100 puede superar técnicamente el 4.5:1 mientras presenta mucho menos contraste utilizable que una de peso 400 con los mismos colores. La investigación APCA que alimenta el borrador de WCAG 3.0 aborda exactamente esta brecha — su modelo trata el contraste, el tamaño y el peso como variables que interactúan, asignando al texto más fino y pequeño requisitos más estrictos de contraste de luminosidad. Esa dirección de avance confirma el instinto de 2005: el peso es parte del contraste, lo diga o no la fórmula actual.
El otro polo necesita menos relitigio. Los pesos gruesos y negros siguen cerrando las contraformas y fundiendo las formas de las letras a tamaños de texto; siguen siendo herramientas de exhibición. La negrita conserva su papel legítimo como énfasis y jerarquía — y las propias WCAG reconocen la contribución de la negrita al rebajar el umbral de texto grande para el contraste a 14pt para el texto en negrita frente a 18pt para el regular.
El peso en la práctica
Una política moderna de pesos se ve así. El texto de cuerpo se sitúa entre aproximadamente 400 y 500, elegido por familia — algunas tipografías están dibujadas ligeras en 400 y se leen mejor a 450. El énfasis sube de 200 a 300 unidades desde el peso del cuerpo para que sea inconfundible en lugar de ambiguo. El modo oscuro resta una cantidad modesta mediante wght o, preferiblemente, GRAD. Nada por debajo de aproximadamente 300 aparece a tamaños de texto, y cualquier cosa por debajo de eso a tamaños de exhibición se comprueba en una pantalla de densidad estándar con un brillo realista. Donde las fuentes variables no están disponibles, se aplican los cortes estáticos más cercanos a estos objetivos, y la compensación del modo oscuro se traslada al suavizado del color.
En CSS
body { font-weight: 400; }
strong { font-weight: 600; } /* semibold beats bold for emphasis */
@media (prefers-color-scheme: dark) {
/* light-on-dark reads heavier — pull back with a variable axis */
body { font-variation-settings: "GRAD" -20; }
}Recomendaciones
- Mantenga el texto de cuerpo en el rango 400–500, afinado por tipografía con el eje variable wght cuando esté disponible.
- Reduzca ligeramente el peso en modo oscuro; prefiera un eje GRAD cuando la familia lo ofrezca, ya que el grado no provoca reflujo del texto.
- Suavice los emparejamientos de blanco puro sobre negro en modo oscuro para limitar la halación.
- Trate los pesos por debajo de aproximadamente 300 como solo de exhibición, y verifíquelos en pantallas de densidad estándar; nunca los use para texto continuo.
- Evite los pesos de gruesos a negros a tamaños de texto; use la negrita como un paso deliberado de énfasis de 200–300 unidades por encima del peso del cuerpo.
- No deje que una relación de contraste WCAG aprobada excuse los trazos finos — el peso es parte del contraste efectivo, como hace explícito el trabajo APCA tras el borrador de WCAG 3.0.