Unidades de medida CSS para fuentes Responsive Web Design

  • Por
  • y  
Las mejores unidades de medida de CSS para trabajar con tamaños para tipografías en Responsive Web Design, ventajas, inconvenientes y soluciones a la unidad rem.

Las unidades de CSS no tienen mucho misterio, ya que están documentadas en cientos de sitios web, sin ir más lejos en DesarrolloWeb.com tenemos varios artículos sobre el tema. Pero en la práctica surgen dudas sobre estos asuntos porque, a veces, las personas no tenemos claro cuándo utilizar em o rem, porcentaje, etc. cuando se trata de dar tamaño a los textos.

Sobre este asunto, Daniel Martínez estuvo exponiendo las respuestas a los problemas más típicos a la hora de asignar tamaños a las fuentes, siempre con unidades de medida para las hojas de estilo que se adapten al dispositivo, para el Responsive Web Design.

Nota: este artículo es un extrato parcial del programa completo, emitido en directo que realizamos en DesarrolloWeb.com, #designIO sobre Unidades de medida CSS.

Las mejores unidades de medida para los textos en CSS

Como debemos de saber, cuando trabajamos con diseños adaptables, debemos usar siempre medidas relativas, para que éstas se adapten a las dimensiones de las pantallas donde pueda verse el sitio web. Esto nos obliga a descartar px, cm, pero nos quedan varias otras donde elegir.

Básicamente, la mejor unidad para trabajar textos adaptables en CSS es el rem, "la unidad perfecta". Esta unidad de medida quiere decir "root em", y es aquella que nos remite al tamaño de fuente que tenemos en la raíz. Por ejemplo, si nosotros tomamos el BODY y tiene un font size de 100% (lo que corresponderá generalmente con unos 16 píxeles), sabemos que siempre rem será equivalente a esos 16 píxeles, lo pongas donde lo pongas.

Por qué rem es más útil que em

Hasta hace poco, estoy seguro de que muchos de los desarrolladores venían utilizando unidades de medida en em, pero ¿cuál era el problema con estos em? pues que el em depende del tamaño de la fuente del contenedor, o del tamaño de fuente declarado en alguno de los contenedores padre de éste.

La unidad em es relativa al padre, que si tiene a su vez otra unidad en em, se hace relativa al padre y así, en la jerarquía de elementos hasta llegar al elemento raíz, el BODY. Esto, que puede resultar fácil de entender, en la práctica a veces nos puede dar algún quebradero de cabeza al calcular qué medida es exactamente un em en un contenedor, porque dicho tamaño depende de una innumerable cantidad de contenedores que pueden estar anidados, hasta llegar al contenedor donde estamos indicando las medidas. De este modo, para cambiar el tamaño de la fuente de ese elemento, tenemos que tener en cuenta muchas otras medidas que pueda haberse dado a cualquiera de los padres en la página.

Calculando un valor en em

Veamos esto en números para darnos cuenta de cómo se debe calcular el tamaño de una fuente usando em, para hacerla corresponder al tamaño de píxeles deseado.

Imaginemos el tamaño base de la fuente es de 16 píxeles. El tamaño de un H1 imaginemos que lo queremos de 24 píxeles, que sería 1.5em. ¿Por qué? pues tenemos que aplicar la regla "target/context" el target es la medida que le queremos dar al H1, 24px y el contexto es la medida del contenedor donde estamos 16px. De modo que la medida que le tenemos que poner al H1 sería de 24/16 = 1.5em.

Pero ahora imaginemos que dentro del H1 tenemos un link y queremos darle un tamaño de letra menor, digamos 12px. Ahora ya no podemos dividir 12/16 para saber el tamaño de esa medida en em, ahora tendríamos que tener en cuenta el tamaño del H1 que habíamos quedado que era 1.5em. Si no sabemos que eso equivale en este caso a 24px, primero deberíamos de calcular el tamaño del H1 para llegar a los 24px que tenía. Target sería 12px y context 24px, de modo que 12/24 = 0.5em el tamaño en em que deberíamos poner al enlace.

Pero la cosa se puede complicar todo lo que queramos. Ahora podemos imaginar que dentro del link hay un SPAN, al que queremos darle otro tamaño de fuente distinto. Si queremos acertar con el tamaño deseado tendremos que tener en cuenta el tamaño del BODY, el definido luego para el H1, el definido para el enlace y finalmente calcular el tamaño del SPAN.

Pensando en otros dispositivos

Pensemos además en diferentes dispositivos. El tamaño de una fuente en un móvil podría ser si se desea un poquito menor que el tamaño de fuente en un Ipad.

Nota: Aquí podríamos pensar que al ser el móvil de menor tamaño que el Ipad, la fuente ya de por si va a verse menor, pero debemos tener en cuenta que un móvil siempre lo tendremos más pegado a la cara, con lo que realmente admite un tamaño de fuente menor.

Si queremos entonces reducir la fuente podríamos asignar al BODY, por medio de "mediaqueries" para pantallas pequeñas, un tamaño de 80% en el tamaño de la fuente. Como todas las fuentes están definidas con medidas relativas, encontraremos que se reducen en toda la página, pero en la práctica observaremos que se nos empieza a descuadrar, que los tamaños no casan.

Estos son los típicos problemas que evitamos con rem.

Cómo funcionan las unidades Rem

Rem no funciona de manera relativa a su contenedor, sino de manera relativa al tamaño definido en la raíz. De esa forma, cuando quiero calcular una medida de un elemento, no tengo que pensar en el tamaño de su padre o en el tamaño del padre del padre.

La regla del "target/context" sigue valiendo perfectamente, pero puedo hacer la cuenta siempre con respecto al tamaño definido en la raíz.

Si en el elemento BODY teníamos 16px de tamaño y quiero 24px en el H1, tengo que calcular 24/16 = 1.5rem. Si luego en el enlace que había dentro del H1 quiero que sea 12px, tengo que calcular como context 16px (que era el equivalente al 100% definido como tamaño de la raíz) y no el tamaño del H1. O sea, en este caso sería 12/16 = 0.75rem.

Compatibilidad con las unidades de medida Rem y fallback

Infelizmente, existe un problema con las unidades de medida especificadas en rem y no es otro que Internet Explorer 8 y por supuesto, las versiones anteriores a éste. Los IE antiguos no son compatibles con las unidades rem.

La solución es sencilla y se realiza por lo que se denomina fallback, que se basa en especificar código alternativo en caso de que no funcione el original. En este caso el fallback es tan sencillo como especificar las medidas en dos unidades.

font­size: 16px; 
font­size: 1rem;

Los navegadores antiguos que no entienden rem se quedarán con font size 16px (porque ignoran la segunda línea, ya que no son compatibles con esa unidad). Los que entienden rem simplemente leen la segunda línea y sobreescriben el valor especificado en la primera.

Nota: ¿Por qué nos podemos permitir escribir en píxeles esa medida fallback? porque nos resulta cómodo utilizarlos, ya que no tenemos que hacer ningún cálculo. Como esa medida solo la van a interpretar en los IE 8 o inferior, y son ordenadores de escritorio, no nos molesta.

Ciertamente nos da un poco más de trabajo especificar por partida doble todas las medidas, pero aquí encontramos una de las ventajas de usar los llamados preprocesadores CSS. Éstos tienen la posibilidad de escribir un mixin por medio del cual podemos indicar en nuestros CSS, siempre medidas en píxeles y luego que el propio preprocesador sea el que la convierta a rem, mediante la regla target/context y escriba las dos unidades de medida, tanto en rem para los navegadores modernos y píxeles como fallback para los Internet Explorer antiguos.

Conclusión

De momento, con estas informaciónes esperamos que tengas suficiente para empezar a experimentar con los rem y asignar de manera más sencilla los tamaños de las fuentes de tus sitios web.

Si te ha interesado este artículo debes saber que simplemente te hemos resumido los primeros 14 minutos del programa. Estuvimos hablando sobre muchas otras medidas y unidades en CSS, no solamente para las fuentes, sino para otros tipos de atributos, como altura, anchura, etc. Todo eso lo encontrarás en el #designIO sobre unidades de medida CSS.

Autor

Daniel Martínez

Daniel es un diseñador gráfico convertido a web que vive dentro de Internet desde el año 95. Amante del diseño y estilismo en las diferentes expresiones, siempre ha destacado creando diseños adaptados a las últimas tendencias. Es una de esas personas que ha formado parte de todas las generaciones dedicadas al diseño web, desde el estilo "Geocities" de los 90, hasta Responsive Web Design actualmente.
Diseñador gráfico convertido a web

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

estoyenello

18/9/2013
unidades fisicas
"cuando trabajamos con diseños adaptables, debemos usar siempre medidas relativas,"
No estoy de acuerdo. Tarde o temprano vamos a darnos cuenta de que debemos abandomnas las unidades relativas para la tipografia y debemos volver a utilizar medidas fijas.
Si mi smartphone tiene la misma resolución que mi pantalla de escritorio, ¿como le indico que en un caso el texto sea mayor en pixels que en el otro?
Mi solucion es utilizr medidas en cm.... sí, en centimetros. De este modo un disspositivo de cualquier dimensión puede tener un tamaño de texto adecuado a el.
Por ejemplo, a un movil de menos de 10cm le asigno un tamaño de letra de 0,2cm. Para una pantalla de más de 20cm le asigno un tamaño de letra de 0,3cm.
Facil y con sentido.

carscx

31/10/2013
Medidas relativas
Eso que comentas sobre que hay que usar cm, no estoy del todo de acuerdo, y digo del todo, porque es cierto lo que dices, pero hay un motivo a la hora de usar medidas relativas, y es la reutilizacion de codigo. Es la ventaja de usar rem, si tengo una pantalla grande le voy a ampliar solo al body el tamaño de la fuente a un 120% y si tengo un smartphone le voy a aplicar SOLO AL BODY un tamaño de fuente de 80%. Solo tengo una linea para escribir para cada regla. De tu manera tienes que ir elemento por elemento en las mediaqueries, estableciendo los cms de la fuente.

Carlos Alberto

28/1/2016
Importancia de utilizar el REM
Buen dia para todos, la utilización del rem trae muchos beneficios ya que automatiza la visualización de nuestros contenidos (porque se autoajusta el tamaño del texto), y nos beneficia en cuanto a la programación por la disminución de lineas de código.

BONISOFT

07/5/2016
Gracias por este post y por esta página que debe estar a mano
Gracias por este post y por esta página que debe estar a mano de cualquier programador o diseñador web. Gracias por compartir el conocimiento ;-)