Mejore los elementos de la interfaz de usuario con alineación tipográfica y escala | trucos CSS

El uso de iconos en los elementos de la interfaz de usuario es útil. Además de etiquetar elementos, los íconos pueden ayudar a reforzar la intención del elemento de usuario para los usuarios. Pero debo decir que noto una ligera falta de coincidencia de los íconos mientras navego por la web. Incluso si el ícono está alineado correctamente, los íconos a menudo no responden bien al cambiar los estilos tipográficos del elemento.

He tenido en cuenta algunos ejemplos del mundo real y me gustaría compartir mis pensamientos sobre cómo los he mejorado. Espero que estas técnicas puedan ayudar a otros a crear elementos de interfaz de usuario que se adapten mejor a los cambios tipográficos y mantengan los objetivos de diseño originales.

Ejemplo 1 - Mensajes en el sitio

Encontré este ejemplo de un mensaje en un sitio web de medios populares. La posición del icono no se ve tan mal. Pero cuando cambia algunas de las propiedades del estilo del elemento, como font-size y line-heightcomienza a desmoronarse.

Problemas identificados

• el icono es absoluteposicionado desde el borde izquierdo usando una unidad relativa (rem)
• a medida que el ícono se elimina de la secuencia, el padre recibe uno más grande padding-left value para ayudar con la distancia total: idealmente, nuestro padding-x es el mismo y todo se ve bien, ya sea que haya un ícono o no
• el icono (esto es SVG) también cambia de tamaño rems - esto no permite el cambio de tamaño apropiado si es su padre font-size cambios

Recomendaciones

Queremos que el borde superior de nuestro ícono esté en la línea de puntos azul, pero a menudo encontramos el borde superior de nuestro ícono en la línea de puntos roja.

¿Alguna vez ha insertado un ícono al lado de un texto y simplemente no se alinea con la parte superior del texto? Puede mover el ícono en su lugar con algo como position: relative; top: 0.2emEsto funciona bastante bien, pero si los estilos tipográficos cambian en el futuro, su ícono puede verse desalineado.

Podemos posicionar nuestro icono de forma más fiable. Usemos la distancia base del elemento (la distancia desde la línea base de una línea hasta la línea base de la línea siguiente) para ayudar a resolver esto.

la distancia basica es tamaño de fuente * altura de línea.

Guardaremos esto en una propiedad CSS personalizada:

--baselineDistance: calc(var(--fontSize) * var(--lineHeight));

Luego podemos mover nuestro ícono hacia abajo usando el resultado de (distancia base - tamaño de fuente) / 2.

--iconOffset: calc((var(--baselineDistance) - var(--fontSize)) / 2);

S font-size sobre 1rem (16px) y line-height sobre 1.5nuestro icono se moverá 4 píxeles.

• distancia básica = 16px * 1.5 = 24px
• icono de desplazamiento = (24px - 16px) / 2 = 4px

Demostración: antes y después

Ejemplo 2 - listas desordenadas

El segundo ejemplo que encontré fue una lista desordenada. Utiliza una fuente web (Font Awesome) para su icono a través de ::before pseudo-elemento. Había un monton sobre estupendo artículos para diseñar listas ordenadas y desordenadas, por lo que no entraré en detalles sobre el relativamente nuevo::marker pseudo-elemento, etc. Por lo general, las fuentes web pueden funcionar bastante bien al alinear íconos según el ícono utilizado.

Problemas identificados

• no absolute posicionamiento utilizado: cuando usamos pseudoelementos, no solemos usar flexbox como nuestro primer ejemplo y absolute aquí brilla el posicionamiento
• el elemento de la lista utiliza una combinación de padding y negativo text-indent para ayudar con el diseño: nunca puedo hacer que esto funcione bien cuando se considera la escalabilidad de íconos y texto de varias líneas

Recomendaciones

Como también usaremos un pseudo-elemento en nuestra solución, usaremos la palanca absolute posicionamiento. El tamaño del icono en este ejemplo era un poco más grande que la copia adyacente (alrededor de 2x). Por lo tanto, cambiaremos la forma calculamos el icono top El centro de nuestro ícono debe alinearse verticalmente con el centro de la primera fila.

Comience por calcular la distancia base:

--baselineDistance: calc(var(--fontSize) * var(--lineHeight));

Mueva el icono hacia abajo usando el resultado de (distancia base - tamaño del icono) / 2.

--iconOffset: calc((var(--baselineDistance) - var(--iconSize)) / 2);

Así que con un font-size sobre 1rem (16px), un line-height sobre 1.6y un icono del doble del tamaño de la copia (32px), nuestro icono recibirá un valor máximo de -3,2 píxeles.

• distancia básica = 16px * 1.6 = 25.6px
• icono de desplazamiento = (25.6px - 32px) / 2 = -3.2px

con uno mas grande font-size sobre 2rem (32px), line-height sobre 1.2y 64px icon, nuestro icono recibirá un valor máximo de -12,8 píxeles.

• distancia básica = 32px * 1.2 = 38.4px
• icono de desplazamiento = (38.4px - 64px) / 2 = -12.8px

Demostración: antes y después

Conclusión

Tenemos muchas opciones y técnicas para los íconos de la interfaz de usuario. Tenemos SVG, fuentes web, imágenes estáticas, ::markery list-style-typeIncluso se puede utilizar background-colorarena clip-paths para lograr algunos resultados interesantes para los iconos. Realizar algunos cálculos simples puede ayudar a alinear y escalar íconos de una manera más elegante, lo que da como resultado conversiones que son un poco más resistentes a las viñetas.

Ver también: Discusión anterior sobre la alineación del icono con el texto.