Hace un año sólo conocía los píxeles. Empecé a aprender más de diseño web y descubrí que esto era solo la punta del iceberg. Las unidades que se utilizan para establecer tamaños y espacios en diseño web son muy variadas, y no está de más conocerlas, sobre todo si utilizas píxeles sin ton ni son. En este artículo (un poco tedioso si no eres friki del tema 😂) veremos las alternativas al píxel y cuándo se recomienda usar cada una de ellas.
Píxeles (px): La unidad tradicional
Bueno, pues qué decir de los píxeles. A modo de introducción, estos son la unidad de medida más comúnmente asociada con el diseño web. Representan puntos individuales en una pantalla y se utilizan para definir tamaños de fuente, márgenes, bordes y dimensiones de elementos. Son unidades estáticas o «fijas».
¿Cuándo usar píxeles en tus diseños?
Los píxeles, por norma general, se suelen usar de más. Existen unidades más adecuadas en función de lo que necesites hacer (definir el tamaño de un texto, el ancho de un contenedor, el padding alrededor de un objeto…), pero hay algo para lo que 100% debes usar píxeles: media queries. Para definir el ancho del media query necesitas una unidad estática, que no sea relativa a nada y no pueda variar a no ser que tú mismo lo establezcas.
P.D.: los media queries permiten establecer estilos de CSS en función del ancho del dispositivo que se quiera. Por ejemplo, se puede hacer que un texto cambie de color en función de si lo ves en escritorio o en móvil. Yo lo llamo *magia* :). Próximamente haré un post al respecto.
Relativo al tamaño de fuente: em y rem
Las medidas em y rem son unidades relativas que «dependen» del tamaño de texto de otros elementos. Es decir, si cambia el tamaño del texto del elemento del que dependen (ahora profundizaremos qué elementos afectan a cada una de estas unidades), el tamaño de esas medidas cambia.
¿Qué son las unidades em?
En el caso de la unidad em, en inglés «emphemeral unit», esta toma como referencia el tamaño de fuente del elemento padre del que estamos editando. Se decía que em se basaba el tamaño de la letra «M» y que de ahí su nombre.
Pongamos un ejemplo: el body de nuestra web tiene un tamaño de fuente de 16px, y creamos un elemento hijo con un tamaño de 1.5em. Esto significa que este elemento hijo tendrá un tamaño de 16px*1.5, es decir, 24px de tamaño. Como este elemento hijo depende de el body que hemos creado, 1em sería igual a 16px, es decir, el tamaño de fuente del elemento padre.
Vale, ¿pero para qué me sirven estas unidades em?
Uno de los usos más comunes de estas unidades son los botones. Si quieres que un botón sea el doble de alto que el texto al que acompaña, puedes simplemente establecer el alto del botón en 2em. Por otro lado, si estás estableciendo el padding de un botón, y necesitas que ese padding cambie de tamaño en función de si el texto que contiene cambia de tamaño (por una función o un media query, por ejemplo), debes usar em. Este ejemplo lo utiliza Kevin Geary en su curso Page Building 101.
¿Y las unidades rem?
La unidad rem es similar a em, pero se basa en el tamaño de fuente del elemento raíz (html). Esto hace que sea más predecible y fácil de manejar en ciertos casos. Se considera más estática que la unidad em.
¿Pero, qué es la fuente del elemento raíz o la root font size?
La root font size es el tamaño de fuente por defecto de los buscadores, normalmente correspondiente a 16px. El usuario que esté usando un navegador puede escoger un tamaño base de fuente mayor o menor según sus necesidades, por lo que una web bien hecha tiene que dar la posibilidad de ampliar o disminuir el tamaño del texto. Para ello no podemos utilizar unidades estáticas como el píxel, ya que es fija y no cambia en función a nada. Usaremos las unidades rem, también conocidas como Root em.
En base a esto, si el tamaño base de un buscador es 16px, esto se correspondería con 1rem. Por lo tanto, si queremos que nuestro encabezado tenga un tamaño de 32px, indicaremos un tamaño de 2rem. Puedes profundizar en este tema en el vídeo publicado por Kevin Geary, en el que además te habla sobre cómo establecer que en tu web el root font size sea el 62,5%, es decir, 10px en lugar de 16px, de manera que 1rem sean 10px, haciendo el cálculo más sencillo.
¿Cuándo usar estas unidades?
Las unidades rem son las más típicamente utilizadas una vez dejas atrás al píxel, ya que están a medio camino entre los px y los em, haciéndolas fáciles y cómodas de utilizar. Además, combinándolas con funciones, que ayudan a darles mayor dinamismo y adaptabilidad, nos sirven para casi todo: tamaños de texto, padding, gaps, etc.
Viewport Height y Width (vh y vw): Adaptación a la Pantalla
Las unidades vh y vw son relativas al tamaño de la pantalla en la que se está visualizando el contenido. Viewport height (vh) hace referencia al alto de la ventana en la que se está visualizando, de manera que 100vh sería el 100% de la altura de la ventana. Por otro lado, vw se refiere al ancho de la ventana, de forma que 100vw es el 100% de la anchura de la ventana.
¿Y estas unidades para qué se usan?
Las unidades vh y vw permiten crear diseños que se ajusten al tamaño de la ventana del navegador. Su uso más común es cuando queremos que una sección de contenido ocupe todo el alto de la ventana del navegador, para lo que usamos 100vh.
Sin embargo, hay que tener en cuenta que estas unidades pueden dar problemas si, por ejemplo, usamos 100vh y el usuario resulta que (por alguna razón) está viendo nuestra web en una pantalla de 40 pulgadas. Seguramente el diseño quede raro. Además, si establecemos una altura en un teléfono móvil de 100vh, pero no contamos con el espacio que ocupa la interface el buscador que se esté utilizando, habrá parte del contenido que quede oculta por esta interface. Para ello ya se han aportado otras soluciones:
Novedades en unidades de adaptación a pantalla: small viewport units (svh y svw), large viewport units (lvh y lvw) y dynamic viewport units (dvh y dvw)
Todas estas unidades son variantes de vh y vw. En cuanto a svh y svw, la diferencia radica en que estas están basadas en el tamaño del viewport del navegador, excluyendo barras de desplazamiento y otros elementos de la interfaz del usuario.
Las unidades lvh y lvw hacen referencia al tamaño de la ventana del navegador, incluyendo el espacio que ocuparían los elementos de interfaz del buscador. Es decir, las small viewport units son el tamaño más pequeño de la ventana y las large viewport units son el tamaño más grande. Esta imagen, recuperada del artículo publicado por web.dev, lo ejemplifica genial:
Por otro lado, las unidades dvh (dynamic viewport height) y dvw (dynamic viewport width) «fusionan» las anteriores. El mismo nombre lo dice: cambia de manera dinámica entre small viewport units y large viewport units en función de si la interface del navegador está mostrándose o no. De nuevo, la siguiente imagen elaborada por web.dev lo ejemplifica:
Consideraciones de estas nuevas unidades:
Aunque estas unidades claramente ofrecen ventajas y solucionan problemas que nos encontrábamos con las vh y vw, es importante asegurarse de que sean compatibles con todos los navegadores, ya que se han lanzado recientemente y es probable que den problemas en este sentido.
Porcentaje (%): Flexibilidad relativa al contenido
El porcentaje es una unidad relativa al tamaño del contenedor del elemento. SI tienes un párrafo que es el 50% de ancho del contenedor en el que se encuentra, verás que ese párrafo ocupa la mitad de ese contenedor. Así de simple. Los porcentajes facilitan la creación de diseños flexibles que se adaptan al tamaño del contenedor.
En la siguiente imagen, recuperada de un artículo publicado para Nerd For Tech por Asavari Ambavane en Medium, vemos las diferentes unidades absolutas y relativas en CSS (porque sí, hay más).
Conclusión: el arte (o tortura) de elegir la unidad correcta
En el diseño web, la elección de la unidad de medida correcta es una movida. Cada unidad tiene sus propias ventajas e inconvenientes, así que más vale tenerlas bien estudiadas para no meterse en líos.
En cuanto a este artículo, por aquí lo dejo, pero estate atento, ya que la próxima semana publicaré un nuevo post sobre una de las funciones que podemos utilizar en diseño web para establecer tamaños dinámicos: la función clamp(). ¡Lleva el diseño responsive al siguiente nivel!