rem, vh, vw, vmin: nuevas unidades de texto en CSS3

Ene 15, 2013Artículos0 Comentarios

unidades-texto-cssRíos de tinta (o pixels) han corrido en Internet acerca de qué unidades usar en el texto al diseñar una web. Elegir entre unidades fijas, como el pixel o relativas, como los em o usar porcentajes han tenido defensores y detractores a medida que ha ido evolucionando el diseño web y concretamente la maquetación con hojas de estilo CSS.

Más recientemente la proliferación de los sitios web con diseño adaptable (responsive design in english) han marcado como tendencia el uso de unidades relativas (% o em) en detrimento del pixel para conseguir una mejor visualización en dispositivos móviles. Aún así, seguimos teniendo algunos problemas con el uso de estas unidades por el efecto «cascada». Un ejemplo sencillo:

<style>
body  { font-size: 100%; }
p, li { font-size: 0.75em; }
</style>
<p> soy un texto de 12px </p>
<ul>
<li> yo también soy un texto de 12px
<ul><li> Yo tengo 9 px </li></ul>
</li>
</ul>

Utilizando los em como unidad para párrafos y listas, que a su vez están anidadas, provoca que el tamaño del texto vaya decreciendo. Controlar este efecto en páginas grandes y complejas es bastante complicado y al final suele resolverse mediante prueba y error. El problema de em es que su valor va referido al contenedor del elemento que tiene aplicado el estilo.

Nuevas unidades relativas en CSS3: REM

Para corregir este problemilla las últimas especificaciones CSS3 nos traen novedades. Empezamos con rem, que no es un grupo de música, sino una nueva unidad de medida de texto relativa. La principal diferencia entre rem y em es que rem está referido al elemento raíz de la página en lugar del contenedor.

El ejemplo anterior quedaría resuelto con:

p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

VW, VH y VMIN: Unidades relativas al dispositivo

Otras novedades importantes son las unidades vw, vh y vmin. Enfocadas al uso en diseño adaptado a distintos dispositivos, se trata de unidades relativas al tamaño en pixels del dispositivo. Funcionan así:

  • 1 vw = 1% de la anchura (width) de la ventana del dispositivo.
  • 1vh = 1% de la altura (height) de la ventana del dispositivo.
  • 1vim = 1% de la dimensión, altura o anchura, más pequeña del dispositivo.

Por ejemplo, suponiendo un tamaño de ventana del navegador de 1000×800, establecer el texto en 1.8vw equivale a 18 px , 2vh serían 16px y 1.5vmin = 12px.

Aún no todos los navegadores soportan las nuevas unidades, pero como ya estamos acostumbrados poco a poco se irán implementando. De momento funcionan 100% en Webkit (chrome, safari, ios) e IE9 / IE10 (en IE9 vmin se llama vm). En Firefox se incluirá en la versión 19 (finales de febrero) y en Opera se implementará en breve.

TE PUEDE INTERESAR

Inspiración web #10

Inspiración web #10

Formas orgánicas, líneas suaves. Seguimos con la lista de tendencias en diseño web para este 2020. En nuestros artículos anteriores vimos que este 2020 van a ser tendencia las micro-interacciones y el minimalismo. En esta nueva entrega hablaremos de las formas...

Nueva identidad visual de Nowe.

Nueva identidad visual de Nowe.

El cambio de identidad visual es uno de los elementos más importantes que contempla Nowe en su nuevo plan estratégico. Nuevo logo, nuevos manuales técnicos para los cursos de diseño, nueva web, etc. Para la renovación de la marca y su nueva identidad visual, elegimos...

Creatividad en el diseño editorial

Creatividad en el diseño editorial

La creatividad en el diseño editorial. Muchas veces nos preguntamos si realmente el diseño es efectivo. ¿Para qué sirve la creatividad en el diseño editorial? Lo hemos explicado varias veces y seguiremos haciéndolo; sirve para COMUNICAR. En este caso os mostramos un...

Share This