Usa la unidad perfecta para Responsive Design

CSS tiene una serie de unidades de medida distintas, que tienen distintos usos y su función específica. Muchas de estas unidades están presentes desde hace muchos años, antes de la era informática y otras están pensadas para aprovechar las posibilidades digitales.

Vamos a ver los distintos tipos de unidades y cuales usar mejor en un diseño adaptable o Responsive Design, ya sea para dar tamaños a textos o estructuras.

En el diseño web tenemos dos tipos de unidades: las absolutas (que hacen referencia a medidas reales, como son los centímetros o pulgadas) y las relativas (que varían según otra medida, como son los píxeles o medidas como em o rem).

Unidades absolutas

Las medidas absolutas son invariables, si quieres que tenga algo un centímetro de alto, lo debería de tener en cualquier dispositivo, tenga le resolución que tenga y la densidad de píxel que sea.
Por eso son útiles cuando hacemos contenidos que serán impresos, ya sean en la web o fuera de ella (por ejemplo en Word o InDesign). Estas son las más importantes:

• cm: representa a los centímetros y deberían de mantener una relación con la realidad en cualquier pantalla.
• mm: milímetros, es más útil que los centímetros, ya que te permite ser más exacto.
• pt: los puntos son la medida más usada para representar el tamaño de una fuente cuando su destino es ser impreso (los puntos son usados en Word). Equivalen a 1 pulgada entre 72.
• px: los píxeles no son medidas absolutas, pero voy a meterlos en el mismo saco ya que en la práctica son medidas invariables, por lo menos cuando queremos hacer un Responsive Design.

Las medidas absolutas (cm, mm y pt, por ejemplo) no son recomendables usarlas en el diseño web, salvando excepciones como contenidos destinados a ser impresos (por poner un ejemplo mi Curriculum Vitae está destinado a tal fin o a que se visualice en tamaño folio en cualquier pantalla).

Estas medidas en el Responsive Design debemos de evitarlas en mayor medida, aunque es imposible ya que nos ayudarán a marcar los tamaños relativo en nuestra web, con las siguientes unidades relativas.

Unidades relativas

Estas unidades relativas no tienen un tamaño fijo, varían según el tipo de dispositivo o según los tamaños de otros elementos de una web.
Son perfectas para el Responsive Design, ya que podemos usarlas y variando una sola dimensión todas las demás conseguirán adaptarse (con ayuda de @media queries por ejemplo). Estas son las medidas relativas más relevantes:

• em: esta medida es relativa al tamaño de la letra, y aunque suene redundante lo que hace es coger el tamaño que debería de tener esta letra y lo multiplica. Si una letra, según el estilo de la letra de una página es de 14px y a un elemento le damos 2em multiplicaremos por dos ese tamaño.
• rem: esta medida es idéntica a la anterior, pero depende del tamaño del texto del elemento html (en el CSS). En esta medida nos centraremos después.
• porcentaje (%): esta medida es muy simple de comprender, esta unidad determina el porcentaje del tamaño disponible que se usará. Es decir, si tenemos un bloque de 1000px y le aplicamos a un contendor 50% este se tomará de tamaño 500px.

Estas medidas son las ideales para los diseños adaptables, ya que permiten variar todo un diseño simplemente cambiando el tamaño de un elemento o cambiado el tamaño de la letra de un solo elemento.

Los porcentajes son la base del Responsive Design, ya que permiten que las columnas o bloques de una web se redimensionen junto al ancho de una pantalla. Es por ello que se deben de usar ante todo, aunque no siempre es posible y hay otras formas de conseguir una buena proporción.

Y tenemos el rem, que cada vez está siendo más usado, ya que permite cambiar las dimensiones de todos los texto de una página muy fácilmente, solo cambiando el tamaño del texto del elemento html.

Resumen

Es importante conocer las medidas y es recomendable usar las relativas cuando queremos hacer un diseño que varíe según el dispositivo, pero no debemos de obsesionarnos con estas unidades, ya que algunas veces en muy difícil hacer que estas medidas se adapten bien a nuestras necesidades. Por ello disponemos de las @media queries, aunque es mejor, bajo mi punto de vista, recurrir preferentemente a las unidades relativas.