¿Qué unidad uso?
font-size
Lo recomendable es trabajar con unidades relativas, de tal forma que el tamaño del texto se adapte al elemento raíz de nuestro documento(html) y si hacemos zoom estemos facilitando la lectura del mismo. Debemos tener en cuenta que por defecto, el navegador el tamaño que le asigna es de 16px.
Otros elementos
De manera muy habitual, le solemos dar tamaños fijos a una imagen, pero debemos tener en cuenta en qué tipo de dispositivo la estamos visualizando, para que la imagen se adapte y se pueda visualizar bien. Por tanto, podemos dar un valor absoluto al elemento que lo contiene y a la imagen un valor relativo con %, o indicarle en función del ancho/alto de la resolución cuánto queremos que ocupe.
El % por ejemplo, es similar a vh/vw pero muy habitual su uso para establecer el ancho de los márgenes. Las unidades que vienen dadas en %, deben ser unidades que dependen del tamaño del contenedor
Cuando hablamos de espaciado a elementos que contienen texto, lo correcto es usar rem/em, de tal forma que ese espaciado sea relativo al tamaño del texto.
- Usa rem para la mayoría de las cosas (fuentes, padding, margin, gap) para que tu diseño escale con la accesibilidad y las preferencias del usuario.
- Usa % para elementos cuyo tamaño debe ser relativo a su contenedor padre (ej. el ancho de una columna dentro de un layout).
- vw y vh: para elementos cuyo tamaño debe ser relativo a la ventana del navegador
- px: para elementos decorativos que nunca deben escalar (ejemplo un border) o con em si queremos que escale con el texto.