Escritura

Elegir tipografía para interfaces densas en datos

·4 min read

Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.

La mayoría de los consejos sobre tipografías están escritos para la prosa — largas líneas de minúsculas leídas con calma. Las aplicaciones de alto rendimiento viven en otro régimen: números escaneados en columnas, identificadores leídos una sola vez de un vistazo, etiquetas de once píxeles en pantallas que alguien vigila durante ocho horas. Una fuente encantadora en un ensayo puede ser activamente peligrosa en una pantalla de trading. Esto es lo que hay que interrogar en su lugar.

Primero los dígitos, después las letras

En una interfaz densa en datos, los números hacen la mayor parte del trabajo, así que audítalos antes que nada:

  • Las cifras tabulares no son negociables. Cada dígito con la misma anchura, para que las columnas se mantengan y un valor que cambia no haga temblar a sus vecinos. El CSS es una línea — font-variant-numeric: tabular-nums lining-nums — pero solo si la fuente tiene la característica. Muchas fuentes de moda no la tienen.
  • Cifras modernas, no elzevirianas. Las cifras elzevirianas, con sus ascendentes y descendentes, son hermosas en la prosa y un caos en una tabla.
  • Anchuras estables entre pesos. Si los dígitos en negrita son más anchos que los redondos, cada celda enfatizada rompe su columna. Las mejores fuentes de interfaz dibujan todos los pesos sobre una misma anchura — y el eje de grado de una fuente variable (peso sin cambio de anchura) es la solución más limpia de todas, como explica el capítulo de la Web Universal sobre fuentes variables.
La misma columna numérica en cifras proporcionales, descolocándose, y en cifras tabulares modernas, manteniendo la alineación.

El alfabeto de la interfaz

Las interfaces están llenas de cadenas que deben leerse correctamente exactamente una vez: identificadores de pedidos, hashes de git, claves de API, importes. Para ellas, el conjunto de caracteres confundibles lo es todo — 0/O, 1/l/I, 5/S, 8/B. Pruébalos al tamaño de producción antes de mirar una sola página de muestra. Las fuentes que aprueban tienden a anunciarlo: ceros barrados o con punto, eles con cola, aperturas abiertas. Es el mismo argumento de anatomía de la legibilidad que la Web Universal plantea para los lectores con baja visión — una interfaz a 11 px pone a todos los usuarios en una condición de baja agudeza visual.

Los caracteres confundibles — 0O, 1lI, 5S — ambiguos en una sans genérica, nítidos en una fuente dibujada para interfaces.

La lista de verificación

Aquello por lo que realmente hago pasar a una fuente candidata antes de que se lance en una aplicación:

1. Compón una tabla real — datos en vivo, con tabular-nums activado — y observa un valor cambiar. Nada puede moverse salvo los dígitos.
2. La prueba del alfabeto: 0O 1lI 5S 8B rn/m al tamaño de producción más pequeño, en ambos temas.
3. Altura de la x a 11–13 px. Las fuentes con altura de la x pequeña se desmoronan exactamente donde viven las interfaces. Una altura de la x generosa compra tamaño efectivo gratis.
4. Peso en tema oscuro. El texto claro sobre fondo oscuro se lee medio peso más grueso; si la fuente no tiene eje de grado ni un corte más ligero para compensarlo, todas las etiquetas se emborronan. (El capítulo sobre modo oscuro explica la física.)
5. El grep de características: tnum, lnum, zero, case — comprueba las características OpenType realmente presentes, no las que insinúa la página de marketing.
6. Clase de peso en rendimiento. Todo esto debe llegar en uno o dos archivos WOFF2 lo bastante pequeños como para no bloquear los datos que etiquetan — el tema del siguiente ensayo.

El patrón de la lista de verificación es el patrón de toda esta disciplina: en las aplicaciones, la tipografía se mide en errores evitados por píxel, no en belleza por página de muestra. Elige la fuente que consigue pasar desapercibida diez mil lecturas seguidas.