Tamaños de iconos en la rejilla (16, 20, 24)

Los tamaños de icono de interfaz más comunes —16, 20, 24 y 32 píxeles— son tamaños de caja delimitadora: cada número nombra el contenedor cuadrado en el que se dibuja un icono, no el dibujo que hay dentro. El menú es corto por la misma razón por la que los menús de espaciado son cortos, y encaja con todo lo demás: los cuatro valores caen en la rejilla de 4px, y 16 y 32 son pasos exactos de la escala modular a partir de la cual muchos sistemas generan su espaciado.

Este artículo cubre de dónde vienen los tamaños estándar, por qué dos iconos «del mismo tamaño» pueden parecer de tamaños distintos, qué tamaño de icono corresponde a cada tamaño de texto y cómo alinear la pareja una vez elegida: el rincón con forma de icono de un sistema de espaciado completo.

¿De dónde vienen los tamaños de icono estándar?

Las mismas presiones que produjeron la rejilla de 8 puntos. Los múltiplos de 4 sobreviven a los factores de densidad de 1,5×, 2× y 3× a los que renderizan las pantallas sin caer en medios píxeles, y una caja delimitadora que comparte su aritmética con el menú de espaciado compone limpiamente: un icono de 24px con 12px de relleno a cada lado es un control de 48px, sin resto. Dentro del menú, cada tamaño tiene una función: 16 encaja en interfaces densas de texto y en uso en línea (coincide con el tamaño clásico del cuerpo), 24 es el valor por defecto cómodo con el que se dibujan la mayoría de los conjuntos de iconos, 20 parte la diferencia para interfaces compactas, y 32 en adelante sirven para estados vacíos e ilustraciones destacadas.

En una escala de espaciado modular compartida —base 16, razón 2, dos notas por duplicación, que genera 8, 11, 16, 23, 32, 45, 64— los tamaños de icono caen sobre los pasos o cerca de ellos: 16 y 32 son exactos, 24 queda un píxel por encima del paso 23, y 20 pertenece a la capa de 4pt entre pasos. Sobre o cerca basta. Lo que tiene que permanecer en la rejilla no es el icono solo, sino la suma —caja más relleno—, porque esa suma es el tamaño frente al que los elementos vecinos se espacian.

¿Por qué dos iconos del mismo tamaño parecen de tamaños distintos?

Porque el número nombra la caja, y los conjuntos difieren en cuánta caja usan. Los conjuntos de iconos dibujan sus glifos dentro de un área activa con relleno incorporado: los iconos de sistema de Material, por ejemplo, se diseñan en una rejilla de 24px cuyo dibujo se mantiene dentro de un área activa de 20px, con 2px de recorte a cada lado. Un icono de Material «de 24px» es en realidad unos 20px de dibujo en una caja de 24px.

Ese relleno no es desperdicio: es la forma en que un conjunto equilibra el tamaño óptico. Las formas llenan el ojo de manera desigual: un cuadrado sólido dibujado hasta los mismos límites que un círculo de contorno fino se percibe claramente más grande, así que los conjuntos dan a las formas redondas y diagonales un poco más de extensión y a las formas cuadradas densas un poco menos, todo dentro de un mismo contenedor compartido. La consistencia vive en la caja; el dibujo varía deliberadamente dentro de ella.

La consecuencia práctica: mezclar conjuntos de iconos es como las interfaces se vuelven sutilmente irregulares. Si un conjunto mantiene unos 20px de dibujo en su caja de 24px y otro mantiene unos 22px, los iconos del segundo conjunto se renderizan alrededor de un 10% más grandes al mismo tamaño nominal. Nada está mal de forma medible —cada caja es de 24px—, y aun así la barra de herramientas parece dispareja. Las soluciones fiables son quedarse dentro de un solo conjunto, o reescalar los glifos importados al área activa de tu conjunto antes de publicarlos.

¿Qué tamaño de icono corresponde a cada tamaño de texto?

Una pareja desarrollada a partir de la escala de arriba (base 16, razón 2, dos notas), con interlineados sobre su línea base de 8px —la línea base es la mitad de la base, así que el ritmo del texto y las cajas de icono comparten un cuanto:

Lee las dos columnas de la derecha como políticas rivales. La columna fijo ajusta cada contexto al tamaño más cercano que el conjunto de iconos realmente incluye (12, 16, 24, 32), de modo que los glifos se renderizan al tamaño para el que fueron dibujados y los trazos se mantienen en píxeles enteros. La columna 1em dimensiona el icono en unidades em para que siga a su texto con exactitud: un icono dentro de un subtítulo de 23px se renderiza a 23px, sea o no su tamaño de dibujo.

Abre la escala que hay detrás de esta tabla en Scale Composer —base 16, razón 2, dos notas— y lee los pasos de los que proviene la columna de texto: 8, 11, 16, 23, 32, 45, 64, con la línea base de 8px debajo de los interlineados.

¿Deberían dimensionarse los iconos en px o em?

Los pasos fijos tienden a ganar en el cromo de la interfaz —barras de herramientas, navegación, botones, filas de tabla—, donde los vecinos de un icono son otros iconos y controles del tamaño de la rejilla más que frases. Ahí la nitidez es lo que más importa: el dibujo hecho en píxeles enteros puede caer en fracciones al reescalarlo, y una columna de iconos junto a tamaños de texto mixtos sigue queriendo un único tamaño de icono para que la columna se lea como columna.

El dimensionado en em tiende a ganar dentro del texto que fluye: una flecha de enlace externo, una marca de estado en línea, un icono dentro de un encabezado que la configuración de fuente del usuario puede redimensionar. Ahí el único vecino del icono es su propio texto, seguir ese texto vence a la nitidez del píxel, y 1em acompaña cada cambio futuro del tamaño de fuente sin más contabilidad. Muchos sistemas aplican ambas políticas a la vez, con alcance acotado —fijo en el cromo, em en la prosa—, que es como está pensada para leerse la tabla de arriba.

¿Cómo alineas verticalmente un icono con su texto?

Ópticamente —contra la altura x o la altura de mayúsculas del texto—, no matemáticamente contra la caja de línea. La masa visual del texto en minúsculas se sitúa entre la línea base y la altura x, no en el centro de la caja de línea, así que un icono centrado en la caja suele quedar uno o dos píxeles desviado de lo que el ojo espera, y la desviación crece a medida que el interlineado se vuelve más generoso.

CSS lo reconoce: vertical-align: middle alinea el centro de un elemento en línea con la línea base del padre más la mitad de su altura x —una alineación centrada en la altura x—, y por eso a menudo se ve bien en iconos en línea sin corrección. Cuando no, la corrección es un empujón de 1–2px, y el empujón es legítimo: la rejilla reduce decisiones, no es una ley, y un icono movido 1px para parecer centrado está terminado, no roto.

Pon tus tamaños de icono junto a tu escala tipográfica

Un tamaño de icono rara vez se elige solo: se elige frente al texto junto al que se situará, y la tabla de emparejamiento de arriba es una consecuencia de tres números que se vuelve a derivar sola cuando cambian. Míralo suceder: abre la misma escala junto a su rampa tipográfica y lee los emparejamientos directamente: leyendas de 11px, cuerpo de 16px, subtítulos de 23px, títulos de 32px, cada uno a un paso de icono de distancia.